H5 canvas

canvas基本标签

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #aaa">< /canvas>
宽高写在内部跟样式有区别的（样式设置-画出的图形宽高改变，内部设置-画出的图形宽高不变）
var cvs = document.getElementById("myCanvas");
IE 6 7 8不支持 <canvas>标签

每个画布都必须要有一个context（上下文）的定义，如下面代码所示。就目前的情况来说，官方规范只承认一个2D环境：
var ctx = cvs.getContext("2d");

绘制

• ctx.beginPath():开始一个路径。

• ctx.moveTo(x,y):路径移到画布中的指定点，即起点。

• ctx.lineTo(x,y):添加一个新点，画线。

• ctx.closePath()：关闭绘制路径.

• ctx.fillStyle:用来设置填充颜色。

• ctx.fill()：填充已定义好的路径。

• ctx.lineWidth：画线的宽度。

• ctx.strokeStyle:用来设置描边颜色。

• ctx.stroke():绘制已定义好的路径。

    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(300,100);
    ctx.lineTo(100,200);
    ctx.closePath();
    ctx.strokeStyle = '#fc0';
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.rect(350, 100, 200, 100);
    ctx.stroke();
  

• 矩形的绘制 rect(x,y,w,h)
  x,y为起始坐标，w、h为矩形的宽、高

  ctx.fillRect(x,y,w,h)及 ctx.strokeRect(x,y,w,h)

• 圆形的绘制 arc(x,y,r,sa,ea,true/false)
  x,y为圆心坐标，r为半径，sa、ea分别为起始角度和结束角度，true是逆时针画圆，false是顺时针画圆；360度角即2PI弧度，1度就是2PI/360=PI/180弧度，90度就是2PI/360*90=PI/2弧度

• 绘制文字
  方法：
  fillText(text,x,y,maxWidth):填充绘制
  text表示文字 x,y为坐标
  maxWidth可选，为文字最大宽度，防止文字溢出

  strokeText(text,x,y,maxWidth):描边绘制
  text表示文字 x,y为坐标
  maxWidth可选，为文字最大宽度，防止文字溢出。

  常用属性：
  font文本内容的当前字体属性
  示例：ctx.font = "bold 60px 微软雅黑"；(顺序不能改)
  textAlign 文本内容的当前对齐方式(一般不需要)
  示例：ctx.textAlign = "left"; ctx.textAlign ="right";
  textBaseline绘制文本时使用的当前文本基线
  示例：ctx.textBaseline = "middle"; ctx.textBaseline = "top"; ctx.textBaseline="bottom";

• 图形的组合方式
  globalCompositeOperation属性，控制图形的组合方式，这个属性归getContext('2d')所创建的对象所有
  globalCompositeOperation="type";
  type的值：
  * source-over(默认值)，表示新图覆盖在旧图之上
  * source-in ：只绘制新图的重叠部分，其他透明
  * source-out ：只绘制新图，重叠部分和旧图透明
  * source-atop ： 只绘制旧图和重叠的部分，其他透明
  * destination-over ： 表示旧图覆盖在新图之上
  * destination-in ： 值绘制旧图的重叠部分，其他透明
  * destination-out ： 只绘制旧图，重叠部分和新图透明
  * destination-atop ： 只绘制新图和重叠部分，其他透明
  * lighter：旧图与新图都绘制，重叠部分混色处理
  * xor ： 旧图和新图重叠处做透明处理
  * copy ： 只绘制新图形，不绘制旧图形。

图形的阴影。

阴影属性：

• shadowCOlor：设置阴影颜色。

• shadowBlur：设置阴影模糊级别。

• shadowOffsetX：设置阴影在x轴上距离图形的距离

• shadowOffsetY：设置阴影在y轴上距离图形的距离

  ctx.shadowColor="red";
  ctx.shadowBlur=20;
  ctx.shadowOffsetX=5;
  ctx.shadowOffsetY=5;

图像的处理

• 绘制图像

  • drawImage(img,x,y)
    x:图片横坐标的起始值 y：图片纵坐标的起始值
  • drawImage(img,x,y,w,h)
    w：在画布中图片显示的宽度 h：在画布中图片显示的高度
  • drawImage(img,x,y,w,h,rx,ry,rw,rh)
    rx、ry：显示在画布中的坐标 rw、rh：显示在画布中的宽、高

• 图像在画布中的平铺
  createPattern(img,type)
  type:repeat整个画布平铺
  repeat-x/y在x/y轴方向上平铺
  no-repeat不平铺

• 图像的裁剪(配合路径使用)
  clip（）配合路径使用，先绘制好路径，然后调用clip方法
  提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）

• 像素处理
  getImageData(x,y,w,h)：可以获取指定区域内的像素点的数据；
  putImageData(imgData,x,y);getImageData返回的像素数据点imgData填充到画布上面，从x、y点开始填充；

• 图像的输出
  canvas.toDataURL( type , args ):
  为canvas的方法，用来返回一个url地址，将canvas画布转化为一张图像；
  图像是基于Base64编码的 , 如果不指定两个参数，无参数调用该方法，转换的图像格式为png格式 。
  •type:图像格式，image/png image/jpeg等
  •args:可选参数。例如，如果type为image/jpeg，则args可以是0和1之间的值，以指定图像的品质。

• 其他方法
  scale(w,h) 缩放当前绘图:
  w: 缩放绘图的宽度 h: 缩放绘图的高度
  rotate(angle) 旋转当前绘图的坐标轴
  1°等于Math.PI/180 5°=5*Math.PI/180
  translate(x,y) 重新映射画布上的 (0,0) 位置

  save()、restore():
  绘制复杂图形必不可少的方法，分别用来保存、恢复canvas的状态，无参数

• 清除画布
  ctx.clearRect(x,y,width,height):
  x : 清除起点横坐标
  y : 清除起点纵坐标
  width : 清除长度
  height : 清除高度

canvas学习：http://blog.csdn.net/clh604/article/details/8536059