关于Canvas画布的用法详解

关于Canvas画布的使用

之前对页面布局中的图案停留在用ps来抠图或者做一些页面需要的图片，最近对Canvas画布进行了学习，发现Canvas画布可以实现在页面中布局矢量图案（相较于之前做一些练习和图案时候用div等区块元素标签来“绘制”一些图案供页面布局使用），下面是关于Canvas画布的一些知识。

绘制环境

目前只支持2d场景，例如做一个黑色背景的页面和白色的画布，对它的绘制环境进行设置：

    
    
        不支持canvas浏览器
     
    
    

ps：不能在它的样式里面设置宽和高，否则会变成等比缩放（包含画布里的内容）

图形的绘制

• 绘制方块（方法）：
  fillRect(x,y,w,h)：（填充的）方块，参数X/Y轴坐标，宽，高
  strokeRect(x,y,w,h)：（边框的）方块，参数同上，边框不同于元素的边框
• 设置绘图（属性）：
  fillStyle：填充颜色（默认黑色）
  lineWidth：线宽度，是一个数值（默认1px）
  strokeStyle：边线颜色（默认黑色）
• 绘制路径（方法）：
  beginPath()：开始绘制路径，无参数（每次绘制会从上一次的开始绘制开始，防止重复绘制）
  closePath()：结束绘制路径，无参数（闭合绘图，如果不需要闭合则不设置）
  moveTo(x,y)：移动到绘制的新目标点，参数为X/Y轴坐标（既落笔点）
  lineTo(x,y)：新的目标点，参数为X/Y轴坐标（从上个目标点或落笔点到新位置的路径）
  stroke()：画线，默认黑色，无参数（边框绘制）
  fill()：填充，默认黑色，无参数（填充绘制）
  rect(x,y,w,h)：矩形区域，参数同绘制方块（fillRect和strokeRect是矩形特殊画法，且这两种方法只会绘制该矩形，不会从开始绘制处绘制）
  clearRect(x,y,w,h)：删除一个画布的矩形区域，参数同绘制方块（配合计时器用以做动画，每次先将之前的画布清空后重新绘制形成帧）
  save()：保存路径，无参数（与restore一起组成一个设置区，类似局部域，该域中的设置不会影响全局）
  restore()：恢复路径，无参数
• 边界绘制（属性）：
  lineJoin：边界连接点样式
  miter（默认）、round（圆角）、bevel（斜角）
  lineCap：端点样式
  butt（默认）、round（圆角）、square（高度多出为宽的一半）
• 绘制圆/圆弧（方法）：
  arc(x,y,r,s,e,t); 参数：
  x/y/r：起始圆心X/Y轴坐标和半径
  s,e：起始弧度和结束弧度，起点位置在3点钟位置，弧度与角度的关系：弧度=角度*Math.pi/180
  t：旋转方向，顺时针（默认：false）、逆时针（true）
• 变换（方法，与css3类似）：
  translate(x,y)：偏移，从起始点为基准点，参数为偏移后起始点的X/Y轴坐标
  rotate(d)：旋转，参数为弧度（默认的旋转中心是左上角，可以在偏移后改变起始点坐标从而改变旋转中心）
  scale(sx,sy)：缩放，必须传2个参数，既X/Y轴方向缩放到原本大小的倍数

插入图片

Canvas中可以插入图片（还可以插入视频），方法为：
drawImage(o,x,y,w,h);
o参数为绘制的图片（视频）对象，x/y绘制图像的X/Y轴坐标，W/H绘制图像的宽/高

但是h5的Canvas画布需要加载图片的话必须是等到图片加载完再去执行Canvas的操作，我们用onload事件去执行操作：

var myImg = new Image();  
    myImg.src = 'abc.png';  
    myImg.onload = function(){  
        oGC.drawImage(obj,0,0);} //不写宽高会用原图大小，写了会改变宽高
    }

设置背景

如果要给Canvas设置一个背景的话，我们使用

createPattern(o,r)，其中参数为绘制的图片对象，r为图片的平铺方式（repeat，repeat-x，repeat-y，no- repeat等），和插入图片一样也是需要图片加载完再去执行Canvas的操作：

var myImg = new Image();
    myImg.src = 'abc.png';
    myImg.onload = function(){
        oGC.fillStyle = oGC.createPattern(obj,'repeat'); 
        oGC.fillRect(0,0,300,300);  //设置完成后可以用此图像绘制任何形状
    }

以上是h5的Canvas画布的相关用法，不过Canvas还有自己的jquery（jCanvasScript），可以用来实现很多用法。