drawImage()是一个很关键的方法,它可以引入图像、画布、视频,并对其进行缩放或裁剪。
一共有三种表现形式:
语法 1
JavaScript Code复制内容到剪贴板
-
context.drawImage(img,dx,dy);
语法 2
JavaScript Code复制内容到剪贴板
-
context.drawImage(img,dx,dy,dw,dw);
语法 3
JavaScript Code复制内容到剪贴板
-
context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
来看一下坐标草图:
PS: 不要在样式中定义
下面,我们加载一个图片试试。
JavaScript Code复制内容到剪贴板
-
nbsp;html>
- "zh">
-
-
"UTF-8">
-
drawImage()
-
-
body { background: url("./images/bg3.jpg") repeat; }
-
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas?!赶快换一个吧!!
-
-
-
<script> </script>
-
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);
-
}
-
};
-
-
-
运行结果:
创建相框:
这里,我们结合clip()和drawImage()以及三次贝塞尔曲线bezierCurveTo(),来为上面一个案例,加上一个心形的相框~
JavaScript Code复制内容到剪贴板
-
nbsp;html>
- "zh">
-
-
"UTF-8">
-
绘制心形相框
-
-
body { background: url("./images/bg3.jpg") repeat; }
-
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas?!赶快换一个吧!!
-
-
-
<script> </script>
-
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);
-
}
-
};
-
-
-
运行结果:
是不是美美的?好啦,至此最关键的遮罩和图像裁剪以及说完了,其实在java.awt中,drawImage()也是一个至关重要的方法。有人说制作Java游戏界面,只要会用drawImage()就可以一招打遍天下~在Canvas里也是一样的。美工提供的素材基本都是图片,这个时候drawImage()对图片的处理就很重要了。即使基本功,也是对图片最重要的处理方法。
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn