HTML5 Canvas标签

 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	结束圆的半径