HTML5 学习总结（四）canvas绘图 WebGL SVG(2)_H5之家 - 中国HTML5教程资源分享第一站

示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>路径与closePath，beginPath,fill</title> </head> <body> <canvas id='canvas1' width='600' height='600'></canvas> <script type='text/javascript'> //获得画布元素 var canvas1 = document.getElementById('canvas1'); //获得2维绘图的上下文 var ctx = canvas1.getContext('2d'); //设置线宽 ctx.lineWidth = 10; //设置线的颜色 ctx.strokeStyle = 'blue'; ctx.moveTo(0,0); //移动画笔到0,0点 ctx.lineTo(300,300); //画线到300,300的位置 ctx.stroke(); //执行描边 ctx.beginPath(); //清空子路径，一般用于开始路径的创建 ctx.strokeStyle = 'red'; ctx.moveTo(300,300); ctx.lineTo(0,595); //画线到0,300的位置 ctx.lineTo(595,595); //画线到右下角 ctx.closePath(); //闭合 //ctx.stroke(); //执行描边 ctx.fillStyle='lightgreen'; //设置填充颜色 ctx.fill(); //执行填充 </script> </body> </html>

运行效果：

练习：试着完成一个象棋或围棋棋盘。

1.3、绘制矩形

context.strokeRect(x,y,width,height)
以x,y为左上角，绘制宽度为width,高度为height的矩形。

context.fillRect(x,y,width,height)
以x,y为左上角，填充宽度为width,高度为height的矩形。

context.clearRect(x,y,width,height)
清除以x,y为左上角，宽度为width,高度为height的矩形区域。

示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>绘制矩形</title> </head> <body> <canvas id='canvas1' width='600' height='600'></canvas> <script type='text/javascript'> //获得画布元素 var canvas1 = document.getElementById('canvas1'); //获得2维绘图的上下文 var ctx = canvas1.getContext('2d'); //设置线宽 ctx.lineWidth = 10; //设置线的颜色 ctx.strokeStyle ='dodgerblue'; //画一个空心的矩形， ctx.strokeRect(0,0,600,600); //画一个实心矩形 ctx.fillStyle='aquamarine'; ctx.fillRect(200,200,200,200); //清除指定的矩形区域 ctx.clearRect(250,250,100,100); </script> </body> </html>

运行效果：

1.4、绘制圆弧

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

arc方法用来绘制一段圆弧路径，以(x,y)圆心位置radius为半径、startAngle为起始弧度、endAngle为终止弧度来，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，如果为 true 就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。

示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>绘制圆弧</title> </head> <body> <canvas id='canvas1' width='600' height='600'></canvas> <script type='text/javascript'> //获得画布元素 var canvas1 = document.getElementById('canvas1'); //获得2维绘图的上下文 var ctx = canvas1.getContext('2d'); //设置线宽 ctx.lineWidth = 10; //设置线的颜色 ctx.strokeStyle ='dodgerblue'; //画一段圆弧,300,300是圆心，200是半径，0是超始角度，Math.PI是结束角度,是否逆时钟 ctx.arc(300,300,200,0,Math.PI,false); //闭合 ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle='aquamarine'; ctx.arc(300,300,100,0,Math.PI*2,false); ctx.fill(); </script> </body> </html>

运行效果：

练习：

a、模拟钟表的时，分，秒

b、模拟水波，一个黑色的屏幕，多个从中心随机产生彩色的圈不断的放大，接触到屏幕结束。

1.5、绘制图像

context.drawImage(image,x,y)

把image图像绘制到画布上x,y坐标位置。

context.drawImage(image,x,y,w,h)

把image图像绘制到画布上x,y坐标位置，图像的宽度是w,高度是h。

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
截取image图像以sx,sy为左上角坐标，宽度为sw,高度为sh的一块矩形区域绘制到画布上以dx,dy坐标位置，图像宽度是dw,高度是dh。
其中image可以是htmlImageElement元素，htmlcanvasElement元素，htmlVideoElement元素

示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>绘制图像</title> </head> <body> <canvas id='canvas1' width='600' height='600'></canvas> <img src='img/apple.png' id='apple' hidden='hidden' /> <script type='text/javascript'> //必须当页面中的图片资源加载成功 window.onload = function() { //获得画布元素 var canvas1 = document.getElementById('canvas1'); //获得2维绘图的上下文 var ctx = canvas1.getContext('2d'); //设置线宽 ctx.lineWidth = 10; //设置线的颜色 ctx.strokeStyle = 'dodgerblue'; ctx.moveTo(0,0); ctx.strokeRect(0,0,600,600); //图片 var apple = document.getElementById('apple'); //将图像绘制到画布的，图片的左上角 ctx.drawImage(apple, 300-52, 300-63); } </script> </body> </html>

运行效果：

1.6、绘制文字

context.fillText(text,x,y,[maxWidth])

在canvas上填充文字，text表示需要绘制的文字，x,y分别表示绘制在canvas上的横，纵坐标，最后一个参数可选，表示显示文字的最大宽度，防止文字显示溢出。

context.strokeText(text,x,y,[maxWidth])

在canvas上描边文字，参数的意义同fillText
使用context.font属性设置字体
context.font='italic bolder 48px 黑体';