学习HTML5的Canvas

<canvas> 标签用于，通过脚本（JavaScript）绘制图像。 <canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 必须使用脚本来完成实际的绘图任务，位图（像素图）放大后失真；

绘图步骤：

1.编写html

<canvas id="canvas" width="300" height="300"></canvas>

2.用脚本获取canvas；

var canvas = document.getElementById('tutorial');

3.获取渲染上下文来绘制和处理要展示的内容（获取画笔）

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

画笔样式：都需要用画笔去调用

• strokeStyle 设置画笔的颜色

• fillStyle:设置填充颜色

  ctx.strokeStyle = '#f00';

• lineWidth 修改画笔的粗细 不要加单位

• stroke() 对路径进行描边

• fill()对路径填充

• clearRect(x,y,w,h)清除画板，x y：起始点，w h从起始点开始清除的大小（宽高）

• beginPath（）从新定义起点；

画线：    

• moveTo(x,y) 线条的起点

• lineTo(x,y) 线条的终点

• closePath() 闭合当前路径

线端样式：lineCap 

• butt 默认样式

• aquare 加上小方块

• round 圆化

两线相交时的样式：lineJoin

• butt 默认样式

• bevel

• round 圆化

画矩形：rect(x,y,w,h)，fillRect()、strokeRect( );

• x,y:绘制矩形的起点

• w,h:矩形的宽高

阴影效果 应用于所有的图像（文本，图片）

• shadowColor 阴影颜色

• shadowBlur 阴影模糊大小

• shadowOffsetX x轴方向偏移量

• shadowOffsetY y轴方向偏移量

画圆：arc(x,y,r,起始弧度,结束弧度,方向(0,1))

圆角矩形

• arcTo(x1,y1,x2,y2,deg) 确定弧度方向，必须搭配画线使用

  • deg:圆角的弧度大小

 虚线：setLineDash（数组）；例如（[20,5]）实现长度为20，间隙为5；

lineDashoffset=num;设置起始偏移量

绘制文本

• strokeText(text,x,y);

• fillText(text,x,y);

• 文本基线：textBaseLine 一般设置为top/hanging;

• 文本对齐：textAlign；start、end、left、right、center

• 文本方向：direction；ltr、rtl、inherit

画布的旋转平移和缩放

• 旋转rotate(deg);旋转坐标轴，顺时针，弧度单位

• 平移translate(x,y);移动canvas的原点到指定位置

• 缩放scale(x,y)，增减图形在画布中的像素数目，放大或缩小

保存save和恢复restore

• save() 保存当前画布的属性的状态，存入栈中

• restore() 从栈中出栈，将画布的状态进行恢复

绘制图片drawImage();

        1、创建一个img元素。var img =new Image（）；img可以是来自页面的<img>标签

        2、设置图片源地址；img.src="..."

        3、等待图片加载完成后渲染；  

img.onload=function(){
    ctx.drawImage(img,0,0)
}

drawImage(img,x,y,w,h);图片画入的大小，从img的x,y点开始w,h大小，画入画布中

drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)；sx,sy,sw,sh图片源的切片位置与大小；dx,dy,dw,dh显示在画布中的位置与大小；

保存画布上矩形像素数据：getImageData（x1,y1,x2,y2）

将图像数据放回画布：putImageData(imgData,x1,y1)