drawImage()方法概述
在网页构建过程里，drawImage()这种招儿挺实用的。它能让我们把图形、画布甚至视频等统统弄进来，还能缩小、裁切它们。通过用好drawImage()，咱们完全可以把图片整得漂亮点，使页面更加有魅力！drawImage()至少有三种模式，分别是三档、五档和九档。这仨用法效果那是大不相同。
三参数形式
好，你问的这个就是最基本的三参数模式！这个，就主要用来加载图片，也能处理画板还有视频。只要告诉我你想要的图片在画板上的具体位置，它就能乖乖地在那儿出现了。而且这种模式下图片可不会被缩小或者裁掉，保证原汁原味~
context.drawImage(img,dx,dy);
五参数形式
context.drawImage(img,dx,dy,dw,dw);
这个五参数形式不只是能装入图片，还能给图片定个框框来缩小或放大它！只要设定好你想要的照片在画布上占据的位置和大小，就能够随意调整照片有多大。这种方法特别适合那些只需要搞些简单照片大小调整的情况。
九参数形式
九参数形式可不简单不仅能改变大小，还能帮你剪照片！只要告诉它原图从哪儿开始剪，目标图片要多大多小，还有在画布上的哪个位置，再加上你想要的目标图片大小，就能随心所欲地大显身手。而且特别适合那些想要细致处理并展现图片的场合~
context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
各参数含义解析
-起始剪裁 x 轴定位：告诉我你想从源图片上哪个地方开始剪裁，就是剪去的那一块图像左上角在哪儿。
-从哪儿开始剪？这是剪的时候，这块儿的左上角 y 轴坐标！
– swidth：被剪切图像的宽度。
– sheight：被剪切图像的高度。
-图像在画布里的x位置在哪儿？：说清楚目标区域左上角点在画布里的x轴坐标~
-图片放哪儿？Y轴的数值就是目标区域左上角点在画板里 Y 轴上的位置。
– width：要使用的图像的宽度。
– height：要使用的图像的高度。
加载图片示例
接下来让我用简单的例子教你如何用drawImage()方法导入图片。首先我们得有个画布，然后再将图片贴上去：
javascript
直接拿div='myCanvas'的canvas进来用。
把画布给到咱们的2D风景区，咱们就能开始画图了。
const img = new Image();
img.src ='image.jpg';
img.onload = function(){
ctx.drawImage(img,0,0);
}
看了这段代码，你就知道如何把’image.jpg’这样的图放到我叫它’myCanvas’的画布里，还能让它乖乖地呆在左上方！
结合clip()和drawImage()绘制心形相框
除了基础款，drawImage()这个功能其实还有很多花样可以玩！比如说，你把它和clip()、bezierCurveTo()这俩方法结合起来，就可以搞出个很酷的心形相框，给之前展示的那张图片再添点色彩啦：
ctx.beginPath();
ctx.moveTo(75, 40);
咱这儿用了几次贝塞尔曲线，搞定了这几个点：（75, 37）、（70, 25）和（50, 25）。
我们来画出直线，起始点是20、25，接下来是两点在同一水平线上（依然在20处），但直线的高度是变化的。从20开始，我们将画线高度设为62.5，最后仍回到同样一个20，即起点和终点都是20，只是中间的过程通过Bezier曲线平滑过渡。
JavaScript Code复制内容到剪贴板
drawImage()
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
你的浏览器居然不支持Canvas？！赶快换一个吧！！
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
var img = new Image();
img.src = "./images/20-1.jpg";
img.onload = function(){
context.drawImage(img,200,50);
}
};
画个折角，起点在20, 80，终点是40, 102和75, 120。
直接在（110，102）到（130，80）的路径上，画个抛物线连接到（130，62.5）。
我来画个弧线，起点是130，离地高度62.5厘米；然后是130，离地高度25厘米；最后是100，离地高度也是25厘米。
总之，这条路径是这样的：从（85, 25）开始，到（75, 37）和（75, 40）结束。
ctx.clip();
ctx.drawImage(img,0,0);
上边的代码帮你搞定了，搞定一颗爱心形状的相框还把图插进去。瞬间让原本平淡无奇的图片也变得好看可爱起来！
JavaScript Code复制内容到剪贴板
绘制心形相框
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
你的浏览器居然不支持Canvas？！赶快换一个吧！！
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
context.beginPath();
context.moveTo(400,260);
context.bezierCurveTo(450,220,450,300,400,315);
context.bezierCurveTo(350,300,350,220,400,260);
context.clip();
context.closePath();
var img = new Image();
img.src = "./images/20-1.jpg";
img.onload = function(){
context.drawImage(img,348,240,100,100);
}
};
drawImage()在Java.awt中应用
不仅仅是前端开发，Java里的Java.awt还有drawImage()这个好用的家伙，特别是做Java游戏界面那可是离不开它！好多素材都要靠这种方式来处理图片，所以用得溜溜的就能让你的工作省心很多！
总结与展望
通过这篇文章，我们学习了 drawImage()这个实用的画图方法。不管是做网页还是 Java 的应用程序，画图就得用它！大家得多练习，把 drawImage()融入到项目里去，让你的页面变得更加生动有趣！
小伙伴们，你们有没有在前端开发或者Java应用开发中遇到过用drawImage()方法有困难的情况？快来跟我们聊聊，互相学习进步~
。
评论0