HTML5 之6 __Canvas: 插入图片, 图片加载完时执行回调

使用canvas API 内置的几个简单命令可以轻松地为canvas 添加图片内容,

应当注意:  必须等到图片完全加载后才能对其进行操作, 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将其呈现到canvas  上,将不会显示任何图片.  

以下示例将加载一张树皮纹理的图片 作为树干以供 canvas 使用.  为保证在呈现之前图片忆完全加载, 这里提供了回调方法, 即仅当图像加载完 时才执行后续代码



  Image example
   
  
运行效果图

HTML5 之6 __Canvas: 插入图片, 图片加载完时执行回调_第1张图片

可以看到, 为bark.jpg图片添加了onload 函数,以保证仅在图像加载完成时才调用 drawTrails 函数.


附件, bark.jpg 图片:

HTML5 之6 __Canvas: 插入图片, 图片加载完时执行回调_第2张图片

你可能感兴趣的:(HTML5,HTML5程序设计)