Canvas 01

canvas H5 新增标签 很受欢迎 ！
<canvas>中间信息如果浏览器不支持就会显示<canvas>
可通过css设置样式

获取上下文环境

<canvas width="300" height="300" id="drawing">中间信息如果浏览器不支持就会显示</canvas>
var drawing=document.getElementById("drawing")
var context=getContext("2d")//3d还不完善（全文围绕这个对象）
********************************************************************888

toDataURL（） 可以到处在canvas上绘制的图像 接受一个参数 图像的MIME类型的格式 例如png格式图像

if(drawing.getContext){
var imgURL=drawing.toDataURL(image/png)
var img=document.createEment("img")
img.src=imgURL
document.body.appendChild(img)
}
默认浏览器都会将图像转为PNG格式（除非另行指定）
（如果绘制的图像来之不同域）这个方法会抛出错误

---

绘制 填充 和描边

绘制2d起始坐标（0,0,）
填充 fillStyle（） 和描边 strokeStyle（） 默认值#000000
列子
context.strokeStyle="red" //所有设置描边的都会是红色边
context.fillStyle=“blue” //所有填充的面都是蓝色
除非重新设置 JS上的颜色都可以使用因为他是基于JS的

---

矩形
唯一一个可以直接在2d上下文绘制的形状
fillRect（ ）填充的矩形 strokeRect（）描边的矩形 clearRect（）清除矩形区域
例子
填充的矩形
context.fillstyle="#ff0000"
context.fillRect(10,10,50,50) //红色矩形 （x，y ，宽，高）
context.fillstyle=rgba（0,0,0，.5）//透明矩形
描边矩形同理 吧fill改成stroke就ok

---

线条控制
context.lineWidth=3 //线条粗细
context.lineCap=butt /round/square //线条末端的样式
context.lineJoin=round/bevel /miter 两个线条交叉的方式

---

绘制路径

绘制路径开始
beginPath（）//开始一条路径
圆形 弧度
arc(x,y,半径，开始角度 （30deg），结束角度，布尔值（逆时针还是相反）)xy这个点开始 默认 右边平行的0deg开始画
arcTo（x,y,x1,y2，半径）从上一个点开始
bezierCurveTo(x,y,x2,y2,x3,y3)
画线
lineTo(x,y) 从上一点开始画到x，y这个点位置
moveTo()移动绘图的点 不会画线
quadraticCurveTo（cx,cy,x,y）
rect(x, y ,width,height)绘制矩形起始点位xy fillStyle（）绘制的是独立的形状
closePath（）会链接到路径开始的点
fill() 路径完成填充 fillStyle 的演示填充的 stroke（）同理
clip（）可以在路径上创建一个剪切区域

---

绘制文本
fillText（"文本内容",x,y,width,height） strokeText()
context.font="500 24px 微软雅黑"
context.textAlign=start end left center right
context.textbaseLine=
fillText("内容",x,y) 也可以渲染默认值 strokeText("内容",x,y)

---