边玩边学HTML5(5):图像和字体
一、创建图像对象
在 HTML5 中，Image 对象对应着一幅图片，想要获取一个图像对象，有以下几种方法：
1) 通过 document.images 集合、document.getElementsByTagName 方法或者 document.getElementById 方法来获取网页内已经存在的图片对象；
2) 用 document.getElementsByTagName 或 document.getElementById 方法来获取另外一个 Canvas 对象，将这个 Canvas 对象作为一个图像对象；
3) 最常用的方法：创建一个新的空 Image 对象，给他一个图片的超链接，代码如下：
1 2 3 4 | //创建一个空图像对象 var img = new Image(); //给图像对象一个图片超链接 img.src = 'myImage.png'; |
4) 最后一种是通过 data: url 方式嵌入图像，这种方法很奇妙，他可以用一个很长的字符串来表示一幅图像。
那么这个很长的字符串是怎么来的呢？他是把真正的图像文件（bmp jpg 等等）通过 Base64 编码而来，具体的编码程序网上能搜索到很多。
用这种方式的好处就是，图片资源始终内嵌在 HTML 网页文件中，缺点是数据量太大，而且图片没办法缓存，导致网页文件打开速度变慢
下面的字符串就是一幅美女图片的 Base64 编码的一小段，让大家看看是什么样子的：
/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXw
这些乱七八糟的东西就包含了美女图片的一小部分内容了，后面我们将把它绘制到 Canvas 上
二、绘制图像对象
我们得到一个图像对象后，它只是在内存中，我们怎么才能将它绘制到画布上呢？ 上下文对象有一个绘制图像对象的方法：
drawImage(image, x, y)
简单吧？image 就是你事先准备好的图像对象，x, y 就是图像左上角放置的位置 ，这个方法调用后，你的图像就会出现在 Canvas 上了
下面我们来把上面的美女图像绘制出来，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <canvas id="canvas1" width="250" height="300" style="background-color:black"> 你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 </canvas><br/> <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> |
效果如下：
你还可修改部分代码再运行看看哦
欢迎留言