Canvas学习笔记｜图片操作

news2025/10/31 23:39:56

图片素材

本篇文章的示例采用下图进行图片操作演示。

图片原始尺寸为：640px * 640px。

绘制图片

在Canvas中，我们使用drawImage()方法绘制图片。drawImage()方法有如下3种调用方式：

1.drawImage(image, dx, dy)
2.drawImage(image, dx, dy, dw, dh)
3.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

drawImage(image, dx, dy)

语法：

ctx.drawImage(image, dx, dy);

说明：

参数image表示页面中的图片。图片有两种获取方法：（1）由JS动态创建（2）直接获取DOM中已经存在的图片。
参数dx表示图片左上角的横坐标；
参数dy表示图片左上角的纵坐标；

示例：图片由JS动态创建

示例源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>X轴方向上的缓动动画</title><script type="text/javascript" src="ball.js"></script></head><body><canvasid="canvas"width="800"height="800"style="border: 1px dashed #333333"></canvas><script> window.onload = function () {// 1、获取 Canvas 对象var canvas = document.getElementById("canvas");// 2、获取上下文环境对象var ctx = canvas.getContext("2d");// 3、开始绘制图形var image = new Image();image.src = "flower-20221202.png";image.onload = function () {ctx.drawImage(image, 0, 0);};}; </script></body>
</html>

效果图：

说明：

本示例中，我们通过JS创建了一个Image对象，然后通过设置该对象的src属性指定了图片的路径。最后，我们为Image对象添加了onload事件监听，只有当图片加载完成后再使用drawImage()方法将图片绘制在Canvas上。

注意：只有当图片完全加载后才能将图片绘制到Canvas上。如果图片还未加载完成就调用了drawImage()方法进行图片绘制操作的话，Canvas将不会显示任何图片。

示例：图片来自img元素

示例源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>图片操作简单示例</title></head><body><canvasid="canvas"width="800"height="800"style="border: 1px dashed #333333"></canvas><img src="flower-20221202.png" id="pic" style="display: none" /><script> window.onload = function () {// 1、获取 Canvas 对象var canvas = document.getElementById("canvas");// 2、获取上下文环境对象var ctx = canvas.getContext("2d");// 3、开始绘制图形var image = document.getElementById("pic");ctx.drawImage(image, 0, 0);}; </script></body>
</html>

说明：

本示例中的图片来自于HTML的img元素。这种方式的优点在于在JS执行时图片已经加载完成，不需要使用`image.onload = function () {}'。

drawImage(image, dx, dy, dw, dh)

语法：

ctx.drawImage(image, dx, dy, dw, dh);

说明：

参数image、dx、dy跟drawImage(image, dx, dy)参数含义一样。

参数dw为图片宽度；参数dh为图片高度。

通过这种方式绘制图片可以先将图片进行缩放，然后再绘制到Canvas中。

示例：裁判图片示例

示例源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>图片操作简单示例</title></head><body><canvasid="canvas"width="400"height="400"style="border: 1px dashed #333333"></canvas><img src="flower-20221202.png" id="pic" style="display: none" /><script> window.onload = function () {// 1、获取 Canvas 对象var canvas = document.getElementById("canvas");// 2、获取上下文环境对象var ctx = canvas.getContext("2d");// 3、开始绘制图形var image = document.getElementById("pic");ctx.drawImage(image, 0, 0, 320, 320);}; </script></body>
</html>

效果图：

说明：

可以看到，图片原始大小为640px * 640px，我们使用drawImage(image, dx, dy, dw, dh)将图片的尺寸缩放到320px * 320px，然后再绘制到Canvas上。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

语法：

ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

说明：

参数image、dx、dy、dw、dh表示目标图的横坐标、纵坐标、宽度、高度。

参数sx、sy、sw、sh表示源图需要截取的范围。sx表示被截取部分的横坐标，sy表示被截取部分的纵坐标，sw表示被截取部分的宽度，sh表示被截取部分的高度。

示例：裁剪图片示例

示例源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>裁减图片示例</title></head><body><canvasid="canvas"width="800"height="800"style="border: 1px dashed #333333"></canvas><img src="flower-20221202.png" id="pic" style="display: none" /><script> window.onload = function () {// 1、获取 Canvas 对象var canvas = document.getElementById("canvas");// 2、获取上下文环境对象var ctx = canvas.getContext("2d");// 3、开始绘制图形var image = document.getElementById("pic");ctx.drawImage(image, 200, 200, 300, 300, 0, 0, 300, 300);}; </script><style> * {margin:0;padding:0;}body {display: flex;background: black;align-items: center;justify-content: center;} </style></body>
</html>

效果图：

说明：

图片裁剪说明如下图：

我们将左侧图片中红色框中的部分绘制到了Canvas (0, 0)位置处。

平铺图片

在Canvas中，我们使用createPattern()方法定义图片的平铺方式。

语法：

var pattern = ctx.createPattern(image, type);
ctx.fillStyle = pattern;
ctx.fillRect();

示例：

参数image表示被平铺的图片。

参数type表示平铺的方式，type属性取值如下表：

属性值	说明
repeat	默认值，在水平方向和垂直方向同时平铺
repeat-x	在水平方向平铺
repeat-y	在垂直方向同时平铺
no-repeat	只显示一次，不平铺

平铺图片示例

示例源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>图片操作简单示例</title></head><body><canvasid="canvas"width="400"height="400"style="border: 1px dashed #333333"></canvas><img src="vip.svg" id="pic" style="display: none;" /><script> window.onload = function () {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var image = document.getElementById("pic");var pattern = ctx.createPattern(image, 'repeat-x');ctx.fillStyle = pattern;ctx.fillRect(0, 0, 400, 400);}; </script></body>
</html>

效果图：

切割图片

以Canvas中，我们使用clip()方法切割图片。

语法：

ctx.clip();

说明：

使用clip()方法切割图片的步骤：

(1) 绘制基本图形； (2) 使用clip()方法； (3) 绘制图片。

示例：切割图片示例

示例源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>图片操作简单示例</title></head><body><canvasid="canvas"width="800"height="800"style="border: 1px dashed #333333"></canvas><img src="flower-20221202.png" id="pic" style="display: none" /><script> window.onload = function () {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");// 第一步：绘制基本图片ctx.beginPath();ctx.arc(400, 400, 320, 0, Math.PI, true);ctx.closePath();ctx.stroke();// 第二步：使用clip()方法ctx.clip();// 第三步，绘制图片var image = document.getElementById("pic");ctx.drawImage(image, 80, 80, 640, 640);}; </script></body>
</html>

效果图：