html实例教程 图片绘画,Html5 canvas绘制一个机器人图形的实例教程

Canvas的功能强大，今天我只运用到Canvas的绘制图形功能来完成一个简单线条型机器人的绘制，在绘图的过程中我还是得复述一下用到的几个图形的基础知识，通过这个实例，你可以基本上了解到Canvas的绘图的几个常用到的基本属性了，再通过你丰富的想象融会贯通，你就可以随心所欲的画你想画的图形了，都能下面开始跟着我来一起体验Canvas的强大之处吧！

首先来看看今天要绘制图形的效果图如下：

(PS

图形是丑了点，在此只是抛砖引玉啦！)

首先我们得在html里开始定义Canvas元素，

id="canvas" width="650"

height="950">

然后我们JavaScript来完成图形的绘制

function

draw() {

var ctx

= document.getElementByIdx_x('canvas').getContext('2d');

}

我们来讲解上面的代码，

初始化是空白的，要使用脚本画图首先需要渲染上下文(rendering context)，它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图需要调用的函数。getContext() 接受一个用于描述其类型的值作为参数。上面第一行通过getElementById 方法取得canvas

对象的DOM

节点。然后通过其getContext 方法取得其画图操作上下文。这就为我们下面进行画图铺好了画布。

下面开始来绘制我们的机器人图形吧！我们首先分析机器人的图形组成，整个图形是由矩形、圆形(两个黑眼珠)、椭圆形和一个不规则路径图形(嘴巴)组成的，所以我们也得从这几个方面来一一详细的叙述。

开始之前，我们需要对canvas

的网格(grid)或者坐标空间(coordinate

space)进行探讨。有一个150像素宽， 150像素高的 canvas 对象的HTML模板。在画面上叠加上默认网格，如下图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角(坐标(0,0))。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素(坐标(x, y))。

一、下面可以开始绘制图形了，首先我从最简单的矩形开始，就是机器人的两个脚，先简单介绍下矩形

Rectangles的基础知识：

矩形有三个函数可以绘制的：

fillRect(x,y,width,height)

: 绘制填充矩形strokeRect(x,y,width,height)

: 绘制路径矩形clearRect(x,y,width,height)

: 清除矩形

上面的函数都接受四个参数，X和Y用于指定矩形左上角也就是相对于原点的位置，width和height用于指定矩形的宽和高，对照上图是很好理解的。

下面是绘制机器人两只脚的代码：

ctx.strokeRect(195,480,70,250);

ctx.strokeRect(385,480,70,250);

机器人两只脚的起始坐标分别是(195，480)

和(385，480)，他们的大小都是宽70，高250，通过两行代码就完成了脚的绘制。

二、下面我们开始用椭圆来绘制机器人的主要部分，包括头、眼睛、身体、手等，在Canvas里是没有椭圆型这个属性的，我们只能用绘制路径的方法来自定义一个函数，这样我们就可以任意的引用了，这里就涉及到了两个属性Lines(绘制线条)和

Bezier and quadratic curves(贝塞尔和二次方曲线)：

首先介绍Lines(绘制线条)的基本属性：

在这里使用lineTo 方法来画直线。lineTo 方法接受终点的坐标(x，y)作为参数。起始坐标取决于前一路径，前一路径的终点即当前路径的起点，起始坐标也可以通过 moveTo 方法来设置。

例如：

ctx.moveTo(25,25);

ctx.lintTo(105,25);

就是从坐标点(25，25)绘制一条直线到(105，25)

其次再介绍Bezier

and quadratic curves(贝塞尔和二次方曲线)的基本属性：

贝塞尔曲线可以是二次和三次方的形式，常用于绘制复杂而有规律的形状。

quadraticCurveTo(cp1x,

cp1y, x, y)bezierCurveTo(cp1x,

cp1y, cp2x, cp2y, x, y)

两行代码的区别见右图。它们都是一个起点一个终点(图中的蓝点)，但二次方贝塞尔曲线只有一个(红色)控制点点)而三次方贝塞尔曲线有两个。

参数 x 和

y 是终点坐标，cp1x

和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。

使用二次方和三次方的贝塞尔曲线是相当有挑战的，因为不像在矢量绘图软件 Adobe

Illustrator 里那样有即时的视觉反馈。因为用它来画复杂图形是比较麻烦的。但如果你有时间，并且最重要是有耐心，再复杂的图形都可以绘制出来的。

我们就是运用刚刚的两个属性来完成绘制椭圆图形的，在这里我们定义一个函数roundedRect，代码如下:

function roundedRect(ctx,x,y,width,height,radius){

ctx.beginPath();

ctx.moveTo(x,y+radius);

ctx.lineTo(x,y+height-radius);

ctx.quadraticCurveTo(x,y+height,x+radius,y+height);

ctx.lineTo(x+width-radius,y+height);

ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);

