HTML5边玩边学（5）：图像、图案和字体
在 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">
你的浏览器不支持 <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>
注意：把绘制方法放到图像对象的 onload 事件中，是为了确保图像在完全装入后才绘制
三、缩放图像
同样的 imageDraw 方法，增加两个参数，就可以对图像实现缩放，如下：drawImage(image, x, y, width, height)
width 代表你想将图像绘制成多宽，height 代表你想将图像绘制成多高，设定好后系统会自动按比例进行缩放。下面的例子我们来模仿一个常见的图像软件的小功能，通过拖动滑动条对图像进行缩放，代码如下：
<canvas id="canvas2" width="250" height="300" style="background-color:black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
注意：下面的 Range 控件只能在 Google Chrome 浏览器中正确呈现
横向缩放<input type="range" min="1" max="20" onchange="Scale1(event)"/& gt;<br/>
纵向缩放<input type="range" min="1" max="20" onchange="Scale2(event)"/& gt;<br/>
按比例缩放<input type="range" min="1" max="20" onchange="Scale3(event)"/& gt;<br/>
平铺<input type="range" min="1" max="10" value="1" onchange="Scale4(event)"/><br/>
<script type="text/javascript">
function Scale1(){
//计算比例
var scale=event.target.value/10
///获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
//横向缩放绘制
ctx.drawImage(img,0,0,img.width*scale,img.height);
}
//指定图像源
img.src=IMG_SRC;
}
function Scale2(){
//计算比例
var scale=event.target.value/10
///获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
//纵向缩放绘制
ctx.drawImage(img,0,0,img.width,img.height*scale);
}
//指定图像源
img.src=IMG_SRC;
}
function Scale3(){
//计算比例
var scale=event.target.value/10
///获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
//按比例缩放绘制
ctx.drawImage(img,0,0,img.width*scale,img.height*scale);
}
//指定图像源
img.src=IMG_SRC;
}
function Scale4(){
//平铺比例
var scale=event.target.value;
///获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.onload=function(){
//平铺个数
var n1=img.width/scale;
var n2=img.height/scale;
for(var i=0;i<n1;i++)
for(var j=0;j<n2;j++)
ctx.drawImage(img,i*img.width/scale,j*img.height/scale,img.width/scale,img.height/scale);
}
//指定图像源
img.src=IMG_SRC;
}
</script>
注意：下面的 Range 控件只能在 Google Chrome 浏览器中正确呈现。
四、裁剪图像
图像裁剪同样是使用 imageDraw 方法，原型如下：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，其中sx, sy 是图像上的一个坐标位置，这个坐标是裁剪的起始点，sWidth, sHeight 是裁剪的宽度和长度，有了这四个参数，我们就可以将图像上的任意区域裁剪出来了。另外，dx, dy 是画布上的一个坐标为止，裁剪出来的图像的左上角将放置在这个位置，dWidth, dHeight 是设置裁剪出来的图像绘制成多长和多宽，可以缩放，裁剪图像比较简单，就不给例子了：
五、图案
在上面的图像缩放中，我们用循环的方法实现了图像的平铺，其实还有更方便的方法，就是用图案对象填充画布，图案对象用下面的方法创建：createPattern(image,type)。其中，Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。得到图案对象后，可以将其设置给上下文对象的 fillStyle 属性，然后再填充画布，就可以看到重复填充的效果了。
下面的代码中，我们将把缩小版本的美女图用 repeat 模式，平铺到画布上：
<canvas id="canvas3" width="250" height="300" style="background-color:black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="贴图" onclick="Patterns();" />
<input type="button" value="清空" onclick="ClearPatterns();" />
<script type="text/javascript">
//美女图的缩小版本
IMG_SRC_SMALL='data:image/gif;base64,/9j /4QDfRXhpZgAASUkqAAgAAAAFABIBA......';//省略四个字节
function Patterns(){
///获取画布对象
ctx = document.getElementById("canvas3").getContext("2d");
//创建图像对象
img=new Image();
//指定图像源
img.src=IMG_SRC_SMALL;
//图像被装入后触发
img.onload=function(){
//创建图案
var ptrn = ctx.createPattern(img,'repeat');
//将图案设置为填充样式
ctx.fillStyle = ptrn;
//填充画布
ctx.fillRect(0,0,250,300);
}
}
function ClearPatterns(){
///获取画布对象
ctx = document.getElementById("canvas3").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
}
</script>
六、字体
HTML5 的没有专门的字体对象，上下文对象中有三个属性用来设置字体，两个方法来绘制字符串，他们是：
font：文字字体，同 CSS font-family 属性。
textAlign：文字水平对齐方式。可取属性值: start, end, left, right, center。默认值: start。
textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle, alphabetic, ideographic, bottom。默认值：alphabetic。
fillText 和 strokeText：用填充方式和轮廓方式绘制字符串。
下面的代码绘制两个不同设置的 Hello World 字符串：
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
//填充字符串
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
//轮廓字符串
context.strokeText('Hello world!', 0, 50);
下图是上面的代码运行效果：
