Canvas入门(三)

如果这篇文章对你有所帮助，点个赞呗！！！

变换

2D 换图上下文支持所有常见的绘制变化。
rotate(a)：围绕原点把图像旋转 a 弧度
scale(x, y)：缩放图像
translate(x, y)：移动原点

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  // 创建路径
  context.beginPath();

  // 绘制圆弧，参数分别是圆心x坐标、圆形y坐标、圆弧半径、圆弧起始点(单位：弧度)、圆弧终点(单位：弧度)、绘制方向(false为顺时针绘制，true为逆时针绘制)
  context.arc(100, 100, 50, 0, 2 * Math.PI, true);

  context.lineWidth = "8";
  context.strokeStyle = "pink";

  // 移动原点
  context.translate(100, 100);

  // 旋转
  context.rotate(Math.PI);

  // 缩放
  context.scale(0.75, 0.75);

  // 因为已经移动过原点了，所以这时候(0, 0)就是圆心
  context.moveTo(0, 0);
  context.lineTo(25, 30);

  context.stroke();
}

上面的例子中，已经把很多变化都使用上了，如果想要了解具体例子可以注释掉其他部分。

save 和 restore 的作用

save方法可以保存应用到绘图上下文的设置和变换，不保存绘图上下文的内容。后续可以通过restore方法，恢复上下文的设置和变换。save和restore的使用类似于栈，后进先出。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  context.fillStyle = "red";
  context.save();

  context.fillStyle = "blue";
  context.translate(100, 100);
  context.save();

  context.fillStyle = "purple";
  context.translate(-100, -100);
  context.fillRect(0, 0, 100, 100);

  context.restore();
  context.fillRect(0, 0, 100, 100);

  context.restore();
  context.fillRect(100, 0, 100, 100);

  context.restore();
  context.fillRect(0, 100, 100, 100);
}

分析：设 XXX 为绘图上下文的设置和变化

1. 设置填充色为红色，save保存
2. 设置填充色为蓝色，移动原点，save保存
3. 设置填充色为紫色，移动原点，画出紫色的矩形
4. restore恢复XXX，此时，原点为(100, 100)，填充色为蓝色。画出蓝色的矩形
5. restore恢复**XXX**，此时，原点为(0, 0)，填充色为红色。画出红色的矩形
6. restore已经没有保存的XXX，所以XXX不会变化

绘制图像

<img src="./avatar.png" alt="">
<canvas id="mycanvas" width="200" height="200">haha</canvas>

通过drawImage把 HTML 的 img 元素或另一个 canvas 元素绘制到当前画布中。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  // 获取图像
  const img = document.images[0];

  // 在画布的坐标出绘制图像，此时图像和原来的图像一样大，指的是原文件的大小
  // context.drawImage(img, 10, 10)

  // 传入另外两个参数，设置绘制图像的宽高
  context.drawImage(img, 10, 10, 100, 100);
}

只传3个参数，画到画布上的跟原来的图像一样大，但画布没那么大。所以会只有一部分。

传入五个参数，可以让设置图像的宽高，显示完整的图像。

去掉DOM树上的img

上面的做法是需要html中有img元素才能执行的.实际上,我们也可以通过image对象来实现。

即获取图像不再是通过document.images[0]，而是

const img = new Image();
img.src = "./avatar.png";

另外，绘制图像应该在img的load事件回调中调用。

const img = new Image();
img.src = "./avatar.png";
img.onload = () => {
  // 传入另外两个参数，设置绘制图像的宽高
  context.drawImage(img, 10, 10, 100, 100);
};

还可以接收 9 个参数，实现把原始图像的一部分绘制到画布上。
如：context.drawImage(img, 0, 10, 50, 50, 0, 100, 20, 30)，从原始图像的(0, 10)开始，50 像素宽、50 像素高，画到画布上(0, 100)开始，宽 40 像素、高 60 像素。

const mycanvas = document.getElementById("mycanvas");

// 确保浏览器支持canvas
if (mycanvas.getContext) {
  const context = mycanvas.getContext("2d");

  // 获取图像
  const img = document.images[0];

  // // 9个参数
  context.drawImage(img, 0, 10, 300, 300, 100, 100, 40, 40);
}

下载图像

操作的结果可以使用canvas.toDataURL()方法获取。

再搭配下载图片的方式就能实现下载图片。(这里用的是a标签方法)

const a = document.createElement("a");
a.href = mycanvas.toDataURL();

// 获取源图片的名字
a.download = img.src.split("/")[img.src.split("/").length - 1];

a.click();