ctx.lineTo(x+width,y+radius);

ctx.quadraticCurveTo(x+width,y,x+width-radius,y);

ctx.lineTo(x+radius,y);

ctx.quadraticCurveTo(x,y,x,y+radius);

ctx.stroke();

}

我来讲解上面的代码，函数roundedRect

定义了六个参数，第一个参数是如上文，第二三个参数是椭圆型的相对于远点的坐标，第四、五个参数是椭圆的宽和高，第六个参数是椭圆的椭圆内半径，如上图；绘制图形首先从坐标(x,y+radius)如图a点开始，开始绘制直线到(x,y+height-radius)如图b点开始，再通过绘制二次方曲线到达c点，然后绘制直线到d点，再绘制二次方曲线到达e点，然后绘制直线到f点，依次类推一直回到a点闭合，一个椭圆的函数就写好了，这样我们就通过引用这个函数来画机器人的头

身体、手、眼睛等部分，代码如下：

roundedRect(ctx,250,15,150,150,30);

roundedRect(ctx,268,53,49,33,10);

roundedRect(ctx,333,53,49,33,6);

roundedRect(ctx,200,173,249,293,10);

roundedRect(ctx,145,179,45,209,10);

roundedRect(ctx,460,179,45,209,10);

上面的代码通过刚才的讲解应该很好理解了，这里就不复述了。

三、下面我们来通过圆形来完成两个眼珠的绘制

还是来介绍下Arcs(弧线)的基本属性：

arc 方法是来绘制弧线或圆。

arc(x,

y, radius, startAngle, endAngle, anticlockwise)arc(x,

y, radius, startAngle, endAngle, anticlockwise)

该方法接受五个参数： 1、，y 是圆心坐标；2、radius

是半径；3、startAngle是起弧度(以

x 轴为基准)；4、endAngle

是末弧度(以 x

轴为基准)；5、anticlockwise

为 true

表示逆时针，反之顺时针。注意：arc

方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。

绘制眼珠的代码如下：

ctx.beginPath();

ctx.arc(291,72,5,0,Math.PI*2,true);

ctx.fill();

ctx.beginPath();

ctx.arc(360,72,5,0,Math.PI*2,true);

ctx.fill();

上面的代码是一坐标(291，72)和(360，72)画两个半径为5的圆形

四、最后我们来介绍嘴巴的绘制

嘴巴的绘制运用了Lines(绘制线条)和

Bezier and quadratic curves(贝塞尔和二次方曲线)来绘制的

代码如下：

ctx.beginPath();

ctx.fillStyle

= "rgb(200,0,0)";

ctx.moveTo(351,116);

ctx.lineTo(301,116);

ctx.bezierCurveTo(311,136,335,136,351,116);

ctx.stroke();

上面的代码是指从坐标(351,116)画一条直线到(301,116)，然后用三次方曲线画到(351,116)，完成了嘴型的绘制。

机器人的所有的部分就都画好了，下面是全部代码的集合：

function

draw() {

var ctx

= document.getElementByIdx_x('canvas').getContext('2d');

ctx.beginPath();

ctx.strokeRect(195,480,70,250);

ctx.strokeRect(385,480,70,250);

roundedRect(ctx,250,15,150,150,30);

roundedRect(ctx,268,53,49,33,10);

roundedRect(ctx,333,53,49,33,6);

roundedRect(ctx,200,173,249,293,10);

roundedRect(ctx,145,179,45,209,10);

roundedRect(ctx,460,179,45,209,10);

ctx.beginPath();

ctx.fillStyle

= "rgb(200,0,0)";

ctx.moveTo(351,116);

ctx.lineTo(301,116);

ctx.bezierCurveTo(311,136,335,136,351,116);

ctx.stroke();

ctx.fillStyle

= "black";

ctx.beginPath();

ctx.arc(291,72,5,0,Math.PI*2,true);

ctx.fill();

ctx.beginPath();

ctx.arc(360,72,5,0,Math.PI*2,true);

ctx.fill();

}

function

roundedRect(ctx,x,y,width,height,radius){

ctx.beginPath();

ctx.moveTo(x,y+radius);

ctx.lineTo(x,y+height-radius);

ctx.quadraticCurveTo(x,y+height,x+radius,y+height);

ctx.lineTo(x+width-radius,y+height);

ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);

ctx.lineTo(x+width,y+radius);

ctx.quadraticCurveTo(x+width,y,x+width-radius,y);

ctx.lineTo(x+radius,y);

ctx.quadraticCurveTo(x,y,x,y+radius);

ctx.stroke();

}

好了，整个机器人就画好了，其实都是通过Canvas的几个属性来完成绘制的，同时也定义了一个函数来完成椭圆的绘制。