一：canvas
１：概述：
canvas是H5提供的新标签，其最强大的作用是进行２D图形的绘制，canvas标签仅仅作为绘制图形的载体，它本身并不具备绘制图形的能力，我们是通过canvas元素的自身的一个对象进行绘制图形的。目前提供的也有3D功能，但是只有极少数的浏览器支持，一般不用3D。canvas中的坐标系是平面的。
２：canvas绘制路径
绘制的步骤：
（１）：获取canvas元素
var canvas = document.getElementById("canvas");
（２）：获取2D渲染上下文对象（核心）
var content=canvas.getContext("2d");
（３）：绘制路径
content.beginPath();//开始路径
content.moveTo(0,0);//设置起点
content.lineTo(300,400);//设置下一个点
content.closePath();//结束路径
content.stroke();//绘制路径
３：设置canvas宽高的方式：
（１）：直接在标签内设置宽高属性
<body>
<canvas id="canvas" width="500" height="500">
您的浏览器不支持Canvas，请升级浏览器
</canvas>
</body>
（２）：通过js修改宽高
canvas.width=500;
canvas.height=500;
注意：不要用css设置宽高，容易导致图形变形
４：moveTo：创建一条新的子路径
lineTo：沿着已有的子路径继续划线，会记录下添加的最后一个点的坐标信息，不断更新子路径的新坐标
closePath：闭合路径，链接最后一个点的位置与起点的位置
lineWidth：线宽,单位是数字，表示像素,位置在描边之前都可以,默认值是1
５：canvas绘制图形有两种：
（１）：绘制路径
（２）：绘制图形
ａ：描边图形，带有stroke单词的属性或者方法
ｂ：填充图形，带有fill单词的属性或者方法
６：（１）描边样式：strokeStyle
可以接受三种类型的值：
a:颜色值：十六进制的颜色、rgb、rgba、 颜色单词；
b:用于填充图形的渐变对象
c:用于填充图形的pattern对象
（２）填充样式：fillStyle
可接受的参数与描边一样
content.strokeStyle = "blue"; //画笔的颜色
content.fillStyle=“aqua";//填充的颜色
注意：所有有关的样式一旦设置会影响其他所有的绘制图形，描边和填充的样式如果不设置颜色默认都是黑色。
７：绘制矩形的方法：
(1):strokeRect(x,y,w,h);绘制的矩形不填充颜色
(2):fillRect(x,y,w,h);绘制已经填充颜色的矩形，默认颜色是黑色
四个参数：
x,y:要绘制的矩形的左上的点相对于canvas元素的位置;
w,h:矩形的宽高;
８：绘制文字
（１）：font属性：倾斜，文字大小，字体类型（宋体，黑体，stkaiti，）
（２）：textAlign:设置文本在水平当向上的距离起点的位置
start：（默认值），文本的左下角距离起点的位置
center：文本的下边缘的中心位置距离起点的位置
end：文本的右下角距离起点的位置
（３）：fillText(txt,x,y,maxWidth)
四个参数：txt:绘制的文本
x,y:绘制的位置
maxWidth:允许文本的最大宽度（一般不设置）
注意：默认情况下，文字大小10px,默认字体类型：sans-serif，不倾斜
９：绘制圆
绘制圆的方法： arc(x,y,radius,startAngle,endAngle,counterclockwise)
参数： x,y:圆心位置
radius：半径
startAngle：开始位置
endAngle：结束位置
counterclockwise：是否逆时针绘制（true:逆时针绘制；false:顺时针绘制）
注意：开始位置和结束位置上的值是弧度
π＝180度
Math.PI 是JS提供的弧度值，等于π
ps：最后一个参数可以省略，默认为顺时针，但是建议不要省略，如果没有最后一个参数，在火狐的低版本浏览器下会报错
１０：设置阴影
（１）：shadowBlur 数值，也代表阴影的大小，值越大，越模糊，默认值为0模糊程度
content.shadowBlur = 10;
（２）：设置阴影X轴偏移量 数值，（正：向左，负：向右）
content.shadowOffsetX = 5;
（３）：设置阴影Y轴偏移量 数值，（正：向下，负：向上）
content.shadowOffsetY = 5;
（４）：设置阴影的颜色 默认是透明
content.shadowColor = “black";
１１：擦除
（１）：方式一：content.clearRect(x,y,width,height)；
参数：x,y:擦书的位置
width,height：擦除的区域大小
可以灵活控制擦除区域的大小
（２）：方式二：直接重置canvas元素的宽和高
两种方式的区别：clear方法清除指定区域的内容会保留样式，但重置宽高会清除canvas上所有的内容，不会保留之前设置的样式
１２：保存与恢复：
canvas中保存与恢复的行为类似于数据入栈出栈的过程
（１）：保存的方法：save()；
保存绘图状态，将图形保存到绘图状态栈里（先进后出），每调用一次save，就会向栈中添加新的状态
（２）：恢复的方法：restore()；
恢复绘图的状态，图形一旦出栈，栈中就不在保存该状态
注意：一般情况下save次数 >= restore次数
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
