canvas教程

html5在canvas中插入图片

字号+ 作者:H5之家 来源:H5之家 2017-10-21 13:30 我要评论( )

提供html5在canvas中插入图片word文档在线阅读与免费下载,摘要:在canvas中插入图片在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修

在canvas中插入图片

在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。

不过,图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作。 浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片。因此, 开发人员要特别注意,在呈现之前,应确保图片已经加载完毕。

我们的示例将加载一张树皮纹理的图片作为树干以供canvas使用。为保证在呈现之前图片已完全加载,我们提供了回调,即仅当图像加载完成时才执行后续代码,如代码清单2-14所示。

代码清单2-14 加载图像

1. // 加载图片bark.jpg

2.

3. var bark = new Image();

4. bark.src = "bark.jpg";

5.

6. // 图片加载完成后,将其显示在canvas上

7. bark.onload = function () {

8. drawTrails();

9. }

复制代码

从上面的代码中可以看到,我们为bark.jpg图片添加了onload处理函数,以保证仅在图像加载完成时才调用主drawTrails函数。这样做可以保证后续的调用能够把图片正常显示出来,如代码清单2-15所示。

代码清单2-15 在canvas上显示图像

1. // 用背景图案填充作为树干的矩形

2.

3. context.drawImage(bark, -5, -50, 10, 50);

复制代码

在这段代码里,我们用纹理贴图替换了之前调用fillRect函数的填充来作为新的树 干。尽管替换的动作很小,但canvas上显示出来的树干更有质感。注意,在drawImage函数中,除了图片本身外,还指定了x、y、width和 height参数。这些参数会对贴图进行调整以适应预定的10×50像素树干区域。我们还可以把原图的尺寸传进来,以便在裁切区域内对图片进行更多控制。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 10 课程设计2:自定义控件

    10 课程设计2:自定义控件

    2017-08-05 15:00

  • as3 画图免费文档下载

    as3 画图免费文档下载

    2017-06-07 12:02

  • android基础绘图操作免费文档下载

    android基础绘图操作免费文档下载

    2017-06-07 12:00

  • canvas案例

    canvas案例

    2017-05-28 15:04

网友点评