canvas初识

什么是canvas

• canvas是h5新增的api,正如字面意思画布一样，是用来做画东西的

创建上下文

  <canvas id="canvas" width="600" height="600">
  // 需要注意的是，如果设置style为px像素是设置容器的宽高，不是真正的canvas的宽高
  // 如果需要设置画布的宽高，只需要设置画布的width和height属性即可
   let canvas = document.querySelector("#canvas");
   let ctx=canvas.getContext("2d");

绘制矩形 fillRect(x,y,width,height)

 ctx.fillStyle="#f60";
 ctx.fillRect(0,0,300,300);

绘制描边矩形 strokeRect(x,y,width,height)

  ctx.strokeRect(10,10,100,100)
  ctx.strokeStyle="#00f";

绘制路径

• moveTo(x,y) 定义线条的开始坐标
• lineTo(x,y) 定义线条的结束坐标
• lineWidth = num 设置线条的粗细

 ctx.lineWidth = 10
 ctx.moveTo(300,300)
 ctx.lineTo(200,200)
 ctx.stroke()

绘制圆形 arc(x,y,r,start,stop)

 ctx.beginPath();
  ctx.strokeStyle="#f60"
  ctx.arc(100,100,10,0,2*Math.PI)
  ctx.stroke()

绘制文本

    ctx.font = "60px Arial";
    ctx.fillText("hello canvas",200,200) // 绘制实心文本
    ctx.strokeText("hello canvas",200,300) // 绘制空心文本

canvas渐变gradient

• 线性渐变linearGradient createLinearGradient(x,y,x1,y1)

    // 创建线性渐变
    let gradient = ctx.createLinearGradient(100,50,150,0);
    gradient.addColorStop(0,"#f60");
    gradient.addColorStop(1,"#0096e6")

    // 填充线性渐变
    ctx.fillStyle = gradient;
    ctx.fillRect(10,10,300,100)
     

• 径向渐变radialGradient createRadialGradient(x,y,r,x1,y1,r1)

// 创建渐变
  var grd=ctx.createRadialGradient(75,50,5,90,80,100);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");
  
  // 填充渐变
  ctx.fillStyle=grd;
  ctx.fillRect(10,10,150,100);
`

绘制图片 drawImage(img,x,y,width,height)

let img = document.querySelector("img");
  img.onload = ()=>{
    ctx.drawImage(img,100,100,200,200)
  }