HTML5 Canvas标签

最新推荐文章于 2019-07-31 09:17:55 发布

weixin_34343689

最新推荐文章于 2019-07-31 09:17:55 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/darthbadwolf/p/5319469.html

本文介绍了如何使用HTML5 Canvas API创建线性和径向渐变效果。通过实例代码演示了如何设置渐变颜色停靠点，并将渐变填充到矩形区域，适用于网页设计师和前端开发者。

canvas不适合用css操作大小

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

arc(x, y, radius, startAngle, endAngle）

Canvas - 渐变

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

线性渐变：

var grd=ctx.createLinearGradient(0,0,50,80);

x,y 表示开始渐变的线坐标

代码：

<canvas id="test" width="400" height="400" ></canvas>
    
     <script>
          var c=document.getElementById("test");
          var ctx=c.getContext("2d");
         
          var grd=ctx.createLinearGradient(30,0,200,0);
          grd.addColorStop(0,"yellow");
          grd.addColorStop(1,"red");
          grd.addColorStop(0.5,"blue");
          grd.addColorStop(0.4,"white");
         
          ctx.fillStyle=grd;
          ctx.fillRect(20,20,150,80);
     </script>
 

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径