基础操作
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(...);
圆形
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配合
- 获取视频每帧的图像
- 对其进行处理
- 处理后绘制到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() 性能极高
只有绘图次数影响性能