Canvas

绘制线条

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);  //起点
ctx.lineTo(200,100);//分别为x轴，和y轴
ctx.stroke();

绘制一个红色矩形

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);  //前两个坐标，后两个宽高

绘制圆形

ctx.beginPath();
ctx.fillStyle = "white";
arc(x,y,r,start,stop)
//x,y 开始坐标
//r 圆的半径
sttart,stop 一般是Math.PI  //pai  3.14925534
//第一个是起始角；第二个是结束角 ：如下图
ctx.fill();
ctx.stroke();

 

径向渐变

用的是createRadialGradient

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

创造一个线性渐变的矩形

let canobj = document.getElementById("mycan");
      let obj = canobj.getContext("2d");
      var grd = obj.createLinearGradient(650, 0, 750, 0);
第一个参数  //开始坐标X
第二个参数  //开始坐标y
第三个参数  //结束坐标X
第四个参数  //结束坐标y
      grd.addColorStop(0, "red");
      grd.addColorStop(1, "yellow");
      obj.fillStyle = grd;
      obj.fillRect(650, 0, 200, 100);
      obj.stroke();

空心文字

obj.font = "30px Arial";
      obj.strokeText("燕子没有你我怎么活啊", 300, 300);