网站首页 > 技术文章 正文
前言
大家好，我是汪小成。最近在学习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>效果图：
说明：
我们使用半圆作为切割区域切割了图片。
猜你喜欢
- 2025-05-10 19年前司机被沉尸水库!凶手落网，竟已是身家千万的大老板
- 2025-05-10 常见跨域解决方案(一)（解决跨域的几种方法）
- 2025-05-10 生态文明建设四年巡礼 〉浦城:“三大创新”集成叠加 绿色发展再开新局
- 2025-05-10 福建推进河(湖)长制工作:当好“施工队长”建设八闽幸福河湖
- 2025-05-10 满意在三明 | 三明站附近变美啦，你发现了吗
- 2025-05-10 前端使用FileReader 读取本地文件和校验文件唯一
- 2025-05-10 这是一道“送命题”...辅导孩子写作业，45岁男子被气出脑出血
- 2025-05-10 深入理解Android NDK日志符号化（android日志在什么位置）
- 2025-05-10 中年大叔学编程-微信小程序展示金山词霸每日一句
- 2025-05-10 JavaScript精通到深入（javascript编程精解）
- 1506℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 483℃MySQL service启动脚本浅析(r12笔记第59天)
- 479℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 462℃启用MySQL查询缓存（mysql8.0查询缓存）
- 458℃服务器异常重启，导致mysql启动失败，问题解决过程记录
- 442℃「赵强老师」MySQL的闪回（赵强iso是哪个大学毕业的）
- 420℃mysql服务怎么启动和关闭?（mysql服务怎么启动和关闭）
- 416℃MySQL server PID file could not be found!失败
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)