深入了解Canvas标签(3)——使用图像

本文介绍如何在HTML5 Canvas中引入图像,包括直接使用页面内的图片、通过JavaScript创建Image对象及利用data:url方式嵌入图像。并通过示例展示了drawImage方法的基本用法。
摘要由CSDN通过智能技术生成

Canvas 相当有趣的一项功能就是可以引入图像,它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字(标准说明中并没有包含绘制文字的功能)。只要是 Gecko 支持的图像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas 元素也可以作为图像的来源。(文/鬼武者

引入图像

引入图像只需要简单的两步:
第一当然是来源图片,不是简单的 URL 路径,但可以是一个 JavaScript 的 Image 对象引用,又或者其它的 canvas 元素。
然后用 drawImage方法将图像插入到 canvas 中。先来看看第一步,基本上有四种可选方式:

引用页面内的图片
我们可以通过 document.images集合、document.getElementsByTagName 方法又或者 document.getElementById 方法来获取页面内的图片(如果已知图片元素的 ID。

使用其它 canvas 元素
和引用页面内的图片类似地,用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

一个常用的应用就是为另一个大的 canvas 做缩略图。

由零开始创建图像
另外,我们可以用脚本创建一个新的 Image 对象,但这种方法的主要缺点是如果不希望脚本因为等待图片装置而暂停,还得需要突破预装载。
我们可以通过下面简单的方法来创建图片:

  1. var img = new Image();  // Create new Image object   
  2. img.src = 'myImage.png'; // Set source path
复制代码

当脚本执行后,图片开始装载。若调用 drawImage 时,图片没装载完,脚本会等待直至装载完毕。如果不希望这样,可以使用 onload 事件:

  1. var img = new Image();  // Create new Image object   
  2. img.onload = function(){   
  3.   // execute drawImage statements here   
  4. }   
  5. img.src = 'myImage.png'; // Set source path
复制代码

如果你只用到一张图片的话,这已经够了。但一旦需要不止一张图片,那就需要更加复杂的处理方法,但图片预装载策略超出本教程的范围,感兴趣的话可以参考JavaScript Image Preloader

通过 data: url 方式嵌入图像
我们还可以通过 data: url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。其优点就是图片内容即时可用,无须再到服务器兜一圈。(还有一个优点是,可以将 CSS,JavaScript,HTML 和 图片全部封装在一起,迁移起来十分方便。)缺点就是图像没法缓存,图片大的话内嵌的 url 数据会相当的长:

  1. var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
复制代码

drawImage

一旦获得了源图对象,我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态,下面是最基础的一种。

  1. drawImage(image, x, y)
复制代码

其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。

drawImage 示例 1
下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制负责的背景,省下不少代码。这里只用到一个 image 对象,于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。
查看示例
附件: Canvas_backdrop.png

  1. function draw() {   
  2.     var ctx = document.getElementById('canvas').getContext('2d');   
  3.     var img = new Image();   
  4.     img.onload = function(){   
  5.       ctx.drawImage(img,0,0);   
  6.       ctx.beginPath();   
  7.       ctx.moveTo(30,96);   
  8.       ctx.lineTo(70,66);   
  9.       ctx.lineTo(103,76);   
  10.       ctx.lineTo(170,15);   
  11.       ctx.stroke();   
  12.     }   
  13.     img.src = 'images/backdrop.png';   
  14.   }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值