canvas学习第二章

canvas学习第二章

基础知识

ctx.fillRect(x,y,width,height) 在位置(x,y)处以宽为width，高为height绘制一个矩形
ctx.strokeRect(x,y,width,height) 在位置(x,y)处以宽为width，高为height绘制一个矩形边框，他需要strokeStyle,lineWidth,lineJoin和miterLimit设置
- lineCap: 线段末端的形状
  - butt: 默认值，端点是垂直于线段边缘的平直边缘
  - round: 端点是在线段边缘处以线宽为直径的半圆
  - square: 端点是在选段边缘处以线宽为长，以一半线宽为宽的矩形
- lineJoin: 定义两条线相交产生的拐角，可将其称为连接
  - miter: 默认值，在连接外边缘延长相接
  - bevel: 连接处是一个对角线斜角
  - round: 连接处是一个圆
ctx.clearRect(x,y,width,height) 在位置(x,y)处以宽为width和高为height清除指定区域并使其完全透明(使用透明黑作为颜色)
当前路径和位图受canvas上下文控制，不属于保存的状态，保存当前状态到堆栈用：ctx.save()，调出最后存储的堆栈恢复画布用ctx.restore()
高级路径画法
1. ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise) antilockwise若为false，则顺时针画圆，若为true，则逆时针画圆
2. ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 三次贝塞尔曲线
3. ctx.quadraticCurveTo(cpx,cpy,x,y) 二次贝塞尔曲线
canvas裁切区域
- 使用ctx.save(),ctx.restore(),ctx.rect(),ctx.clip()可以完成区域裁切
旋转变换
- ctx.setTransform(1,0,0,1,0,0)和ctx.rotate() 变换在调用setTransform()或其他变换函数后立即应用到形状与路径上。
缩放变换
- ctx.scale() 对图像进行缩放
填充渐变形状：水平渐变，垂直渐变，对角线渐变，径向渐变
- 水平渐变：var gr = ctx.createLinearGradient(0,0,100,0);
- 垂直渐变：var gr = ctx.createLinearGradient(0,0,0,100);
- 对角线渐变：var gr = ctx.createLinearGradient(0,0,100,100);
- 径向渐变：var gr = ctx.createRadialGradient(50,50,50,50,100);
- 给渐变添加断点：gr.addColorStop(.5,’rgb(0,255,0)’);
- 用图案填充：
  - 四种填充类型：repeat,repeat-x,repeat-y,no-repeat
  - var fill = ctx.createPattern(‘fillImg’,’repeat’);
创建阴影
- shadowOffsetX和shadowOffsetY值可以是正也可以为负，负值将会在左侧和上方创建阴影，反之，将会在底部创建阴影。shadowBlur属性用来设置阴影模糊效果的程度。这三个参数不受当前canvas变换矩阵影响，shadowColor可以是任何HTML4颜色字符串。
  以下代码是关于划线：

function drawScreen() {
        //round end. bevel join, at top left of canvas
        context.strokeStyle = "black"; //need list of available colors
        context.lineWidth=10;
        context.lineJoin='bevel';
        context.lineCap='round';
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(25, 0);
        context.lineTo(25,25);
        context.stroke();
        context.closePath();
        
        //round end, bevel join, not at top or left of canvas
        context.beginPath();
        context.moveTo(10, 50);
        context.lineTo(35, 50);
        context.lineTo(35,75);
        context.stroke();
        context.closePath();
        
        //flat end, round join, not at top or left
        context.lineJoin='round';
        context.lineCap='butt';
        context.beginPath();
        context.moveTo(10, 100);
        context.lineTo(35, 100);
        context.lineTo(35,125);
        context.stroke();
        context.closePath();
    }

以下代码关于区域的裁切：

function drawScreen() {
    //在屏幕上绘制一个黑色的方块
    context.fillStyle = "black";
    context.fillRect(10, 10, 200, 200);
    //保存当前上下文
    context.save();
    context.beginPath();
    //裁切画布从(0,0)到(50,50)的正方形
    context.rect(0, 0, 50, 50);
    context.clip();
    //绘制红色圆
    context.beginPath();
    context.strokeStyle = "red"; //need list of available colors
    context.lineWidth=5;
    context.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false); // full circle
    context.stroke();
    context.closePath();
    context.restore();
    //裁切整个画布
    context.beginPath();
    context.rect(0, 0, 500, 500);
    context.clip();
    //蓝色圆
    context.beginPath();
    context.strokeStyle = "blue";
    context.lineWidth=5;
    context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false);
    context.stroke();
    context.closePath();
}

也可将其它canvas方法配合裁切区域使用，最常见的是arc()函数

以下代码是关于旋转：

function drawScreen(){
    //绘制黑色正方形
    ctx.fillStyle = 'black';
    ctx.fillRect(20,20,25,25);
    //绘制红色正方形
    ctx.setTransform(1,0,0,1,0,0);
    var angle = 45*Math.PI/180,
        x = 100,y=100,width=50,height=50;
    ctx.translate(x+.5*width,y+.5*height);
    ctx.rotate(angle);
    ctx.fillStyle = 'red';
    ctx.fillRect(-0.5*width,-0.5*height,width,height);
}

缩放变换代码如下：

function drawScreen(){
    //绘制一个红色区域
    ctx.setTransform(1,0,0,1,0,0);
    var angle = 45*Math.PI/180,
        x = 100,y=100,width=50,height=50;
    ctx.translate(x+.5*width,y+.5*height);
    ctx.scale(2,2);
    ctx.fillStyle = 'red';
    ctx.fillRect(-0.5*width,-0.5*height,width,height);
}

渐变代码如下：

//径向渐变
function drawScreen(){
    var gr = ctx.createRadialGradient(100,100,50,100,100,100);
    //添加颜色断点
    gr.addColorStop(0,'rgb(255,0,0)');
    gr.addColorStop(0.5,'rgb(0,255,0)');
    gr.addColorStop(1,'rgb(0,0,255)');
    //使用fillStyle生成渐变
    ctx.fillStyle = gr;
    ctx.arc(100,100,100,0,2*Math.PI,false);
    ctx.fill();
}
//图案填充
function drawScreen(){
    var img = new Image();
    img.src = 'fill.gif';
    img.onload = function(){
        var gr = ctx.createPattern(img,'repeat');
        ctx.fillStyle = gr;
        ctx.fillRect(0,0,200,200);
    }
}

阴影代码如下：

function drawScreen() {
    context.fillStyle = 'red'; //设置填充颜色
    context.shadowOffsetX=4;
    context.shadowOffsetY=4;
    context.shadowColor='black';
    context.shadowBlur=4; //模糊度
    context.fillRect(10,10,100,100);  
    context.shadowOffsetX=-4;
    context.shadowOffsetY=-4;
    context.shadowColor='black';
    context.shadowBlur=4;
    context.fillRect(150,10,100,100);  
    context.shadowOffsetX=10;
    context.shadowOffsetY=10;
    context.shadowColor='rgb(100,100,100)';
    context.shadowBlur=8;
    context.arc(200, 300, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
    context.fill();
}