JavaScript-2-6：canvas

1、canvas标签：

canvas是HTML5提供的一个标签，我们可以在这个盒子区域绘画

CanvasRendderingContext2D 对象给我们提供了在canvas盒子上画图的功能

<canvas>浏览器不支持的时候，它就像个 p 标签的功能</canvas>

1）线：

设置宽高不要通过 css 设置，通过canvas 对象的属性来设置：

获取画笔的方法：

起点（没有起点的话，默认是轨迹的第一个终点）：pen.moveTo(x,y);

轨迹（上一次的终点是下一次轨迹的起点）

合并（不用写最后一条线的轨迹，直接从终点连线到起点）

轨迹的颜色（不写默认黑色）：

轨迹宽度（内外一半）：pen.lineWidth = 20;

填充颜色：pen.fillStyle = ”red“;

pen.fill();

// 只有封闭的填充才有效果，不写默认不填充，写了默认黑色

沿着轨迹绘制（只有轨迹是不行的，这一步才是真的绘制）：pen.stroke();

新轨迹起点（第一个默认有这个方法）：pen.beginPath();

2）弧线：

pen.arc( x,y,r,起始角度,结束角度,逆顺时针 ) ;

pen.stroke( );

// x，y圆心坐标 r半径 逆顺时针填布尔值（可选）

// deg = Math.PI / 180 （deg就等于1度）

3）文字：

文字的绘制不用加 pen.stroke( );

文字样式：pen.font = "30px  Verdana, Geneva, sans-serif";

// font 复合属性和 css 一样

绘制文字： pen.fillText( 文字内容，x，y);

// x，y文字起点

4）矩形：

pen.fillRect( x，y，w，h);

// x，y起点 w，j 宽高

5）清除区域：

清除： pen.fillRect( x，y，w，h);

// x，y起点 w，j 宽高

清屏： canvas.width = canvas.width ;

// 重新给画布设置宽度，整个界面就清除了，也可以达到清除的效果

6）图片：

pen.drawImage( img，x，y); //参数：除红色参数外都是可选参数

pen.drawImage( img，sx，sy，sw，sh，x，y，w，h);

sx，sy：剪切相对于（原始图片左上角开始）原始图片x，y坐标

sw，sh：剪切原始图片的宽高

x，y：剪切后的图片的x，y坐标

w，h：剪切后图片的宽高

img 图片对象，可以使标签对象。

可以自己创建var img = new Image( ); img.src = 'xxx';

绘制一个等比例缩放图片： img.width：w = img.height：h

绘制一个重叠样子的图片： for(var i=0;i<10;i++){

pen.drawImage( img,100+20*i,100+20*i )

}

通过 setInterval( ) 函数制作动画： 定时器

换姿势画图（重点）：

保存canvas画的图： toDataURL( "img/png"，1);

// 保存的图片类型 保存的图片质量( 0-1 )

画布渲染画布： pen.drawImage( canvasHide，0，0);

一个用户看不见的画布画图，画好了就把这个看不见的画布画到另一个用户看得见的画布上（提升用户体验）