html绘制图形的关键三步,【HTML5 绘图与动画】 绘制图形

以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。

目录：

1. 矩形 2. 路径 3. 直线 4. 圆弧 5. 二次方曲线 6. 三次方曲线

1. 矩形

① 绘制 3 个嵌套的矩形

语句：

1

2

3 draw();4 functiondraw(){5 //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用

6 varcanvas=document.getElementById('canvas');7 //通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境

8 if(canvas.getContext){9 varctx=canvas.getContext('2d');10 ctx.fillRect(25,25,100,100);//fillRect(x,y,width,height) : 绘制一个填充矩形

11 ctx.clearRect(45,45,60,60);//clearRect(x,y,width,height) : 清除指定矩形区域,让清除部分完全透明

12 ctx.strokeRect(50,50,50,50);//strokeRect(x,y,width,height) : 绘制一个矩形的边框

13 }14 }15

页面表现：

2. 路径

① 绘制三角形

语句：

1

2

3 draw();4 functiondraw(){5 //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用

6 varcanvas=document.getElementById('canvas');7 //通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境

8 if(canvas.getContext){9 varctx=canvas.getContext('2d');10 ctx.beginPath();//beginPath() : 开始路径.新建一条路径,生成之后,图形绘制指令被指向到路径上生成路径.

11 ctx.moveTo(75,50);//moveTo(x,y) : 将笔触移动到指定的坐标 x 和 y 上.

12 ctx.lineTo(100,75);//绘制直线

13 ctx.lineTo(100,25);14 ctx.fill();//fill() : 填充路径.通过填充路径的内容区域生成实心的图图形

15 }16 }17

页面表现：

② 可以用 moveTo() 方法绘制一些不连续的路径。下面绘制一个笑脸图形

语句：

1

2

3 draw();4 functiondraw(){5 //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用

6 varcanvas=document.getElementById('canvas');7 //通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境

8 if(canvas.getContext){9 varctx=canvas.getContext('2d');10 ctx.beginPath();//beginPath() : 开始路径.新建一条路径,生成之后,图形绘制指令被指向到路径上生成路径.

11 ctx.arc(75,75,50,0,Math.PI*2,true);12 ctx.moveTo(110,75);13 ctx.arc(75,75,35,0,Math.PI,false);14 ctx.moveTo(65,65);15 ctx.arc(60,65,5,0,Math.PI*2,true);16 ctx.moveTo(95,65);17 ctx.arc(90,65,5,0,Math.PI*2,true);18 ctx.stroke();//stroke() :描边路径.通过填充路径的内容区域生成实心的图形

19 }20 }21

页面表现：

3. 直线

lineTo(x,y) ： 绘制直线

① 绘制 2 个三角形，一个是填充的，另一个是描边的。

语句：

1

2

3 draw();4 functiondraw(){5 //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用

6 varcanvas=document.getElementById('canvas');7 //通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境

8 if(canvas.getContext){9 varctx=canvas.getContext('2d');10 //填充三角形

11 ctx.beginPath();12 ctx.moveTo(25,25);13 ctx.lineTo(105,25);14 ctx.lineTo(25,105);15 ctx.fill();//使用填充(filled),路径自动闭合

16 //描边三角形

17 ctx.beginPath();18 ctx.moveTo(125,125);19 ctx.lineTo(125,45);20 ctx.lineTo(45,125);21 ctx.closePath();//如果不添加 closePath(),该三角形不完整

22 ctx.stroke();//使用描边(stroked)不会自动闭合路径

23 }24 }25

页面表现：

4. 圆弧

使用 arc() 方法可以绘制弧或者圆。用法：context.arc( x, y, r, sAngle, eAngle, counterlockwise );

参数说明：x:圆心的x坐标  y: 圆心的y坐标 r: 圆的半径 sAngle: 起始角。以弧度计  eAngle：结束角。以弧度计  counterlockwise: 可选参数，定义绘图方向。false为顺时针，为默认值，true为逆时针。

① 绘制12个不同的角度以及填充的圆弧。

语句：

1

2

