HTML5特性 > Canvas >图像、图案和字体

一、创建图像对象

在 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)"/><br/>

纵向缩放<input type="range" min="1" max="20" onchange="Scale2(event)"/><br/>

按比例缩放<input type="range" min="1" max="20" onchange="Scale3(event)"/><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 浏览器中正确呈现

横向缩放

纵向缩放

按比例缩放

平铺

提示：

只有在 Google Chrome 浏览器中，Range 控件才能呈现出滑动条的的样子并正确工作；

在其他浏览器中，您可能只能看到四个文本框，并且无法正常工作

四、裁剪图像

图像裁剪同样是使用 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);

下图是上面的代码运行效果：