HTML边玩边学图像、图案和字体.docxVIP

　一、创建图像对象　　在 HTML5 中，Image 对象对应着一幅图片，想要获取一个图像对象，有以下几种方法：　　1)通过 document.images 集合、document.getElementsByTagName 方法或者 document.getElementById 方法来获取网页内已经存在的图片对象；　　2)用 document.getElementsByTagName 或 document.getElementById 方法来获取另外一个 Canvas 对象，将这个 Canvas 对象作为一个图像对象；　　3)最常用的方法：创建一个新的空 Image 对象，给他一个图片的超链接，代码如下：//创建一个空图像对象var img = new Image();//给图像对象一个图片超链接img.src = myImage.png; 　　4) 最后一种是通过 data: url 方式嵌入图像，这种方法很奇妙，他可以用一个很长的字符串来表示一幅图像。　　那么这个很长的字符串是怎么来的呢？他是把真正的图像文件（bmp jpg 等等）通过 Base64 编码而来，具体的编码程序网上能搜索到很多，我博客里就有一个 Python 版的。　　用这种方式的好处就是，图片资源始终内嵌在 HTML 网页文件中，缺点是数据量太大，而且图片没办法缓存，导致网页文件打开速度变慢。下面的字符串就是一幅美女图片的 Base64 编码的一小段，让大家看看是什么样子的：/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXw　　这些乱七八糟的东西就包含了美女图片的一小部分内容了，后面我们将把它绘制到 Canvas 上。　　二、绘制图像对象　　我们得到一个图像对象后，它只是在内存中，我们怎么才能将它绘制到画布上呢？上下文对象有一个绘制图像对象的方法：drawImage(image, x, y)　　简单吧？image 就是你事先准备好的图像对象，x, y 就是图像左上角放置的位置，这个方法调用后，你的图像就会出现在 Canvas 上了，下面我们来把上面的美女图像绘制出来，代码如下：canvas id=canvas1 width=250 height=300 style=background-color:black你的浏览器不支持lt;canvasgt;标签，请使用 Chrome 浏览器或者 FireFox 浏览器/canvasbr/input type=button value=显示美女 onclick=Show();/input type=button value=清空 onclick=Clear();/script type=text/javascript//美女图的 Base64 编码 IMG_SRC=data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......//省略40字节//缩小版本的美女图 IMG_SRC_SMALL=data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA...... //省略40字节function Show(){//获取画布对象 ctx = document.getElementById(canvas1).getContext(2d);//创建图像对象 img=new Image();//图像被装入后触发 img.onload=function(){ ctx.drawImage(img,0,0); }//指定图像源 img.src=IMG_SRC; } function Clear(){//清除画布 ctx = document.getElementById(canvas1).getContext(2d); ctx.clearRect(0,0,250,300); } /script注意：把绘制方法放到图像对象的 onload 事件中，是为了确保图像在完全装入后才绘制　　三、缩放图像　　同样的 imageDraw 方法，增加两个参数，就可以对图像实现缩放，如下：drawImage(image, x, y, width, height)　　width 代表你想将图像绘制成多宽，height 代表你想将图像绘制成多高，设定好后系统会自动按比例进行缩放。下面的例子我们来模仿一个常见的图像软件的小功能，通过拖动滑动条对图像进行缩放，代码如下：canvas id=canvas2 width=25