画布：canvas
一.Canvas的API
-
getContext('2d'):获取canvas 2D绘制对象，//可选性‘webGL’:3D
var 自定义变量名 = document.getElementById('画布的ID')//获取画布节点 var 自定义变量名 = 画布的变量名.getContext('2d') -
moveTo()：移动笔触
ctx.moveTo(X轴，y轴)//起始点 -
lineTo()：确认线的终点
ctx.lineTo(X轴，y轴)//结束点 -
stroke()：绘制轮廓
ctx.stroke()//绘制轮廓 -
lineWidth：线的粗细
ctX.lineWidth=5 -
strokeStyle：线条颜色
ctx.strokeStyle='red' -
beginPath： 路径开始
ctx.beginPath() -
closePath：路径结束
ctx.closePath() -
lineCap：线帽//butt默认//round圆角//square直角
ctx.linCap='butt' ctx.linCap='round' ctx.linCap='square' -
lineJoin：设置拐角//round圆角//miter默认直角//bevel斜角
ctx.lineJoin='round' -
rect：定义路径
ctx.rect(x轴起点，y轴起点，矩形宽度，矩形高度) -
fill：填充矩形
ctx.fill() -
fillStyle：填充颜色
ctx.fillStyle='yellow' -
strokeRect：轮廓矩形
ctx.strokeRect(x轴起点，y轴起点，矩形宽度，矩形高度) -
clearRect：清空某块区域
ctx.clearRect(x轴起点，y轴起点，清除宽度，清除高度) -
fillRect()：矩形填充
ctx.fillRect() -
arc(原点x，原点y，半径，起始弧度，结束角度，布尔值false：代表顺时针):画圆
注释：Math.PI：180°
ctx.arc(200,200,100,0,Math.PI*2,false) -
save()：保存当前原点位置
ctx.save() -
restore()：读取上一个保存原点
ctx.restore() -
translate：移动原点的坐标
ctx.translate(x,y) -
rotate()：旋转
ctx.rotate(Math.PI/4) scale()：2D转换
-
fillText()：绘制文本
cxt.fillText('文字',x轴,y轴) fot：绘制文本的字体样式
-
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轴偏移,显示宽度，显示高度)//九个值 }
