canvas画布的使用

canvas画布

**上一篇使用画布制作了一个变化的气泡，这篇写一下画布怎样使用
1.HTML5的canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，可以控制其每一像素。

2.画布默认大小是300*150 不要用css去设置宽高，会等比例缩放。

<canvas id="myCanvas" width="200" height="100">请升级您的浏览器（不识别的浏览器看到的内容）</canvas>

3.通过JS使用canvas之前，需要先设置它的绘图环境:

var cav=canvas.getContext('2d');

4.首先绘制一个方块

1.fillRect(L,T,W,H)填充一个方块，L,T表示位置，W,H表示宽高。
2.strokeRect(L,T,W,H)绘制方块（不填充，只有外边线）L,T表示位置，W,H表示宽高。
PS：画布能精确到每个像素
cav.strokeRect(50,120,100,100); 外边线为2px粗
cav.strokeRect(200.5,120.5,100,100); 外边线为1px粗

5.设置样式

1.fliiStyle 设置填充的颜色
2.ftrokeStyle 设置线条的颜色
3.lineWidth 设置线条的宽度（粗细）

6.设置线条连接点样式

1.lineJoin 取值： miter/round/bevel
默认直角/圆角/斜角

7.绘制路径

1.beginPath 开始绘制路径标记
2.closePath 结束绘制路径标记，连接开始点与结束点
3.moveTo 移动到绘制的新目标点
4.lineTo 新的目标点
5.stroke 画线，默认黑色
6.fill 填充，默认黑色
7.rect 矩形区域
8.clearRect 删除一个矩形区域
9.save 保存路径
10.restore 恢复上一次的保存路径

8.接着绘制圆

1.arc(x,y,半径,起始弧度,结束弧度,旋转方向)
x,y 圆心的位置
弧度与角度的关系：弧度=角度*Math.PI/180
旋转方向：顺时针（默认：false） 逆时针（true）;

9.绘制曲线

1.arcTo(x1,y1,x2,y2,r)
x1,y1 开始点的位置
x2,y2 结束点的位置
r 曲线半径
2.quadraticCurveTo(x1,y1,x2,y2) 贝塞尔曲线
x1,y1 第一组控制点的位置
x2,y2 结束点的位置
3.bezierCurveTo(x1,y1,x2,y2,x3,y3) 贝塞尔曲线
x1,y1 第一组控制点的位置
x2,y2 第二组控制点的位置
x3,y3 结束点坐标

10.变形

translate 偏移，从起始点为基准点，移动当前坐标的位置
rotate 旋转，参数为弧度
scale 缩放，（x轴和y轴的方向）

11.插入图片

1.创建图片实例 var img=new Image();
2.等图片加载完，在执行canvas操作
3.设置图片路径
4.通过canvas绘制
eg：var img = new Image();
img.onload=function(){
draw(this);
};
img.src=’../image/01.gif’;
function draw(obj){
cav.drawImage(obj,200,200,100,100)
};
参数解释： drawImage(obj,x,y,w,h)、img对象、x,y图片起始坐标、w,h图片的宽高

12.插入背景

createPattren(img,平铺方式)
等图片加载完之后在操作
平铺方式：repeat/repeat-x/repeat-y/no-repeat;
eg: var img = new Image();
img.onload=function(){
draw(this);
}
img.src=’../image/01.gif’;
function draw(obj){
var bg=cav.createPattern(obj,’repeat’);
cav.fillStyle=bg;
cav.fillRect(0,0,500,500);
}

13.渐变

1.线性渐变
createLInearGradient(x1,y1,x2,y2)
第一组参数起始点坐标，第二组参数结束点坐标
eg: var gradient=cav.createLinearGradient(100,100,300,300);
gradient.addColorStop(0,’red’);
gradient.addColorStop(0.3,’blue’);
gradient.addColorStop(0.7,’yellow’);
gradient.addColorStop(1,’pink’);
cav.fillStyle=gradient;
cav.fillRect(100,100,500,500);
2.径向渐变
createRadialGradient(x1,y1,r1,x2,y2,r2)
参数：第一个圆的坐标和半径；第二个圆的坐标和半径
eg: var gradient=cav.createRadialGradient(300,300,50,300,300,300);
gradient.addColorStop(0,’red’);
gradient.addColorStop(0.3,’blue’);
gradient.addColorStop(0.7,’yellow’);
gradient.addColorStop(1,’pink’);
cav.fillStyle=gradient;
cav.fillRect(0,0,600,600);

14.文字

strokeText(txt,x,y) 文字边框
fillText(txt,x,y) 文字填充
font 文字大小 “60px impact”
textBaseline 文字基准线，默认在下
取值：top/ middle/bottom

15.阴影

shadowOffsetX 轴偏移，x轴偏移
shadowOffsetY 轴偏移，y轴偏移
shadowBlur 模糊距离
sgadowColor 模糊颜色
eg:
cav.shadowOffsetX=10;
cav.shadowOffsetY=10;
cav.shadowBlur=5;
cav.sgadowColor=’red;
cav.fillRect(0,0,200,200);

16.画布导出为图片toDataURL();

var img=document.getElementById('img');
                img.src=canvas.toDataURL();

**画布的一些使用我的总结也就这么多，还有什么缺陷的地方，可以评论给我，我很喜欢谈论学习。