1.Canvas 常用 api
获取 2d 上下文对象
代码语言：javascript复制let ctx = document.getElementById("canva").getContext("2d");globalCompositeOperation
图形组合方式的设置
代码语言：javascript复制ctx.globalCompositeOperation = "destination-over";//新生成的图像在上方
填充和背景
代码语言：javascript复制// 3.设置背景填充色和边框色
ctx.fillStyle = "rgba(0,0,0,0.4)";
ctx.strokeStyle = "rgba(0,153,255,0.4)";位移
代码语言：javascript复制// 5.设置位移
ctx.translate(150, 150);旋转
旋转只传入一个参数：旋转的角度
代码语言：javascript复制// 6.1 地球旋转
ctx.rotate(
((2 * Math.PI) / 60) * time.getSeconds()
((2 * Math.PI) / 60000) * time.getMilliseconds()
);2.canvas 画箭头
代码语言：javascript复制var obj = document.getElementById("row");
var ctx = obj.getContext("2d");
ctx.beginPath();
ctx.moveTo(76, 0);
ctx.lineTo(100, 0);
ctx.lineTo(100, 40);
ctx.lineTo(120, 40);
ctx.lineTo(88, 60);
ctx.lineTo(55, 40);
ctx.lineTo(76, 40);
ctx.fill();
svg 是基于 XML 的矢量图形，canvas 是用脚本绘制的图形， svg 不会失真，canvas 会失真。
