第 2 章 Canvas 基本功能
本章主要讲解 HTML5 Canvas 的基本功能,利用 Canvas 的 API,展示一些基本图形的
绘制及操作方法,包括画线、画图、文字操作及图片操作等。
2.1 绘制基本图形
所谓基本图形,就是指线、矩形、圆等最简单的图形,任何复杂的图形都是由这些简单
的图形组合而成的。我们首先来了解一下这些简单图形的绘制方法。
2.1.1 画线
你可能是第一次接触 Canvas 绘图。首先,我们通过绘制一个简单的直线来学习 Canvas的功能。其代码如代码清单 2-1 所示。
代码清单 2-1<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持 HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.stroke();
</script>
</body>
</html>
运行后的效果图如图 2-1 所示。
下面来解释一下代码清单 2-1 中的代码。
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持 HTML5
</canvas>
36 第二部分 基础知识篇
3. 文字粗体效果
和 CSS 一样,我们同样可以在 Canvas 中设置文字的 font-weight 属性,来给文字设置粗
体效果。它同样可通过 font 来设置,使用方法如下 :
ctx.font='normal 30px Arial';
font-weight 的值可以是 normal(正常)、bold(粗体)、bolder(更粗)、lighter(更细),
还可以通过数字直接来设置,如下所示 :
ctx.font='300 30px Arial';
下面设置不同的 font-weight,来对比一下效果,如代码清单 2-19 所示。
代码清单 2-19<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
//设定 font-weight为 normal
ctx.font='normal 30px Arial';
ctx.fillText("Hello World (normal)",50,50);
ctx.beginPath();
//设定 font-weight为 bold
ctx.font='bold 30px Arial';
ctx.fillText("Hello World (bold)",50,90);
ctx.beginPath();
//设定 font-weight为 bolder
ctx.font='bolder 30px Arial';
ctx.fillText("Hello World (bolder)",50,130);
ctx.beginPath();
//设定 font-weight为 lighter
ctx.font='lighter 30px Arial';
ctx.fillText("Hello World (lighter)",50,170);
ctx.beginPath();
//设定 font-weight为 100
ctx.font='100 30px Arial';
ctx.fillText("Hello World (100)",50,210);
ctx.beginPath();
//设定 font-weight为 600
ctx.font='600 30px Arial';
ctx.fillText("Hello World (600)",50,250);
ctx.beginPath();
40 第二部分 基础知识篇
代码清单 2-22<script type="text/javascript">
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.textBaseline='alphabetic';
ctx.font='30px Arial';
ctx.fillText('Hello World',50,50);
ctx.moveTo(0,50);
ctx.lineTo(250,50);
ctx.stroke();
ctx.textBaseline='bottom';
ctx.font='30px Arial';
ctx.fillText('Hello World',50,100);
ctx.moveTo(0,100);
ctx.lineTo(250,100);
ctx.stroke();
ctx.textBaseline='hanging';
ctx.font='30px Arial';
ctx.fillText('Hello World',50,150);
ctx.moveTo(0,150);
ctx.lineTo(250,150);
ctx.stroke();
ctx.textBaseline='ideographic';
ctx.font='30px Arial';
ctx.fillText('Hello World',50,200);
ctx.moveTo(0,200);
ctx.lineTo(250,200);
ctx.stroke();
ctx.textBaseline='middle';
ctx.font='30px Arial';
ctx.fillText('Hello World',50,250);
ctx.moveTo(0,250);
ctx.lineTo(250,250);
ctx.stroke();
ctx.textBaseline='top';
ctx.font='30px Arial';
ctx.fillText('Hello World',50,300);
ctx.moveTo(0,300);
ctx.lineTo(250,300);
ctx.stroke();
</script>
运行效果如图 2-25 所示。
42 第二部分 基础知识篇
先准备一张图片 face.jpg,然后看代码清单 2-23。
代码清单 2-23<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
img标签 <br />
<img id="face" src="face.jpg" alt="The Face" width="240" height="240" /><br />
canvas画板 <br />
<canvas id="myCanvas" width="500" height="350">
你的浏览器不支持 HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("face");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
代码解析
首先在 html 中加入 <img> 标签。
<img id="face" src="face.jpg" alt="The Face" width="240" height="240" /><br />
然后在 Canvas 中通过 <img> 标签的 id 取得图片数据。
var img=document.getElementById("face");
最后用 drawImage 函数将图片绘制到画板上。
ctx.drawImage(img,10,10);
运行效果如图 2-26 所示。
上面的代码是通过 <img> 标签来获取的,我们也可以通过 JavaScript 的 Image 对象来获
取。具体使用方法如代码清单 2-24 所示。
代码清单 2-24<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("face");
img.onload = function(){
ctx.drawImage(img,10,10);
第 2 章 Canvas 基本功能 47
注意 代码清单 2-26 中使用了 getImageData 函数获取图片数据 , 此函数在 Google Chrome 等
浏览器中会涉及跨域问题,所以无法直接在浏览器中浏览,必须通过服务器来访问。我们在
第 1 章配置环境的时候已经安装了本地服务器,参照 1.5 节的内容,将本地的代码文件放到
本地服务器上,就可以看到测试结果了。以后凡是用到 getImageData 函数的地方,一定要使
用此方法进行测试,此处不赘述。
2.4.3 利用 createImageData 新建像素
createImageData 函数有两种函数原型,其语法分别如下所示 :
createImageData(sw, sh);
其一,返回指定大小的 imageData 对象。
createImageData(imagedata);
其二,返回与指定对象相同大小的 imageData 对象。
首先需要知道的是,通过 createImageData 返回的是一个空的 imageData 对象,必须要针
对其像素进行赋值才能显示到 Canvas 画板上。下面我们通过例子来看看这两种原型的使用
方法与区别,如代码清单 2-27 所示。
代码清单 2-27<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var image = new Image();
image.src = "face.jpg";
image.onload = function(){
ctx.drawImage(image,10,10);
var imgData=ctx.getImageData(50,50,200,200);
var imgData01=ctx.createImageData(imgData);
for (i=0; i<imgData01.width*imgData01.height*4;i+=4){
imgData01.data[i+0]=255;
imgData01.data[i+1]=0;
imgData01.data[i+2]=0;
imgData01.data[i+3]=255;
}
ctx.putImageData(imgData01,10,260);
var imgData02=ctx.createImageData(100,100);
for (i=0; i<imgData02.width*imgData02.height*4;i+=4){
imgData02.data[i+0]=255;
imgData02.data[i+1]=0;
imgData02.data[i+2]=0;
imgData02.data[i+3]=155;
}
48 第二部分 基础知识篇
ctx.putImageData(imgData02,220,260);
};
</script>
代码解析
图片数据读取完成后,首先将图片数据绘制到 Canvas 画板上。
ctx.drawImage(image,10,10);
然后用 getImageData 函数从画板上取得像素数据。
var imgData=ctx.getImageData(50,50,200,200);
使用 createImageData 返回与 imgData 相同大小的 ImageData 对象。
var imgData01=ctx.createImageData(imgData);
下面 imgData01 进行赋值。
for (i=0; i<imgData01.width*imgData01.height*4;i+=4){
imgData01.data[i+0]=255;
imgData01.data[i+1]=0;
imgData01.data[i+2]=0;
imgData01.data[i+3]=255;
}
利用 putImageData 将 imgData01 画到 Canvas 画板上。
ctx.putImageData(imgData01,10,260);
使用 createImageData 返回一个大小为 100×100 的 ImageData 对象。
var imgData02=ctx.createImageData(100,100);
对 imgData02 进行赋值。
for (i=0; i<imgData02.width*imgData02.height*4;i+=4){
imgData02.data[i+0]=255;
imgData02.data[i+1]=0;
imgData02.data[i+2]=0;
imgData02.data[i+3]=155;
}
利用 putImageData 将 imgData02 画到 Canvas 画板上。
ctx.putImageData(imgData02,220,260);
运行效果如图 2-30 所示。