canvas 实现简单的图像扩散

灰太狼 2022-06-09 12:55 257阅读 0赞

canvas 实现简单的图像扩散

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;">
  5. Your browser does not support the canvas element.
  6. </canvas>
  7. <script type="text/javascript">
  8. var c=document.getElementById("myCanvas");
  9. var cxt=c.getContext("2d");
  10. var x1=200,x2=400,x3=600,y1=400,y2=400,y3=400,lr1=10,lr2=10,lr3=10;
  11. var lc1="#EE7942";lc2="#EE2C2C";lc3="#CD6839";
  12. var lr1,lr2,lr3;
  13. drawarc(15,"#CAE1FF",1);
  14. drawarc(25,"#98FB98",2);
  15. drawarc(25,"#757575",3);
  16. drawarc(30,"#000000",1);
  17. drawarc(35,"#32CD32",2);
  18. drawarc(50,"#6959CD",3);
  19. drawarc(45,"red",1);
  20. drawarc(50,"#fff",2);
  21. drawarc(65,"#000",3);
  22. function drawarc(radiu,ecolor,type){
  23. var grd;
  24. var x,y,r;
  25. var scolor;
  26. switch(type){
  27. case 1:
  28. x=x1;
  29. y=y1;
  30. r=lr1;
  31. lr1=radiu;
  32. scolor=lc1;
  33. break;
  34. case 2:
  35. x=x2;
  36. y=y2;
  37. r=lr2;
  38. lr2=radiu;
  39. scolor=lc2;
  40. break;
  41. case 3:
  42. x=x3;
  43. y=y3;
  44. r=lr3;
  45. lr3=radiu;
  46. scolor=lc3;
  47. break;
  48. default:
  49. }
  50. grd=cxt.createRadialGradient(x,y,r,x,y,radiu);
  51. grd.addColorStop(0,scolor);
  52. grd.addColorStop(1,ecolor);
  53. cxt.fillStyle=grd;
  54. cxt.beginPath();
  55. cxt.arc(x,y,radiu,0,360,false);
  56. cxt.closePath();
  57. cxt.fill();
  58. }
  59. </script>
  60. </body>
  61. </html>

发表评论

表情:
评论列表 (有 0 条评论,257人围观)

还没有评论,来说两句吧...

相关阅读