canvas命令

基础操作

let oC=document.getElementById('c1');
let gd=oC.getContext('2d');

gd.beginPath();           // 清除之前的一切路径，重新开始
gd.lineWidth='50';		   // 线宽
gd.strokeStyle='yellow';  // 线颜色
gd.stroke();              // 画线
gd.fillStyle='yellow';    // 颜色
gd.fill();                // 填充图形

线

gd.moveTo(300, 100);      // 起点
gd.lineTo(400, 200);      // 中间点
gd.closePath();           // 闭合线条(不用closePath的 图形不会真正闭合)
gd.stroke / fill ();

字

坐标 x，y 是文字基线最左端到 canvas 左上角的距离

gd.font = '大小 字体';					// 和css的font一样
gd.strokeText('内容', 坐标x, 坐标y)		// 描边
gd.strokeText('内容', 坐标x, 坐标y)		// 实心

矩形

1.  gd.rect(起点x, 起点y, 宽, 高);
    gd.stroke / fill ();
2.  gd.strokeRect(...);
3.  gd.fillRect(...);

圆形

w3 arc教程

gd.arc(圆心x, 圆心y, 半径r, 起始弧度, 终止弧度, 是否逆时针);
gd.stroke / fill ();

删除图形

gd.clearRect(起点x, 起点y, 宽, 高);
建议 gd.clearRect(0, 0, oC.width. oC.height);

图片

drawImage中 的 oImg 对象可以是：

• <img>
• Image对象
• 另一个canvas
• 另一个video
• base64字符串

参数：

gd.drawImage(
    oImg,
    sx, sy, sw, sh,    // 原图片中截取小图
    dx, dy, dw, dh     // 小图的摆放位置
);

let oC=document.getElementById('c1');
let gd=oC.getContext('2d');

let oImg=new Image();

oImg.src='2.jpg';
oImg.onload=function (){
  //drawImage(图片, x, y)
  gd.drawImage(oImg, 0, 0);
};

旋转动画

rotate 旋转默认整个画布以左上角为中心点旋转

      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');
      let r=0;

      requestAnimationFrame(next);

      function next(){
        gd.clearRect(0,0,oC.width,oC.height);

        r++;

        gd.save();      //保存：canvas的状态（图形并不保存）——颜色、translate、rotate
        gd.translate(200, 175);
        gd.rotate(r*Math.PI/180);

        gd.strokeRect(-100, -75, 200, 150);
        gd.restore();   //恢复：恢复到上一次保存的状态

        requestAnimationFrame(next);
      }

像素级操作

gd.getImageData(坐标x, 坐标y, 宽, 高);	// 读取图片像素（跨域限制，不能读取本地文件）
gd.putImageData(imageData, 坐标x, 坐标y)	// 设置像素点

video canvas配合

1. 获取视频每帧的图像
2. 对其进行处理
3. 处理后绘制到canvas上

  let oV=document.getElementById('v1');
  let oC=document.getElementById('c1');
  let gd=oC.getContext('2d');

  let W=oC.width,H=oC.height;
  // 每一帧画一次
  requestAnimationFrame(next);
  function next(){
    gd.drawImage(oV, 0, 0);
    let imageData=gd.getImageData(0, 0, W, H);
    let data=imageData.data;
    // 图像处理
    for(let r=0;r<H;r++){
      for(let c=0;c<W;c++){
        data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
        (data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;
      }
    }
    // 重新绘制像素点
    gd.putImageData(imageData, 0, 0);

    requestAnimationFrame(next);
  }

图形后续处理

用户打开、下载、存到服务器

注意点

• 绘图区大小：通过行内样式给 width height
• 视觉大小： 通过 style 样式表设置
• 每开始一个新路径时，都要 beginPath()
• 自适应：改变行内样式的宽高，里面图形自动缩放
• rotate 旋转默认整个画布以左上角为中心点旋转
• 建议：beginPath()、save()、restore()必加

<canvas id="c1" width="300" height="300"></canvas>

特点
不会保存图形：图形不能修改，只能删了重画

性能
clearRect() 性能极高
只有绘图次数影响性能