H5 canvas

1.canvas网页中绘图环境配置

    标签：canvas 默认大小：宽300px，高150px;

    宽高需要是行内元素？因为css是进行等比缩放，造成里面内容也将被缩放

    绘制环境：getContext("2d")；目前支持2d环境

2.绘制方形：

   fillRect(L,T,W,H) 分别是左，上，宽，高，默认为黑色

   strokeRect(L,T,W,H) 带边框的方块

  

   设置绘图：

       fillStyle:填充颜色（绘制canvas是有顺序的）  --oGC.fillStyle="red"；

      lineWidth:线宽 ，--一个数值

      strokeStyle:边线的颜色

  边界绘制：

      lineJoin:边界连接样式（miter默认  round圆角 bevel斜角）

      lineCap:端点样式：（butt默认  round圆角  square高度多出宽的一半）

 绘制路径：

      beginPath();开始绘制路径

      closePath();结束绘制路径

      moveTo();移动到绘制的新目标点

      lineTo();新的目标点

  绘制语句：

    stroke:画线（不会被填充）

    fill：填充

    rect:矩形区域，需要设置（L,T,W,H）

    clearRect()删除一个画布的矩形区域（L,T,W,H）起始点，已经宽高

    save():保存路径  --进行闭合

    restore:恢复路径 --结束闭合

对比：beginPath(),closePath()和save(),restore()之间的区别：bc组合是会闭合的，永远保存当前状态  sr组合保存某个时刻的状态，不闭合是使用

小案例：鼠标画图，方块运动

3，绘制园：arc(x,y,半径，起始弧度，结束弧度，旋转方向)

     --x,y:起始位置

     --弧度与角度的关系：弧度=角度*Math.PI/180

    --旋转方向：顺时针（默认false），逆时针true

  案例：绘制钟表

4.绘制其他曲线：arc(x1,y1,x2,y2,r)  --第一组坐标，第二组坐标，半径

   贝塞尔曲线1：guadraticCurveTo(dx,dy,x1,y1) --第一组控制点，第二组结束坐标

   贝塞尔曲线2：bezierCureTo(dx1,dy1,dx2,dy2,x1,y1)  --第一组控制点，第二组控制点，第三组结束坐标

5.变换：

    translate:偏移，以起始点为基准，偏移当前坐标的位置，向目标方向移动

    rotate:旋转：参数为弧度：弧度=角度*Math.PI/180

   sacle:缩放

 例：边旋转边放大缩小：

oGC.translate(100,100);

setInterval(function(){

num++;

oGC.save();

oGC.clearRect(-100,-100,oC.width,oC.height);

                                                      if(num2 >=50){

val=-1;

}else if(num2==0){

val=1;

}

num2+=val;

oGC.scale(num2*1/50,num2*1/50)

oGC.rotate(num*Math.PI/180);

oGC.translate(-50,-50);

oGC.fillRect(0,0,100,100);

oGC.fill();

oGC.restore();

},30)

插入图片：
oGC.drawImage(oImg,x,y,w,h);

    设置背景：createPatern(oImg,平铺方式)  --repart,repart-x,repart-y,no-repart

  

    渐变：createLineGradie(x1,y1,r1,x2,y2,r2)  --起始点坐标x1,y1,目标点坐标x2,y2

6.文本：

     strokeText(文字,x,y)  --文字边框

     fillText(文字,x,y) --文字填充

     font--文字大小："60px impact"

     textAlign--默认和satart根left一样效果，end right center

     textBaseline  --文字上下位置的默认方式：alphabetic  参数 top middle bottom

     

     measureText()  --measureText(str).width:只有宽度，没有高度

     阴影：

      shadowOffsetX,shadowOffsetY  --X轴偏移，Y轴偏移--配合颜色使用

      shadowBlur:高斯模糊值

      shadowColor:阴影颜色

7.像素：getImageData(x,y,w,h)

获取图像数据：putImageData(获取图像，x,y)

属性：widt height data一组数组0-255

crateImageData(w,h)

--获取和设置指定坐标：getXY,setXY

图片操作：--必须同源下，

8.合成：全局阿尔法值：globalAlpha  --透明度0-1 例：oGC.globalAlpha=0.5;

   覆盖合成： --源：新的图形--目标：旧图形   --globalCompositeOperation    例:oGC.globalCompsiteOperation="xor";

---事件操作：isPointinPath(x,y)