drawImage()方法概述
Canvas里的drawImage()差不多就等于你在电视上看到的图像放映机。它可以用来放进图像、画板或者视频进来，再按照需求调整大小或者切掉一部分。有了这个方法，我们就能随心所欲地操作图像，让它们在画布上亮瞎眼。不过它有3种玩法，需要3个、5个甚至9个参数，别怕，我来给你细细说说咋用。
三参数形式
用了三个参数的话，你就可以通过这个方法把图片、画布或者视频放到画布上！比如说，dx就是图像在画布上的横坐标，dy就是纵坐标。这可是最基础的用法，特别适合那些简单的图像处理场景。
五参数形式
其实，用5个参数就行了，不仅能加载图片，还能调整它的大小！想要做这个动作的话，你只需要记住这句代码：context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)。这里面，sx跟sy是你想从哪儿开始剪裁；sw和sh指的是想让剪裁后的图片有多大；然后dx和dy就是你想把剪裁好的图放在画布的哪个地方；最后的dw和dh就是你想用多大的图片来填充这个新区域。
九参数形式
在图像处理中，我们可以用九个参数（sx,sy,sw,sh,dx,dy,dw,dh）来完成更精确的缩放和裁剪。这个方法比只用五个参数的方式更强大！特别适合那些需要精细处理图像的朋友们。
各参数意义
-sx：开始剪切的x坐标位置
-sy：开始剪切的y坐标位置
-sw：被剪切图像的宽度
-sh：被剪切图像的高度
-dx：在画布上放置图像的x坐标位置
-dy：在画布上放置图像的y坐标位置
-dw：要使用的图像的宽度
-dh：要使用的图像的高度
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);
}
};
实例演示
咱们现在就来看一下如何用drawImage()这个方法画出一个爱心相框！先搞一个相框出来，然后用clip()和drawImage()还有贝塞尔曲线bezierCurveTo()画个爱心，这样的例子更能让你明白drawImage()在生活中怎么用。
Java.awt中drawImage()方法
不仅HTML5的Canvas有不少用处，Java中的drawImage()方法在绘制Java游戏界面上也挺关键的。所以，你懂的，用好这个方法就能够搞定各种状况。不论是Canvas还是java.awt，在处理美术老师给你的图片素材时，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);
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);
}
};
总结与展望
看看这个HTML5Canvas的drawable()方法，它在图像搞事上可是个牛人！不管你是要简单滴弄张图上来，还是想复杂点进行放大缩小裁剪，drawable()统统能搞定。将来web技术越来越牛逼了，drawable()肯定还会有更多新花样和用武之地，所以咱们得时刻保持学习，才能跟得上节奏。
这篇文章能帮你搞清楚HTML5的CanvasdrawImage()方法，让你在实战项目中玩转这个功能。如果还有其他问题或者想更深入地了解，记得多看看相关领域的新闻和技术文章！
评论0