前情提要

接续一下之前对Canvas的探索。本篇分享一下对图像操作的阅读和研究。

日常开发中，时常遇到对图像的处理的场景。精美的图像做为背景或者场景，相对会吸引人。

Canvas图像API十分强大。可以通过Canvas图像API加载图像数据，进行裁剪、贴图，也可以实现动态的图像合成。

来唠唠Canvas图像API吧。

Canvas图像

定义图像

Image()可以帮助创建一个新的 HTMLImageElement 对象。

// 定义图像
let img = new Image();
// 设置图像的地址
img.src = 'https://p3-passport.byteimg.com/img/user-avatar/c6c1a335a3b48adc43e011dd21bfdc60~100x100.awebp';
// 将图片添加到body元素上
document.body.appendChild(img); 

效果

见证…毫不意外的一张图片。

drawImage()

Canvas提供的drawImage()方法可以将图像数据直接显示到画布上。

划个重点，Canvas提供的这个方法基础、强大且实用，后面很多对图像的操作，都需要借助这个方法完成。

参数

参数名	描述
Image	Image对象，画布的图像源。
dx	画布上图像左上角X轴坐标。
dy	画布上图像左上角Y轴坐标。
dw	画布上绘制图像的矩形部分的宽度。
dh	画布上绘制图像的矩形部分的高度。
sx	画布上开始复制源图像的’源位置’的X轴坐标
sy	画布上开始复制源图像的’源位置’的Y轴坐标
sw	图像的矩形（裁剪）选择框的宽度。
sh	图像的矩形（裁剪）选择框的高度。

实例：图像重叠展示

重叠效果的实现主要是通过使用drawImage()方法，为多个图像设置其在画布上X轴和Y轴坐标的不同值来实现的。

img.addEventListener('load', imghLoadFunc, false);
function imghLoadFunc() {ctx.drawImage(img, 0, 0);ctx.drawImage(img, 30, 30);ctx.drawImage(img, 60, 60);
} 

效果

这个叠加效果挺帅气的，有这手艺不摊煎饼可惜了。

实例：调整图像大小

dw和dh两个参数可以帮助调整图像的尺寸大小，dx和dy可以帮助调整图像在画布上的位置。

img.addEventListener('load', imghLoadFunc, false);
function imghLoadFunc() {ctx.drawImage(img, 0, 0);ctx.drawImage(img, 0, 80, 30, 80);ctx.drawImage(img, 30, 80, 70, 80);
} 

效果

这不是传说中的拼图功能么。原来我也可以实现，这个相当实用，以后可以整点花活了。

实例：图像裁剪

借助sx和sy参数开始复制源图像的位置，sw和sh参数确定最终复制图像的矩形的大小。

img.addEventListener('load', imghLoadFunc, false);
function imghLoadFunc() {ctx.drawImage(img, 10, 10, 80, 60, 30, 30, 60, 60);
} 

效果

图像裁剪的使用场景，最常见的是头像裁剪。

未完待续

今天对Canvas图像功能的梳理就到这里，下篇要开启进阶了。

我喜欢创作，每一幅作品都是我将想象用一只叫做“代码”的画笔，绘制而成。

当我寻找新的技术的时候，不是创意枯竭，而是我需要新的色彩。

而这个循序渐进的学习过程，虽然缓慢，但是积少成多、聚沙成塔。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取