canvas画图的基础:
1.替代内容,如果浏览器不支持的话<canvasid="myCanvas">替代内容</canvas>
2.画图环境
①canvas.getContext("2d")
②getContext方法会返回一个对象,这个对象给我们封装了很多的绘图方法和属性。但是他只给我们提供2d的画图环境。
3.坐标系统
Canvas坐标系是一个二维的平面。原点坐标(0,0)在Canvas画布的左上角位置上,沿着水平方向向右是X轴正方向,垂直方向向下是Y轴正方向
①rect() 创建矩形
②fillRect(x,y,width,height)绘制“被填充”的矩形
③strokeRect(x,y,width,height)绘制矩形(无填充)
线性渐变和放射性渐变
线性渐变: context.createLinearGradient(x0,y0,x1,y1)
放射性渐变:context.createRadialGradient(x0,y0,r0,x1,y1,r1);
渐变填充与重复
var grd=ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(stop,color);
stop | 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。 |
color | 在结束位置显示的 CSS 颜色值 |
路径
路径由多个或者一个直线或者曲线组成,或者是计算出来的图形,路径是canvas绘图的基础
填充当前绘图(路径) | |
绘制已定义的路径 | |
起始一条路径,或重置当前路径 | |
把路径移动到画布中的指定点,不创建线条 | |
创建从当前点回到起始点的路径 | |
添加一个新点,然后在画布中创建从该点到最后指定点的线条 |
arc 方法
arc(x,y, radius, startAngle, endAngle, anticlockwise)该方法用于创建圆和部分圆接受五个参数:
1、x,y 是圆心坐标;
2、radius 是半径;
3、startAngle是起弧度(以 x 轴为基准);
4、endAngle 是末弧度(以 x 轴为基准);
5、anticlockwise 为 true 表示逆时针,反之顺时针。