本文摘自PHP中文网,作者黄舟,侵删。
canvas loading...在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。
不过,图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片。因此,开发人员要特别注意,在呈现之前,应确保图片已经加载完毕。
为保证在呈现之前图片已完全加载,我们提供了回调,即仅当图像加载完成时才执行后续代码,如代码清单如下所示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script type= "text/javascript" >
function drawBeauty(beauty){
var mycv = document.getElementById( "cv" );
var myctx = mycv.getContext( "2d" );
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();
beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg" ;
if (beauty.complete){
drawBeauty(beauty);
} else {
beauty.onload = function (){
drawBeauty(beauty);
};
beauty.onerror = function (){
window.alert( '美女加载失败,请重试' );
};
};
}
if (document.all) {
window.attachEvent( 'onload' , load);
} else {
window.addEventListener( 'load' , load, false );
}
</script>
|
阅读剩余部分
相关阅读 >>
解决h5网页中用video标签无法播放mp4视频的方法
html5内联svg教程以及与canvas的区别
炫丽的倒计时效果canvas绘图与动画视频的资源推荐
vue框架是什么
canvas中普通动效与粒子动效的实现 方法介绍(代码示例)
详解html5预测取代本地app将成为可能
html5实现调用摄像头并拍照功能
html5 canvas
一定要注意常见的3种html5错误用法
详解html5 geolocation获取地理位置信息的示例代码分享
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 关于html5如何在canvas中插入图片的示例详解