一、canvas元素的基础知识
canvas元素是html5中新增的一个重要的元素,专门用来绘制图形。在页面上放置了一个canvas元素,就相当于在页面上放置了一块“画布”,可以在其中绘画图形。但是在canvas中绘图,并不是用鼠标画图。事实上,canvas元素只是一块无色透明的区域。需要使用javascript编写在其中进行绘画的脚本。从这个角度来说,可以把他理解为类似其他开发语言中的canvas画布。
1、在页面中放置canvas元素,首先要指定的是id、width、height三个属性。
事例代码如下:
<body onload="draw('canvas1')"> <canvas id="canvas1" width="200" height="200"></canvas> <script type="text/javascript"> function draw(id){ var canvas=document.getElementById(id); var context=canvas.getContext('2d'); //不可以设为3d、4d context.fillStyle="#ddd"; context.fillRect(10,10,120,100); lineWidth=2; context.strokeStyle="blue"; //这一步边框没有出现 context.strokeRect(20,20,100,100); } </script>
运行结果:
2、用canvas元素绘制图形时,需要经过几个步骤:
(1)获取canvas元素,首先使用document.getElementById等方法获取canvas对象,因为需要调用这个对象提供的方法来绘制图形。
(2)获取上下文(context),绘制图形时,需要用到图形上下文,图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法获得图形上下文
(3)填充与绘制边框,用cavas绘制图形时,有两种方式——填充(fill)与绘制边框(stroke),填充是指填满图形的内部;绘制边框是不填满图形的内部,只绘制图形的外框。
(4)设定绘图样式,所谓绘图的样式,主要是针对图形的颜色而言,但并不限于图形的颜色。
fillStyle属性:在该属性中填入填充的颜色
strokeStyle属性:在该属性中填入边框的颜色
lineWidth属性:指定边框的宽度
fillRect属性:用来填充矩形 context.fillRect(x,y,width,height)
strokeRect属性:用来绘制矩形的边框 context.strokeRect(x,y,width,height)
clearRect属性:擦除指定的矩形区域 context.clearRect(x,y,width,heigth)
(5) 指定线宽
(6)绘制矩形
二、使用路径
1、绘制图形,要想绘制矩形以外的图形,需要使用路径。同样,绘制开始时要获取图形上下文,然后执行以下步骤:
(1)开始创建路径,使用图形上下文对象的beginPath方法,该方法不使用参数,在循环中的几次创建路径的过程中,每次开始创建时都要调用beginPath函数。
(2)创建图形的路径,使用图形上下文的arc方法,context.arc(x,y,radius,startAngle,endAngle,anticlockwise),x为绘制圆形的起点横坐标,y为起点的纵坐标,radius为圆形半径,startAngle为开始角度,endAngle为结束角度,anticlockwise为是否按逆时针方向绘制。
(3)关闭路径,context.closePath();
(4)设定绘制样式,进行图形绘制