HTML5的画布

目录

一、H5中的画布标签

二、获取画布

三、获取画笔

四、画直线

五、线条的路径

六、图形填充

七、绘制圆

---

一、H5中的画布标签

<canvas id="画布的名称" width="宽度" height="高度">
</canvas>

二、获取画布

var cas = document.getElementById("画布的名称")

三、获取画笔

context对象，使用该对象可以在画布上绘制图形

var ctx = cas.getContext('2d');

四、画直线

1、确定初始位置(起始点)：moveTo(x,y)

2、确定连接端点(终点)：lineTo(x,y)

3、描边：stroke() --- 在起始点和终点之间画一条线

4、设置线宽：lineWidth

5、描边的颜色：strokeStyle='颜色'

6、线条端点的形状：lineCap=’属性值’

取值有：     butt：无形状,方形的边缘 默认值

                   round：圆形端点

                   square：方形端点

五、线条的路径

1、重置路径：beginPath()

2、闭合路径：closePath()

六、图形填充

fill()

fillStyle="颜色" //设置填充色

七、绘制圆

arc(x,y,r,开始角,结束角,方向)

x和y：表示圆心坐标

r：圆半径

开始角：0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI

结束角：0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI

方向：true(逆时针)、false(顺时针)