当前第2页 返回上一页
准备要在画布上绘制的图像。创建一个Image对象。
在画布上绘制图像使用Canvas上下文的drawImage()方法。给出X和Y坐标以将Image对象绘制为第一个参数,将图像绘制为第二个第三个参数,由于加载Image对象的图像是异步处理的,因此必须在Image对象的图像准备好的情况下绘制图像。因此,我们对Image对象的onload事件实现绘图处理,最后处理源图像的设置
1 2 3 4 | img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'img/flower.jpg';
|
运行结果
在Web浏览器中打开HTML文件。结果如下图所示,图像是在画布上绘制的。
注意:在以下代码的情况下,不能保证在执行drawImage时读取Image对象的图像。因此,可能在显示图像时发生。绘制图像应该在Image对象的onload上实现。
1 2 3 4 5 6 7 8 9 10 11 12 13 | < script type = "text/javascript" >
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'img/flower.jpg';
context.drawImage(img, 128, 40);
}
</ script >
|
以上就是HTML5 canvas中如何绘制图像的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
HTML5中返回音频/视频是否已暂停的属性paused
HTML5的音频和视频监听器的应用代码详解
HTML5中canvas画线有毛边如何解决
极客学院HTML5新特性基础视频课件源码
canvas如何实现二维码和图片合成的代码
h5的video如何实现以及操作弹幕
借助todataurl实现将HTML5 canvas的内容保存为图片
详解HTML5幻灯片系统--h5slides
HTML5 常用标签汇总详情
使用h5做出添加禁止缩放
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5 canvas中如何绘制图像