theme: orange
highlight: idea
本文正在参加「金石计划 . 瓜分6万现金大奖」
前言
大家好，我是汪小成。最近在学习Canvas。这篇文章是我学习Canvas图片操作时记的笔记，欢迎大家审阅。
图片素材
本篇文章的示例采用下图进行图片操作演示。
图片原始尺寸为：640px * 640px。
绘制图片
在Canvas中，我们使用drawImage()方法绘制图片。drawImage()方法有如下3种调用方式：
drawImage(image, dx, dy)drawImage(image, dx, dy, dw, dh)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>
<canvas
id="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>
<canvas
id="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>
<canvas
id="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>
<canvas
id="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>
<canvas
id="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>
<canvas
id="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>
效果图：
说明：
我们使用半圆作为切割区域切割了图片。
暂无评论内容