canvas（上）

如何使用canvas

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，通过一套完整的绘图函数来动态生成图形。

在使用Canvas前，可以使用canvas.getContext来测试浏览器是否支持Canvas

注意:

• canvas 有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。
• 如果不给canvas设置width、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置的宽高。
• <canvas>元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

如何绘图

• <canvas>会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。
• 本阶段重点研究使用2D画笔进行渲染
• 语法:`var ctx = canvas.getContext(“2d”);
• 

fillRect(x,y,width,height)

• fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
• 参数:x坐标 Y坐标 宽度 高度
• 语法：ctx.fillRect (10, 10, 55, 50);
  意思是从左上角开始 (10,10)，在画布上绘制 55x50 的矩形。

ctx.fillStyle

• ctx.fillStyle="#FF0000";
• 设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

关于坐标

• canvas 是一个二维网格。
• canvas 的左上角坐标为 (0,0)
• canvas 的绘图都是基于左上角(0,0)开始的

• Canvas-路径 (直线)

• 在Canvas上绘制路径 (直线)，我们将使用以下方法：
• moveTo(x,y) 定义线条开始坐标
• lineTo(x,y) 定义线条结束坐标
• stroke() 将线画到画布上
  
  效果：

stroke()

• stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
• 可以使用strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

arc-圆形

• 在canvas中绘制圆形, 我们将使用以下方法:
  arc(x,y,r,start,stop)
• 在绘制圆形时可以使用 stroke() 或者 fill()
• canvas下篇