canvas的一些基础画图功能还是比较容易懂的,只是有些功能初次接触的话比较难以理解,需要自己仔细琢磨。我把这些功能以及自己学习过程遇到的问题写下来希望能帮到大家。
(一)canvas介绍
canvas是H5的的新功能,本身没有画图的功能,相当于一块画板,所有的绘图工作在画板上完成。画图的工作在js内部完成。
画板的建立
这里要注意的是canvas画板建立在body中,其宽高一定要写在元素内部。其属性可以在head内建立一个style。
在script中图中的canvas和cts都是必须引入的变量,是一种固定写法模式,后者代表在平面上绘制图形。
画板的坐标
需要牢记两条规则:1、画板默认的坐标原点在画板的左上角(坐标远点是可以通过一定的方法移动的,后面会讲)
2、X轴向右,Y轴向下为正方向。
(二)绘制四边形
绘制四边有两种方法,其中一种是独有方法,我先介绍这种特殊的方法。
- fillRect() 通过填充填充方式绘制正方形
- strokeRect() 通过描边方式,绘制正方形
- clearRe