第2章 Canvas - Baiduimages.china-pub.com/ebook3800001-3805000/3800315/ch02.pdf第2章 Canvas基本功能本章主要讲解HTML5 Canvas 的基本功能，利用Canvas 的API，展示一些基本图形的

第 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>

　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">



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.fillText("Hello World (100)",50,210);

ctx.beginPath();

//设定 font-weight为 600


ctx.fillText("Hello World (600)",50,250);

ctx.beginPath();



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.moveTo(0,100);

ctx.lineTo(250,100);

ctx.stroke();

ctx.textBaseline='hanging';



ctx.moveTo(0,150);


ctx.stroke();

ctx.textBaseline='ideographic';



ctx.moveTo(0,200);


ctx.stroke();

ctx.textBaseline='middle';



ctx.moveTo(0,250);


ctx.stroke();

ctx.textBaseline='top';



ctx.moveTo(0,300);


ctx.stroke();

</script>

运行效果如图 2-25 所示。


先准备一张图片 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>

<script type="text/javascript">



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 取得图片数据。


最后用 drawImage 函数将图片绘制到画板上。



上面的代码是通过 <img> 标签来获取的，我们也可以通过 JavaScript 的 Image 对象来获

取。具体使用方法如代码清单 2-24 所示。





img.onload = function(){


第 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 所示。




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;




}

ctx.putImageData(imgData01,10,260);

var imgData02=ctx.createImageData(100,100);






}



};

</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 进行赋值。






}

利用 putImageData 将 imgData01 画到 Canvas 画板上。


使用 createImageData 返回一个大小为 100×100 的 ImageData 对象。

var imgData02=ctx.createImageData(100,100);

对 imgData02 进行赋值。






}

利用 putImageData 将 imgData02 画到 Canvas 画板上。



Documents

第2章 Canvas - Baiduimages.china-pub.com/ebook3800001-3805000/3800315/ch02.pdf第2章 Canvas基本功能 本章主要讲解HTML5 Canvas 的基本功能，利用Canvas 的API，展示一些基本图形的

第2章 Canvas - Baiduimages.china-pub.com/ebook3800001-3805000/3800315/ch02.pdf第2章 Canvas基本功能本章主要讲解HTML5 Canvas 的基本功能，利用Canvas 的API，展示一些基本图形的