day01

使用canvas绘制图形需要三个步骤：

1.获取canvas对象

2.获取上下文环境对象（2D）context

3.开始绘制图形

注意事项

• canvas是一个行内块级元素，我们需要指定ID，width，height
• 默认情况下canvas的高度为300px宽度为150px
• 我们有两种方法来定义：在HTML属性中定义；在CSS样式中定义
• 在实际开发中我们一定不要在css中定义样式，而是应该在HTML属性中定义
• 因为在开发中经常要获取对象正确的宽高，用width和height获取的宽高往往是默认宽高150和300
• 当然我们可以用getComputedStyle(canv,null).width获取计算属性的宽高不过也不准确，画出的的东西是失真的
• 以后学习的所有图形的绘制都是使用的context的对象的属性和方法
• 我们使用的所有坐标系都是使用的W3C坐标系
• moveTo的含义是“将画笔移动到某一点作为开始的点”
• lineTo的含义是“定义画笔的终点”
• stroke的含义是“开始划线”
• lineTo是可以连续调用的

矩形

• cxt.strokeStyle属性设置划线的颜色
• strokeRect(x,y,width,height)方法是用于划矩形的
• fillStyle设置填充的颜色
• fillRect(x,y,width,height)是用来填充矩形的
• rect(x,y,width,height)是用来定位矩形的位置和大小的，填充需要再使用fill()方法，划线需要再使用stroke()的方法
• 清空矩形可以使用clearRect(x,y,width,height)方法清空指定区域

举个栗子，一个简单的柱状图就可以画出来了

图一.png

多边形

• 通过之前的学习我们可以利用moveTo()和lineTo()来画一些多边形和矩形，对于箭头也是事先定义好七个顶点坐标来绘制出的；

canvas绘制箭头

箭头.png

canvas绘制正多边形

-绘制多边形我们可以以圆为基础，利用sin和cos来确定多边形的顶点，将2π根据边的多少分割圆心的角度；利用cos确定y轴坐标，利用sin确定x轴坐标；

举个栗子

我们可以先封装一个函数，然后绘制坐标轴和辅助圆

多边形绘制结果.png

结果.png

绘制五角星