canvas初识笔记
HTML DOM getContext() 方法:
getContext() 方法返回一个用于在画布上绘图的环境。
Canvas.getContext(contextID)
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
fillStyle 属性
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
context.fillStyle=color|gradient|pattern;
color | 指示绘图填充色的 CSS 颜色值。默认值是 #000000。 |
gradient | 用于填充绘图的渐变对象(线性或放射性) |
pattern | 用于填充绘图的 pattern 对象 |
fillRect() 方法
fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
context.fillRect(x,y,width,height);
x | 矩形左上角的 x 坐标 |
y | 矩形左上角的 y 坐标 |
width | 矩形的宽度,以像素计 |
height | 矩形的高度,以像素计 |
rotate() 方法旋转当前的绘图。 JavaScript 语法: context.rotate(angle); 参数值 参数 描述 angle 旋转角度,以弧度计。 如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。 举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180。