HTML5 Canvas学习---第三章《Canvas上画线条，圆弧，曲线》

今天讲的例子比较多，可能篇幅长一些。从实用性看，前三个例子需要完全理解。后面的可以有兴趣再回头看，因为圆弧和曲线平时的设计当中不经常用到。

闲话少说，先来第一个例子：最基本的矩形

案例中涉及的函数

　　　　fillRect(x, y, width, height)：在(x, y)点上以width和height的长高来画全填充矩形。
　　　　strokeRect(x, y, width, height)：在(x, y)点上以width和height的长高来给矩形描边（只有边框，里面为空）。
　　　　clearRectt(x, y, width, height)：在(x, y)点上以width和height的长高清空内容，使他变为透明）

效果图：

直接贴上所有的代码，具体的编号请根据方法名称的最后一个字母索引值进行辨别。

View Code

/**
 * @author Administrator
 */
window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded() {
    canvasApp();
}

function canvasSupport() {
    // return !document.createElement('testcanvas').getContext;
}

function canvasApp() {
    var theCanvas = document.getElementById("canvas");
    var context = theCanvas.getContext("2d");
    //canvas中有很多不同的context，这里我们仅需要2D
    // if(!theCanvas || !theCanvas.getContext) {
    // return;
    // }

    function drawScreen1() {
        context.fillStyle = "#000000";
        context.strokeStyle = "#ff00ff";
        context.lineWidth = 2;
        context.fillRect(10, 10, 40, 40);
        context.strokeRect(0, 0, 60, 60);
        context.clearRect(20, 20, 20, 20);
    }

    function drawScreen2() {
        var ctx = document.getElementById('canvas').getContext('2d');

        ctx.fillRect(0, 0, 150, 150);
        ctx.save(); //保存当前的context状态 例如当前的context1
        
        ctx.fillStyle = '#3399FF' //新的context对象 当前为context2
        ctx.fillRect(15, 15, 120, 120);
        ctx.save(); //保存当前的context状态 例如当前的context2
        
        ctx.fillStyle = '#FFF'; //新的context对象 当前为context3
        ctx.globalAlpha = 0.5;
        ctx.fillRect(30, 30, 90, 90);

        ctx.restore();  //恢复到context2状态，也就是说ctx.fillSyle恢复到 #3399FF
        ctx.fillRect(45, 45, 60, 60);
 
        ctx.restore(); //再进行恢复 恢复到context1状态，恢复到最开始的默认状态
        ctx.fillRect(60, 60, 30, 30);
    }
    
    function drawScreen3() {
        context.strokeStyle = "black";
        
        context.lineWidth = 10; //线的粗细
        context.lineJoin = "bevel";
        
        /**
         * lineCap：线的两端
         * 1. butt：线的两端是平坦的
         * 2. round：线的两端是半圆形
         * 3. square：以线的宽度为长边，线的宽度的一半为短边的矩形
         */
        context.lineCap = "round";
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(25, 0);
        context.lineTo(25, 25);
        
        /**
         * fill()：实心
         * stroke()：描边
         */
        context.stroke();
        context.closePath();

        context.beginPath();
        context.moveTo(10, 50);
        context.lineTo(35, 50);
        context.lineTo(35, 75);
        context.stroke();
        context.closePath();

        /**
         * lineJoin：线的连接处
         * 1. miter：在连接处画出边缘（例如垂直）
         * 2. bevel：在连接处画出斜线
         * 3. round：在连接处画出圆形
         */
        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 drawScreen4() {
        context.beginPath();
        context.strokeStyle = "black";
        context.lineWidth = 5;

        /**
         * context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
         * 画圆弧，可以是整个弧，也可以是一部分
         * @param: x 圆弧的中心坐标
         * @param: y 圆弧的中心坐标
         * @param: radius 圆弧的半径
         * @param: startAngle 圆弧的起始角度
         * @param: endAngle 圆弧的结束角度
         * @param: anticlockwise 是否为《逆》时针方向
         *
         * 其中角度是沿着x轴方向为0或360度，x轴的反向为180度
         * y轴的反向为90度，y轴方向为270度
         */
        context.arc(100, 100, 20, (Math.PI / 180) * 90, (Math.PI / 180) * 180, false);
        context.stroke();
        context.closePath();
    }

    function drawScreen5() {
        context.beginPath();
        context.lineWidth = 5;
        context.moveTo(0, 0);
        context.quadraticCurveTo(100, 25, 0, 50);
        context.moveTo(250, 0);
        context.bezierCurveTo(0, 125, 300, 175, 150, 300);
        context.stroke();
        context.closePath();
    }

    drawScreen5();

}