3 draw();4 functiondraw(){5 //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用

6 varcanvas=document.getElementById('canvas');7 //通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境

8 if(canvas.getContext){9 varctx=canvas.getContext('2d');10 for(vari=0; i<4; i++){11 for(varj=0; j<3; j++){12 ctx.beginPath();13 varx= 25 +j*50;//x 坐标值

14 vary= 25 +i*50;//y 坐标值

15 varradius= 20;//圆弧半径

16 varstartAngle= 0;//开始点

17 varendAngle=Math.PI+(Math.PI*j)/2;//结束点

18 varanticlockwise=i%2 == 0 ? false:true;//顺时针或逆时针

19 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)20 if( i>1){21 ctx.fill();22 }else{23 ctx.stroke();24 }25 }26 }27 }28 }29

页面表现：

② 使用 lineTo() 和 arcTo() 方法绘制直线和曲线，然后连成圆角弧线

使用 arcTo() 方法可以绘制曲线。用法：context.arcTo(x1, y1, x2, y2, r);

参数：x1:弧的起点的x坐标   y1:弧的起点的y坐标   x2:弧的终点的x坐标   y2:弧的终点的y坐标   r:弧的半径

语句：

1

2

3 draw();4 functiondraw(){5 //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用

6 varcanvas=document.getElementById('canvas');7 //通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境

8 if(canvas.getContext){9 varctx=canvas.getContext('2d');10 ctx.beginPath();11 ctx.moveTo(20,20);//设置起点

12 ctx.lineTo(100,20);//绘制水平直线

13 ctx.arcTo(150,20,150,70,50);//绘制曲线//context.arcTo(x1,y1,x2,y2,r)

14 ctx.lineTo(150,120);//绘制垂直直线

15 ctx.stroke();//开始绘制

16 }17 }18

页面表现：

5. 二次方曲线

① 绘制一条二次方贝塞尔曲线

语句：

1

2

3 draw();4 functiondraw(){5 //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用

6 varcanvas=document.getElementById('canvas');7 //通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境

8 if(canvas.getContext){9 varctx=canvas.getContext('2d');10 //开始绘制一条二次方贝塞尔曲线,再绘制出其控制点和控制线

11 ctx.strokeStyle= "dark";12 ctx.beginPath();13 ctx.moveTo(0,200);　　//确定开始点 ( 20,20 )14ctx.quadraticCurveTo(75,50,300,200);　//控制点：(75，50) 结束点：(300,200)15 ctx.stroke();16 ctx.globalCompositeOperation="source-over";17 //绘制直线,表示曲线的控制点和控制线,控制点坐标即两直线的交点(75.50)

18 ctx.strokeStyle= "#ff00ff";19 ctx.beginPath();20 ctx.moveTo(75,50);21 ctx.lineTo(0,200);22 ctx.moveTo(75,50);23 ctx.lineTo(300,200);24 ctx.stroke();25 }26 }27

页面表现：

效果说明：

6. 三次方曲线

① 绘制一条三次方贝塞尔曲线，还绘制出两个控制点和两条控制线

语句：

varcanvas=document.getElementById('canvas');//通过 canvas 元素的 getContext() 方法获取画布上下文(context),创建 context 对象,以获取允许进行绘制的 2D 环境

if(canvas.getContext){varctx=canvas.getContext('2d');//下面开始绘制三次方贝塞尔曲线

ctx.strokeStyle= "dark";

ctx.beginPath();

ctx.moveTo(0,200);//确定开始点(0,200)

ctx.bezierCurveTo(25,50,75,50,300,200);//第一个控制点(25,50) 第二个控制点(75,50) 结束点(200,20)

ctx.stroke();

ctx.globalCompositeOperation="source-over";//下面绘制直线.用于表示上面曲线的控制点和控制线,控制点坐标为(25,50)和(75,50)

ctx.strokeStyle= "#ff00ff";

ctx.beginPath();

ctx.moveTo(25,50);

ctx.lineTo(0,200);

ctx.moveTo(75,50);

ctx.lineTo(300,200);

ctx.stroke();

}

}标签：