画布：canvas

一.Canvas的API

1. getContext('2d'):获取canvas 2D绘制对象，//可选性‘webGL’:3D

   var 自定义变量名 = document.getElementById('画布的ID')//获取画布节点
   var 自定义变量名 = 画布的变量名.getContext('2d')
   

2. moveTo()：移动笔触

   ctx.moveTo(X轴，y轴)//起始点
   

3. lineTo()：确认线的终点

   ctx.lineTo(X轴，y轴)//结束点
   

4. stroke()：绘制轮廓

   ctx.stroke()//绘制轮廓
   

5. lineWidth：线的粗细

   ctX.lineWidth=5
   

6. strokeStyle：线条颜色

   ctx.strokeStyle='red'
   

7. beginPath： 路径开始

   ctx.beginPath()
   

8. closePath：路径结束

   ctx.closePath()
   

9. lineCap：线帽//butt默认//round圆角//square直角

   ctx.linCap='butt'
   ctx.linCap='round'
   ctx.linCap='square'
   

10. lineJoin：设置拐角//round圆角//miter默认直角//bevel斜角

    ctx.lineJoin='round'
    

11. rect：定义路径

    ctx.rect(x轴起点，y轴起点，矩形宽度，矩形高度)
    

12. fill：填充矩形

    ctx.fill()
    

13. fillStyle：填充颜色

    ctx.fillStyle='yellow'
    

14. strokeRect：轮廓矩形

    ctx.strokeRect(x轴起点，y轴起点，矩形宽度，矩形高度)
    

15. clearRect：清空某块区域

    ctx.clearRect(x轴起点，y轴起点，清除宽度，清除高度)
    

16. fillRect()：矩形填充

    ctx.fillRect()
    

17. arc(原点x，原点y，半径，起始弧度，结束角度，布尔值false：代表顺时针):画圆

    注释：Math.PI：180°

    ctx.arc(200,200,100,0,Math.PI*2,false)
    

18. save()：保存当前原点位置

    ctx.save()
    

19. restore()：读取上一个保存原点

    ctx.restore()
    

20. translate：移动原点的坐标

    ctx.translate(x,y)
    

21. rotate()：旋转

    ctx.rotate(Math.PI/4)
    

22. scale()：2D转换

23. fillText()：绘制文本

    cxt.fillText('文字',x轴,y轴)
    

24. fot：绘制文本的字体样式

25. drawImage()：

    var newsPic = new Image()
    newsPic.src='图片地址'
    //等待图片资源加载完毕，在绘制图片
    newsPic.onload = function(){
     cxt.drawImage(newsPic,x轴偏移,y轴偏移)//取三个值
     cxt.drawImage(newsPic,x轴偏移,y轴偏移,宽，高)//取五个值
     cxt.drawImage(newsPic,剪切x，剪切y，剪切原图宽,剪切原图高，x轴偏移,y轴偏移,显示宽度，显示高度)//九个值
    }