[HTML5边玩边学5：图像、图案和字体.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=250 height=300 style=background-color:black 你的浏览器不支持 lt;canvasgt;标签，请使用 Chro