Canvas标签学习总结

1.1 canvas初始化

首先使用canvas标签,通过document.getElementById("2d")获取元素.canvas的初始化.

•  canvas.width
•  canvas.height
•  canvas.lineWidth
•  canvas.strokeStyle  (字符串颜色)

  if(canvas.getContext("2d"))

     var context = canvas.getContext("2d")

使用context绘制,基于状态开始绘制.

2.1绘制直线与曲线

•  context.moveTo(x,y)
•  context.lineTo(x,y)
•  context.fillStyle   (字符串颜色)
•  context.fill()
•  context.stroke()

绘制使用 context.beginPath() 开始 使用 context.closePath() 结束. 来区分状态值.

绘制曲线 context.arc( centerx,centery,radius,startingAngle,endingAngle,anticlockwise = false)     

                    圆心坐标x,圆心坐标y,半径,开始角度,结束角度,是否逆时针绘制  

                    结束在切点位置

3.1 绘制动画基础

使用canvas 绘制动画 setInterval()(
匿名函数 function(){
           render();  绘制当前画面 渲染
           update();  调整数据结构 修正
           },
          时间 (毫秒)

);

context.clearRect(0,0,width,height); 对矩形空间内的图像进行刷新操作.

绘制矩形

context.rect(x,y,width,height)  
context.fillRect(x,y,width,height) 
context.strokeRect(x,y,width,height)

3.2 线条的属性

lineCap 设置线条两端的形状

       butt(default)、round、square

lineJoin 相交的效果

       miter(default) 尖角、bevel 斜接、round 圆角

       miterLimit 当lineJoin设置为miter时,内角距离的最大值(线条的实线尖角和宽度线外的线外夹角) 超过的话将使用bevel 默认为10.

先填充,后描边.当设置一些线段属性后,先调用fill(),后调用stroke().

4.1 图像变换和状态保存

context.save()   保存canvas状态

context.restore() 恢复状态

在绘制图像时,往往是先绘制基本轮廓再加以变换.

translate(x,y)  位移

rotate(deg)   旋转

scale(sx,sy)   缩放

function drawStar(cxt,x,y,R,rot){ 

        cxt.save(); 

        cxt.translate(x,y);

        cxt.rotate(rot/180*Math.PI);

        cxt.scale(R,R);

    

        startPath(cxt);

    

        cxt.fillStyle = "#fb3";

//     cxt.strokeStyle = "#fd5";          //当调用scale()时,缩放不仅仅是图形还包括边,所以就把描边相关的注释掉

//     cxt.lineWidth = 3;

//     cxt.lineJoin = "round";

        cxt.fill();

//     cxt.stroke();

        cxt.restore();

}

4.1.1 变换矩阵

[ a c e ]          a,d 水平、垂直缩放

[ b d f  ]          b,c 水平、垂直倾斜

[ 0 0 1 ]          e,f 水平、垂直位移

设置变换矩阵
     transform(a,b,c,d,e,f)           可级联效果
     setTransform(a,b,c,d,e,f)     可以使之前失效 设置为此效果

5.1 填充样式

fillStyle 除颜色外还可以设置渐变色.

首先,创建一个渐变色,并将其设置关键色的属性.最后设置为fillStyle的值.

5.1.1 线性渐变:

var grd = context.createLinearGradient(xstart,ystart,xend,yend)

grd.addColorStop(stop,color)      //关键色的位置,关键色

5.1.2 径向渐变:

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1)     //定义两个圆

grd.addColorStop(stop,color)

5.1.3 背景填充:

createPattern(img,repeat-style)      //repeat-style: no-repeat,repeat-x.repeat-y,repeat

图片填充:

var backgroundImage = new Image();

backgroundImage.arc = "b.jpg";

backgroundImage.onload = function(){

     var pattern = context.createPattern(backgroundImage,"repeat");

     context.fillStyle = pattern;

}

当然,还可以使用canvas画布来填充:

var backgCanvas = createBackgroundCanvas();

var pattern = context.createPattern(backgroundVanvas,'repeat');

还可以使用video.

6.1 曲线的绘制

圆弧和圆角矩形

cxt.arc(

     centerx,centery,radius,startingAngle,endingAngle,anticlockwise = false

)

          圆心坐标x,圆心坐标y,半径,开始角度,结束角度,是否逆时针绘制.

绘制圆角矩形:

function drawRoundRect(cxt,x,y,width,height,radius){

     cxt.save();

     cxt.translate(x,y);

     pathRoundRect(cxt,width,height,radius);

     cxt.strokeStyle = "black";

     cxt.stroke();

     cxt.restore();

}

function pathRoundRect (cxt,width,height,radius){

     cxt.beginPath();

    

     cxt.arc(width - radius, height - radius,radius, 0 , Math.PI/2);

     cxt.lineTo(radius,height);

     cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);

     cxt.lineTo(0,radius);

     cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);

     cxt.lineTo(width-radius,0);

     cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);

    

     cxt.closePath();

}

6.2 圆弧
另一种绘制曲线的方法:

cxt.arcTo(
     x1,y1,x2,y2,radius
)

     圆1坐标x,圆1坐标y(控制点),圆2坐标x,圆2坐标y(结束点),半径 
     结束在切点位置


6.3 二次贝赛尔曲线    Bezier

quadraticCurveTo() 

context.moveTo(x0,y0);

context.quadraticCurveTo(

     x1,y1,

     x2,y2) ;

实例: http://tinyurl.com/html5quadratic

6.4 三次贝赛尔曲线 

bezierCurveTo()

context.moveTo(x0,y0);

context.quadraticCurveTo(

     x1,y1,

     x2,y2,

     x3,y3 );

实例: http://tinyurl.com/html5bezier

7-1 文字渲染

context.font = "bolid 40px Arial"            设置字体
context.fillText(String,x,y,[maxlen])          书写字符串

字型字号和字体
     font 默认值:"20px sans-serif"
     context.font =

     font-style      : normal(default) italic(斜体字)oblique(倾斜字体)

     font-variant   : normal(default) small-caps (小型大写字母)

     font-weight   : lighter normal(default)(400)bold(700) bolder

     font-size       : 20px(default) 2em150% ox-smallx-small medium ..

     font-family    : 设置多种字体备选  支持@font-face Web安全字体

    
文本对齐
     context.textAlign = left center right (基准是要给定文本初始坐标值)
     context.textBaseline = top middle bottom (坐标点) alphabetic(default) (英文) ideographic (方块字) hanging (印度语)

文本度量
     context.measureText(String).width 渲染后的字符串宽度 便于制作文本编辑器 要先设置文本属性

8-1 阴影
     context.shadowColor          阴影颜色(包括半透明)
     context.shadowOffsetX         阴影位移值
     context.shadowOffsetY
     context.shadowBlur          阴影模糊程度(越大越模糊)
    
     设置一个属性,便会出现阴影
8-2 global
     globalAlpha = 1(default)     模糊 即将绘制系统的透明度
     globalCompositeOperation = "source-over"(default)     如果两个图形互相压制 (前面在后面上面)
          source-over source-atop source-in source-out
          destination-over destination-atop destination-in destination-out
          lighter copy xor
         
8-3 剪辑区域
     context.clip()     绘制环境的改变