状态设置 和 绘制，现有状态，在去绘制

• moveTo，把一直笔放到了 这个位置

• lineTo 滑到那个位置

• 原点的位置 是左上角 向左-> 向下  

      // canvas绘制是基于状态进行绘制的；

      //1. 定义路径context.moveTo(0,0)context.lineTo(200, 200)

      //2. 定义多个路径，使用context.beginPath() context.closePath()分割

      //3. 使用context.lineWidth context.strokeStyle context.fillStyle 设置线段的宽度，线段颜色，填充颜色

      //4. 使用 contxt.stroke()绘制线段；使用context.fill()填充颜色

11111111111111111111111111111

111111111111

Draw复习

绘制两个图形的代码

绘制三角形

context.moveTo(100,100)

context.lineTo(700,700)

//绘制颜色

context.strokeStyle="red"

//填充颜色

context.fillStyle="red"

context.fill()

context.stroke()

//开始绘制

context.beginPath()

//结束绘制

context.closePath()

使用context.beginpath和context.closePath。确定一个状态的路径，然后使用stroke进行绘制

context.lineWidth

,context.strokeStyle

context.stroke

进行线条的设定

使用context.fillStyle进行填充颜色的设定

context.fill进行颜色填充

首尾链接就是多边形

画一条直线

begin.Path()

close.Path()

beginPath和closePath用于开始和结束状态

stroke函数并不会清空状态

linewidth设置线条粗细，strokeStyle设置线条样式

向右为x轴正方向，向下为y轴正方向

canvas的绘图分为状态设置和绘制两个部分

调用context.stroke才会实际的绘制内容

 canvas的绘图是一种基于状态的绘图，先设置状态，再进行绘制

//先设置状态
context.moveTo(100,100);//线条起点
context.lineTo(300,300);//线条终点
context.linewidth = 5;//线条宽度
context.strokeStyle = '#666'//线条样式(通常指颜色)
//再进行绘制
context.stroke();//绘制线条的方法
context.fillStyle = "rgb(2,100,10)";//设置图形的填充色
context.fill();//绘制填充的图形块

在画布中，左上角为画布原点，向右向下即为正方向

当需要绘制多个图形时，只需重新调用 context.moveTo(x,y) 与context.lineTo(x,y) 即可。此时图形的线条样式等是共享的。如需单独绘制，需要在状态前后分别添加 context.beginPath() 和 context.closePath() 方法。

canvas是基于状态的绘图，先设置状态，再调用函数;

cantext.fill() 填充；

context.stroke() 描边;

context.beginPath()    context.closePath()  定义不同绘制路径

context.beginPath()与context.closePath() 闭合掉前面画的图形，使其不受后面的影响  有点类似于作用域区间的规划

canvas 填充颜色与描边

canvas绘制三角形

canvas画一条直线的代码

如何画一条直线