根据菜鸟教程学习canvas小结

245 阅读3分钟

一、基本作用:

它可以用来制作照片集或者制作简单的动画

与svg区别:

①、svg绘制出来的每一个图形的元素是DOM节点,方便修改。canvas生成的是一张画布

②、svg输出的是矢量图,不存在失真。canvas输出标量图,放大缩小会失真。

二、与img标签区别:

​①、<canvas> 看起来和 <img> 标签一样,只是 <canvas> 只有两个可选的属性 width、heigth 属性,而没有 src、alt 属性。

②、需要结束标签

三、基本写法:

var canvas = document.getElementById('canvas')
if(!canvas || !canvas.getContext) return false;   //浏览器兼容写法,若if()内为true,执行return
var ctx = canvas.getContext("2d") // 2D渲染上下文

相当于绘制在第四象限,练手绘制 长方形

ctx.fillStyle = "rgb(200,0,0)"控制颜色
ctx.fillRect(x, y, width, height) 绘制一个填充的矩形
ctx.strokeRect(x, y, width, height) 绘制一个矩形的边框
ctx.clearRect(x, y, widh, height) 清除指定的矩形区域,然后这块区域会变的完全透明

注意:ctx.rect与ctx.fillrect区别:前者需要闭合并绘制,后者是已填充的黑色矩形。

四、路径问题

图形的基本元素是路径,路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合,路径都是闭合的。

绘制路径涉及到的方法:

ctx.beginPath() 新建线路
ctx.moveTo(x, y) 设置起点
ctx.lineTo(x, y) 线段走向
ctx.closePath() 闭合线路
ctx.stroke() 绘制线路
ctx.fill() 填充线路

五、绘制圆弧

ctx.beginPath() 新建线路
ctx.arc(x, y, r, startAngle, endAngle, anticlockwise) x代表横坐标,y代表纵坐标,r代表半径,startAngle代表初始弧度,engAngle代表结束弧度,anticlockwise为布尔值,默认为false顺时针,true逆时针
ctx.stroke() 绘制线路

Math.PI代表180度

六、绘制贝塞尔曲线

ctx.beginPath();
ctx.moveTo(10, 200); //起始点
var cp1x = 40, cp1y = 100;  //控制点
var x = 200, y = 200; // 结束点
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(cp1x, cp1y, x, y);
ctx.stroke();

七、其他常用属性

①、线宽

ctx.linWidth=? 线宽

②、末梢形状

ctx.lineCap=? 线的末梢形状 butt为默认值正方形;round为圆形;square也为正方形,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域

③、线与线连接处形状

ctx.lineJoin=? 三种情况:分别为round圆形,bevel三角形,miter为默认菱形

④、虚线

ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
ctx.lineDashOffset = -0; //起始偏移量

⑤、文字

ctx.font = "50px sans-serif" // 字体大小,字体ctx.fillText(text, x, y [, maxWidth]) // 文字,x轴位置,y轴位置,最大宽度,绘制填充
ctx.strokeText(text, x, y [, maxWidth]) // 绘制边框

⑥、图片

注意 :若不是本地图片,需等待页面加载后绘制图片,使用onload

本地:
var img = document.querySelector("img");
ctx.drawImage(img, 0, 0,x, y, a, b, c, d); // 图片,x轴位置,y轴位置,宽度,长度,切片x轴位置,切片x轴位置,显示x位置,显示y位置
获取后台图片:
var img = new Image();   // 创建img元素
img.onload = function(){
    ctx.drawImage(img, 0, 0)
}
img.src = 'myImage.png'; // 设置图片源地址

⑦、保存 save 和 获取 restore 状态

注意 :两者均没有参数

save()表示保存当前状态,包括:变形,其他属性内都包括

⑧、变形

注意:变形前应保存状态

ctx.translate(x, y); // x为左偏移量,y为右偏移量  相对于原点

⑨、旋转坐标轴

ctx.rotate(Math.PI / 180 * 45); // 参数只有一个为角度,顺时针方向

⑩、合成

ctx.globalCompositeOperation = "source-over"; //全局合成操作
多个参数:
source-over:后者覆盖前者
source-in: 展示重叠部分(后者的)
source-out: 展示后者的不重叠部分
source-atop:展示前者的不重叠与后者重叠
destination-over: 前者覆盖后者
destination-in: 展示重叠部分(前者的)
destination-out: 展示前者的不重叠部分
destination-atop:展示后者的不重叠与前者重叠
xor: 重叠位置变透明
copy: 保存新图像

⑪、裁剪

ctx.clip() 注意:需要放在绘制图形之前使用,否则无效