深入了解canvas标签(3)——使用图像
Canvas相当有趣的一项功能就是可以引入图像,它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字(标准说明中并没有包含绘制文字的功能)。只要是Gecko 支持的图像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas元素也可以作为图像的来源。
引入图像
引入图像只需要简单的两步:
- 1.第一当然是来源图片,不是简单的 URL 路径,但可以是一个 JavaScript 的 Image 对象引用,又或者其它的canvas 元素。
- 2.然后用 drawImage
方法将图像插入到 canvas 中。先来看看第一步,基本上有四种可选方式:
引用页面内的图片
我们可以通过 document.images集合、document.getElementsByTagName 方法又或者document.getElementById_x 方法来获取页面内的图片(如果已知图片元素的 ID。
使用其它 canvas 元素
和引用页面内的图片类似地,用 document.getElementsByTagName 或document.getElementById_x 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的canvas。
一个常用的应用就是为另一个大的 canvas 做缩略图。
由零开始创建图像
另外,我们可以用脚本创建一个新的 Image对象,但这种方法的主要缺点是如果不希望脚本因为等待图片装置而暂停,还得需要突破预装载。
我们可以通过下面简单的方法来创建图片:
- var img = new Image(); // Create new Image object
- img.src = 'myImage.png'; // Set source path
当脚本执行后,图片开始装载。若调用 drawImage 时,图片没装载完,脚本会等待直至装载完毕。如果不希望这样,可以使用onload 事件:
- var img = new Image(); // Create new Image object
- img.onload = function(){ // execute drawImage statements here }
- img.src = 'myImage.png'; // Set source path
如果你只用到一张图片的话,这已经够了。但一旦需要不止一张图片,那就需要更加复杂的处理方法,但图片预装载策略超出本教程的范围,感兴趣的话可以参考JavaScriptImage Preloader。
通过 data: url 方式嵌入图像
我们还可以通过 data: url 方式来引用图像。Data urls 允许用一串 Base64编码的字符串的方式来定义一个图片。其优点就是图片内容即时可用,无须再到服务器兜一圈。(还有一个优点是,可以将CSS,JavaScript,HTML 和 图片全部封装在一起,迁移起来十分方便。)缺点就是图像没法缓存,图片大的话内嵌的 url数据会相当的长:
- var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
drawImage
其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。
- drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。
drawImage 示例 1
下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制负责的背景,省下不少代码。这里只用到一个 image对象,于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角(0,0) 处。
查看示例
- function draw() {
- var ctx = document.getElementById_x('canvas').getContext('2d');
- var img = new Image(); img.onload = function(){
- ctx.drawImage(img,0,0); ctx.beginPath();
- ctx.moveTo(30,96); ctx.lineTo(70,66);
- ctx.lineTo(103,76); ctx.lineTo(170,15);
- ctx.stroke(); } img.src = 'images/backdrop.png'; }
缩放
drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。
- drawImage(image, x, y, width, height)
drawImage 示例 2
在这个例子里,我会用一张图片像背景一样在 canvas中以重复平铺开来。实现起来也很简单,只需要循环铺开经过缩放的图片即可。见下面的代码,第一层 for循环是做行重复,第二层是做列重复的。图像大小被缩放至原来的三分之一,50x38px。这种方法可以用来很好的达到背景图案的效果,在下面的教程中会看到。
注意:图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果您的图像里面有文字,那么最好还是不要进行缩放,因为那样处理之后很可能图像里的文字就会变得无法辨认了。
查看示例
- function draw() {
- var ctx = document.getElementById_x('canvas').getContext('2d');
- var img = new Image();
- img.onload = function() {
- for (i = 0; i < 4; i++) {
- for (j = 0; j < 3; j++) {
- ctx.drawImage(img, j * 50, i * 38, 50, 38);
- }
- }
- }
- img.src = 'images/rhino.jpg';
- }
切片
drawImage 方法的第三个也是最后一个变种有8个新参数,用于控制做切片显示的。
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的,都是一个图像或者另一个 canvas的引用。其它8个参数最好是参照右边的图解,前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小。
切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像,那么你可以用这个方法来合成一个完整图像。例如,你想画一张图表,而手上有一个包含所有必需的文字的PNG 文件,那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。
drawImage 示例 3
在这个例子里面我用到上面已经用过的犀牛图像,不过这次我要给犀牛头做个切片特写,然后合成到一个相框里面去。相框带有阴影效果,是一个以24-bit PNG 格式保存的图像。因为 24-bit PNG 图像带有一个完整的 8-bit alpha 通道,与 GIF 和8-bit PNG 不同,我可以将它放成背景而不必担心底色的问题。
我用一个与上面用到的不同的方法来装载图像,直接将图像插入到 HTML 里面,然后通过 CSS隐藏(display:none)它。两个图像我都赋了 id ,方便后面使用。看下面的脚本,相当简单,首先对犀牛头做好切片(第一个drawImage )放在 canvas 上,然后再上面套个相框(第二个 drawImage )。
查看示例
- function draw() {
- var canvas = document.getElementById_x('canvas');
- var ctx = canvas.getContext('2d'); // Draw slice
- ctx.drawImage(document.getElementById_x('source'), 33, 71, 104, 124, 21, 20, 87, 104); // Draw frame
- ctx.drawImage(document.getElementById_x('frame'), 0, 0);
- }
示例:画廊 Art gallery example
我这一章最后的示例是弄一个小画廊。画廊由挂着几张画作的格子组成。当页面装载好之后,为每张画创建一个 canvas元素并用加上画框然后插入到画廊中去。
在我这个例子里面,所有“画”都是固定宽高的,画框也是。你可以做些改进,通过脚本用画的宽高来准确控制围绕它的画框的大小。
下面的代码应该是蛮自我解释的了。就是遍历图像对象数组,依次创建新的 canvas 元素并添加进去。可能唯一需要注意的,对于那些并不熟悉DOM 的朋友来说,是 insertBefore 方法的用法。insertBefore是父节点(单元格)的方法,用于将新节点(canvas 元素)插入到我们想要插入的节点之前。
查看示例
- function draw() { // Loop through all images
- for (i = 0; i < document.images.length; i++) {
- // Don't add a canvas for the frame image
- if (document.images[i].getAttribute('id') != 'frame') {
- // Create canvas element
- canvas = document.createElement_x('CANVAS');
- canvas.setAttribute('width', 132);
- canvas.setAttribute('height', 150); // Insert before the image
- document.images[i].parentNode.insertBefore(canvas, document.images[i]);
- ctx = canvas.getContext('2d'); // Draw image to canvas
- ctx.drawImage(document.images[i], 15, 20); // Add frame
- ctx.drawImage(document.getElementById_x('frame'), 0, 0);
- }
- }
- }
控制图像的缩放行为
Gecko 1.9.2 引入了 mozImageSmoothingEnabled 属性,值为 false时,图像不会平滑地缩放。默认是 true 。
- cx.mozImageSmoothingEnabled = false;
深入了解canvas标签(3)——使用图像相关推荐
- HTML5之Canvas标签简要学习
HTML5 提供了画布(canvas)标签,通过与Javascript结合使用,可以在网页上绘制图像.Canvas是一个矩形区域,使用Javascript可以控制其每一个像素.本文将对canvas标签 ...
- canvas 文字颜色_Canvas基本功能Canvas标签
Canvas基本功能 在所有的桌面应用程序的开发平台中几乎都有 Canvas 组件. Canvas组件已经成为绘图组件的代名词. Canvas元素本制裁上是在浏览器中提供一块儿可绘制的区域,JavaS ...
- 把canvas标签里的图像下载成本地图片文件
有些在线图片网站,进行图像处理比如去除背景后,结果图片是以html5里canvas标签的形式显示出来的,我们没有办法通过右键点击图片然后下载的方式去保存到本地. [外链图片转存失败,源站可能有防盗链机 ...
- html5两条直线,Html5新特性用canvas标签画多条直线附效果截图
下面例子为用canvas标签画多条直线 复制代码代码如下: index_three 您的浏览器不支持canvas标签. //获取Canvas对象(画布) var canvas = document.g ...
- 【前端学习笔记—canvas标签和使用canvas画哆啦A梦案例】
目录 canvas 1. canvas是H5新增标签 2.使用canvas画出矩形 (1)第一步,要新建画布 (2)第二步,要创建一支画笔 (3)第三步,用canvas画出矩形 3. 如何使用canv ...
- 在html5页面中添加canvas,HTML页面中添加Canvas标签示例
在HTML页面的 中,可以用像下面的代码来添加标签: 复制代码代码如下: Your browser does not support HTML5 Canvas. 译注:对于canvas,以下写法是不允 ...
- html5引入的新标签canvas,HTML页面中添加Canvas标签示例
怎样在html5中添加canvas标签 标签是 HTML 5 中的新标签. 定义和用法 标签定义图形,比如图表和其他图像. 标签只是图形容器,您必须使用脚本来绘制图形. 实例 通过 canvas 元素 ...
- 酒浓码浓 - canvas标签
canvas标签 canvas 画布 默认大小300*150 context是一个封装了很多绘图功能的对象 画笔 获取方法 var context = canvas.getContext(" ...
- html实现颜料效果,JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: JS canvas标签制作色相球 var canvas,ctx, ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
最新文章
- vim php 语法高亮,linux vim配置文件(语法高亮)
- Jmeter简单应用6
- 浏览器记住密码的自动填充Input问题完美解决方案
- 更高效地刷OJ——String常用方法(一)
- Asp.net禁用页面缓存的方法总结
- mysql数据库计算两列数据的和_在sql中对两列数据进行运算作为新的列操作
- 通过java实现word转PDF
- 【记录】非常实用,Python编码规范的一些建议(1)
- 人工智能、机器学习、神经网络和深度学习的发展历程(上)
- GitHub官网访问慢的解决问题
- NETDMIS5.0位置度评价案例1
- [XUPT_ACM]寒假第二次比赛题解
- UBOOT I2C读写详解(基于mini2440)
- 2015欧冠决赛--脑力劳动结硕果
- [hihoCoder] 买零食
- python考研人数数据分析统计服_2019年考研统计数据出炉:往届生考研人数占比48.23%...
- C++ OpenCV无法调用视频的问题
- 表单提交checkbox为必选
- 分享网上找到的一个中国象棋源码
- WPS将Word文档转化成PDF格式