canvas画布知识

canvas画布：创建一个canvas标签 和img类似 只有两个可选属性width(默认300px ) height(默认150px) 没有src alt属性 也可以使用css设置canvas宽高 但是如果宽高属性和初始化比例不一致 会出现缩放 除非确实需要缩放 否则永远不要使用css设置宽高属性
var oCG = oC.getContext(“2d”);//获得2d绘图工具

canvas元素起点为左上角(0,0)点 x向右增大y向下增大 所有元素相对原点定位

• oCG.fillStyle=color;设置填充颜色
• oCG.strokeStyle=color;设置描边颜色
• oCG.lineCap =“round”;端点样式butt方形，round圆角 square(多出宽的一半)
• oCG.lineJoin=“round”;边界连接点样式 miter直角 round圆角 bevel斜角
• oCG.moveTo();将画笔移动到下xy点
• oCG.lineTo();绘制直线路径 从上一个点到这个点
• oCG.lineWidth=5;描边宽度
• oCG.beginPath();开始绘制新路径 用于区分之前的
• oCG.closePath();闭合路径(将开始和结束连起来)
• oCG.stroke();描边 从上一个beginPath绘制到此命令
• oCG.stroke();填充

11.2图形绘制 xy是距离左上角坐标 width height是尺寸

• oCG.rect(x,y,width,height)
• oCG.strokeRect(x,y,width,height)直接用描边画出来
• oCG.fillRect(x,y,width,height)直接用填充画出来
• oCG.clearRect(x,y,width,height)清楚该矩形的绘制
• oCG.arc(x,y,r,起始弧度,结束弧度,是否为逆时针) xy为圆心坐标 true是逆时针
  圆心到三点钟方向是起始位置 弧度公式rad = deg*Math.pi/180