canvas 画布基本操作

const canvas = document.getElementById(‘canvas’);// 2、画笔 — canvas的上下文对象const ctx = canvas.getContext(‘2d’); // 3、设置颜色 —- 调色 ctx.fillStyle = “red”; // 填充颜色的设置 ctx.strokeStyle = ‘blue’; // 轮廓（边框）颜色的设置 // 4、线条的设置 ctx.lineWidth = 10; // 线宽的设置 ctx.lineCap = ‘butt/round/square’; // 线条边缘设置— 不设置、手机加圆壳、手机加方壳 ctx.lineJoin = ‘miter/bevel/round’; // 线条相交样式— 尖尖的、平平的、圆圆的 // 5、绘制矩形 — 确定区域 ctx.rect(x, y, w, h); // ctx.fillRect(x, y, w, h) 无需单独再上色，确定区域并且直接上色 // ctx.strokeRect(x, y, w, h) // 6、绘制圆弧 // startAngle endAngle —- 用的不是角度，用的是弧度 // bool false— 顺时针 true—-逆时针 默认值为false — 可选参数 ctx.arc(x, y, r, startAngle, endAngle[, bool]) // 7、绘制线段 ctx.moveTo(x, y); // 从哪里开始画 ctx.lineTo(x1, y1); // 画到那里去 // 8、绘制贝塞尔曲线 ctx.bezierCurveTo(x0, y0, cx0, cy0, x1, y1); // 起始点、控制点、终止点 ctx.quadraticCurveTo(cx1, cy1, x2, y2); // 控制点、终止点-上一个的终止点作为它的起始点 // 9、线性渐变 var lg = ctx.createLinearGradient(x, y, w, h) // 确定渐变区域 lg.addColorStop(0,”#f00″); lg.addColorStop(1,”#fff”); ctx.fillStyle = lg; //调色 — 调的是渐变色 ctx.strokeStyle = lg; // 10、径向渐变 var rg = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) rg.addColorStop(0,”#f00″); rg.addColorStop(1,”#fff”); ctx.fillStyle = rg; //调色 — 调的是渐变色 ctx.strokeStyle = rg; // 11、图像 ctx.drawImage(img, x, y) // 图片img放到那里去 ctx.drawImage(img, x, y, w, h) // 图片img放到那里去,宽高为多少 ctx.drawImage(img, x0, y0, fw, fh, x, y, w, h) // 截取img，从哪里开始，截取多少，放到那里去，宽高为多少 // 12、开始和结束绘制 ctx.beginPath(); // 重新开始绘制 — 画完洗了画笔，重新开始绘制 ctx.closePath(); // 结束 // 13、保存和恢复状态 ctx.save(); ctx.restore(); // 14、绘制图像的先后顺序影响图像的显示 —- 图像组合 ctx.globalCompositeOperation = typeo /** source-over（默认值）:在原有图形上绘制新图形 destination-over:在原有图形下绘制新图形 source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色 destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色 source-out:只显示新图形非交集部分 destination-out:只显示原有图形非交集部分,是将交集的部分转化为透明 ——— 刮刮乐 source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色 destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色 lighter:原有图形和新图形都显示，交集部分做颜色叠加 xor:重叠部分不显示 copy:只显示新图形 */ // 填充或者绘制边框 — 上色 ctx.fill(); ctx.stroke();