CANVAS

/**

 * Created by ll0u on 1/9/2015.

 */

window.onload = function(){

    var canvas = document.getElementById('canvas');

    var context = canvas.getContext('2d');

    //canvas的座標，默認是x軸向右，y軸向下

    context.strokeStyle = 'green';

    context.save(); //保存狀態，即除繪畫以外的全部狀態，如strokeStyle等

    context.strokeStyle = 'red';

    context.strokeRect(0,0,100,100);

    context.restore();

    context.strokeRect(300,300,100,100);//恢復狀態，即除繪畫以外的全部狀態，如    context.save(); //保存狀態，即除繪畫以外的全部狀態，如strokeStyle等,將    context.save(); //保存狀態，即除繪畫以外的全部狀態，如strokeStyle等,將strokeStyle變爲green

    context.beginPath();//有了beginPath就能夠不用moveTo了，第一個lineTo的做用就至關於moveTo

    context.lineTo(200,200);

    context.lineTo(200,300);

    context.lineTo(300,300);

    context.closePath(); //closePath會使不閉合的曲線變得閉合

    context.fillStyle = 'pink'; //strokeStyle和fillStyle的值能夠是顏色，也能夠是漸變或pattern對象

    context.fill(); //fill會使不閉合的曲線變得閉合

    context.stroke();

    context.beginPath(); //若是這裏不加beginPath，則上一個路徑會被下面的fill，stroke從新填充,並且線條也會從上一次終點繪製到下一次的起點，加了之後則告訴canvas，這裏是一個新路徑，與上面無關

    context.lineTo(400,400);

    context.lineTo(400,500);

    context.lineTo(500,500);

    context.closePath();

    context.lineWidth = 10;

    context.lineCap = 'round'; //設置線條起始點與終點的樣式

    context.lineJoin = 'miter'; //設置曲線鏈接處的樣式 round、miter

    context.miterLimit = 2;//當lineJoin爲miter時，設置miter的程度，默認是20

    context.fillStyle = 'gray';

    context.fill(); //由於canvas是基於狀態繪圖，因此fill和stroke會將全部的路徑都填充

    context.stroke(); //stroke最好放在fill的後面，若放在fill以前，當線寬較寬時，會有一部分被fill覆蓋

    context.beginPath();

    context.strokeRect(250, 250, 50, 50) //strokeRect不會形成與上一次線條的終點鏈接;

    context.closePath();

    context.save();

    context.translate(300,300); //將canvas的參考點移到300,300

    context.scale(2,2); //將canvas繪製的圖像進行縮放

    context.rotate(45);//將canvas繪製的圖像進行旋轉

    context.beginPath();

    context.moveTo(0,0);

    context.lineTo(100,100);

    context.closePath();

    context.strokeStyle = 'gold';

    context.stroke();

    context.restore();

    context.save();

    context.beginPath();

    context.arc(200, 200, 200, 0, Math.PI, true); //繪製圓弧,（圓心，半徑，起始弧度，終止弧度，方向）會不加beginPath和上一次的終點鏈接

    context.stroke();

    context.closePath();

    context.restore()

    context.save();

    context.beginPath();

    context.moveTo(400,400);

    context.arcTo(500, 400, 500, 600, 100); //(點1，點2， 半徑),從上一次起點開始，在三個點之間肯定半徑爲50的圓弧

    context.stroke();

    context.closePath();

    context.restore()

    context.save();

    context.beginPath();

    context.moveTo(350,200);

    context.quadraticCurveTo(450, 100, 550, 200); //二次貝塞爾曲線（點1，點2），以上次終點爲起點，點1爲控制點，點2爲終點畫弧。

    context.stroke();

    context.closePath();

    context.restore()

    context.save();

    context.beginPath();

    context.moveTo(400,300);

    context.bezierCurveTo(500,0, 700,600, 800,300);//三次貝塞爾曲線，（點1，點2，點3），以上次終點爲起點，點1和點2爲控制點，點3爲終點畫弧。

    context.stroke();

    context.closePath();

    context.restore()

    var gradientStyle = context.createLinearGradient(200,200, 200,400); //（點1，點2）建立線性漸變色，起點到終點

    gradientStyle.addColorStop(0, 'pink'); //爲漸變色添加顏色

    gradientStyle.addColorStop(0.5, 'gold');

    gradientStyle.addColorStop(1, 'gray');

    context.save();

    context.beginPath();

    context.moveTo(200,200);

    context.lineTo(200,400);

    context.closePath();

    context.strokeStyle = gradientStyle;

    context.stroke();

    context.restore()

    var gradientRadialStyle = context.createRadialGradient(200,200,0, 200,200,100); //（圓1，圓2）建立徑向漸變色，圓環1到圓環2

    gradientRadialStyle.addColorStop(0, 'pink'); //爲漸變色添加顏色

    gradientRadialStyle.addColorStop(0.5, 'gold');

    gradientRadialStyle.addColorStop(1, 'gray');

    context.save();

    context.beginPath();

    context.arc(200, 200, 100, 0, Math.PI*2);

    context.closePath();

    context.fillStyle = gradientRadialStyle;

    context.fill();

    context.restore()

    var img = new Image();

    img.src = '16.jpg';

    img.onload = function(){

        var pattern = context.createPattern(img, 'repeat'); //(圖像或視頻或canvas，重複放方式),建立一個填充對象

        context.save();

        context.fillStyle = pattern;

        context.beginPath();

        context.fillRect(100, 100, 100, 100);

        context.closePath();

        context.restore()

    }

    drawStar(context, 5, 10, 'gold', 600, 500);

    context.save();

    context.lineWidth = 2;

    context.globalAlpha = 0.2;

    context.globalCompositeOperation = 'destination-over';

    context.font = '25px "微軟雅黑"';

    context.textAlign = 'center';

    context.textBaseline = 'bottom';

    context.beginPath();

    context.strokeText('fefefe', 100, 100);

    context.closePath();

    context.fill();

    context.restore();

  /*  context.save();

    context.beginPath();

    context.fillStyle = 'black';

    context.fillRect(0,0,800,600);

    context.closePath();

    context.restore();

    context.save();

    context.beginPath();

    context.fillStyle = 'white';

    context.arc(400,300,100,0,6.28);

    context.fill(); //使下面出現的圖像都只在這個範圍內才顯示

    context.clip();*/

    canvas.onclick = function(){

        var x = window.event.clientX - canvas.getBoundingClientRect().left;

        var y = window.event.clientY - canvas.getBoundingClientRect().top;

        context.save();

        context.beginPath();

        context.lineTo(0,0);

        context.lineTo(800,0);

        context.lineTo(800,600);

        context.lineTo(0,800);

        context.lineTo(0,0);

        if(context.isPointInPath(x, y)){  //判斷點擊的點是否在上面的範圍內

            alert(99)

        }

        context.restore();

    }

    context.save();

    context.beginPath();

    context.shadowColor = 'gray'; //陰影顏色

    context.shadowOffsetX = 5;

    context.shadowOffsetY = 5;

    context.shadowBlur = 1;

    context.lineTo(20,20);

    context.lineTo(500,200);

    context.stroke();

    context.closePath();

    context.restore();

}

function drawStar(cxt, r, R,color,  tranX, tranY){

    cxt.save();

    cxt.beginPath();

    for(var i=0; i<=5; i++){

        cxt.lineTo(R*Math.cos(((18+72*i)/360)*2*Math.PI) + tranX, R*Math.sin(((18+72*i)/360)*2*Math.PI) + tranY);

        cxt.lineTo(r*Math.cos(((54+72*i)/360)*2*Math.PI) + tranX, r*Math.sin(((54+72*i)/360)*2*Math.PI) + tranY);

    }

    cxt.fillStyle = color;

    cxt.closePath();

    cxt.fill();

    cxt.restore()

}