【Html5每日练习】canvas绘制线性渐变图形

╰+哭是因爲堅強的太久メ 2022-06-13 12:14 339阅读 0赞 
  1. <html lang="en-US">
  2. <canvas id=myCanvas width=500px height=500px></canvas>
  4. <script>
  5.     var myCanvas = document.getElementById("myCanvas");
  6.     var context = myCanvas.getContext("2d");
  8.     var canvasGra = context.createLinearGradient(0,0,0,500);
  9.     canvasGra.addColorStop(0,"rgba(255,0,0,0.5)");
  10.     canvasGra.addColorStop(0.25,"rgba(0,255,0,0.5)");
  11.     canvasGra.addColorStop(0.5,"rgba(0,0,255,0.5)");
  12.     canvasGra.addColorStop(0.75,"rgba(0,255,255,0.5)");
  13.     canvasGra.addColorStop(1,"rgba(255,255,255,0.5)");
  14.     context.fillStyle = canvasGra;
  15.     for(var i=1;i<8;i++)
  16.     {
  17.         context.beginPath();        
  18.         context.arc(i*50,i*50,i*20,0,2*Math.PI,true);
  19.         context.fill();
  20.     }
  22. </script>
  23. </html>

效果图如下

1334371622_2708.png

发表评论

表情：
评论列表 （有 0 条评论，339人围观）

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

相关阅读

    相关 【html5每日练习】 html5 canvas "米"

    上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一

    悠悠悠悠/ 0 赞/ 342 阅读