H5 canvas

canvas和svg

canvas: javaScript動態生成。“位圖”，適用於像素處理和動態渲染。修改需要重繪

svg：xml靜態生成。“矢量圖”，不需要重繪

canvas基本結構

html

<canvas id="canvas" width="200" height="300" style="border: 1px solid blue"></canvas>

js

window.onload=function () {
    //獲取canvas對象
    var cnv=document.getElementById("canvas");
    //獲取上下文環境對象
    var cxt=cnv.getContext("2d");
    //繪製
    cxt.moveTo(50,50);
    cxt.lineTo(150,100);
    cxt.stroke();
}

注意1： canvas爲inline-block元素，有3個參數：id，width，height。默認300*500
注意2： 在css中定義width，height無效，一定要在html中定義
注意3： canvas對象方法：
（1）getContext("2d")獲取上下文環境
（2）toDataURL() 獲取canvas對象產生的位圖字符串
注意4： IE7 , IE8 兼容用excanvas.js
github下載地址

<!--[if IE]>
    <script src="excanvas.js"></script>
<![end if]-->

接下來，我們就來看實際的繪圖操作吧！！！

---

1. 直線圖形

一條直線

cxt.moveTo(50,50);//起始點
cxt.lineTo(150,100);//終止點
cxt.stroke();//繪製

三角形或多邊形

cxt.moveTo(50,50);
cxt.lineTo(150,100);//繼續lineTo(),就以前一個點爲基準
cxt.lineTo(70,150);
cxt.lineTo(50,50);
cxt.stroke();

矩形

    //描邊顏色。起始點，終止點，寬，高
    cxt.strokeStyle="pink";
    cxt.strokeRect(50,50,70,70);
    //填充顏色
    cxt.fillStyle="orange";
    cxt.fillRect(90,90,70,70);
    //清空
    cxt.clearRect(100,100,30,30);

常用技巧：清空整個矩形

window.onload=function () {
    //設置簡寫函數
    function $$(id) {
         return document.getElementById(id);
    }
    var cnv=$$("canvas");
    var cxt=cnv.getContext("2d");
    cxt.fillStyle="orange";
    cxt.fillRect(90,90,70,70);
    //清除
    var btn=$$("btn");
    btn.onclick=function () {
        cxt.clearRect(0,0,cnv.width,cnv.height);
    }
}

正多邊形

內角：degree=2π/n
i < n
半徑：size
原點座標:（dx,dy）

function $$(id){
	return document.getElementById(id);
}
window.onload=function(){
	var cnv=$$("canvas");
    var cxt=cnv.getContext("2d");
    //調用自定義的正多邊形畫法
     createPolygon(cxt,3,100,100,50);
     cxt.fillStyle="pink";
     cxt.fill();
}
//定義畫正多邊的函數，四個參數：圖的內容，邊數n，原點座標x、y,半徑size
function createPolygon(cxt,n,dx,dy,size){
    cxt.beginPath();
    //計算內角
    var degree=2*Math.PI/n;
    for(var i=0;i<n;i++){
        //三個點的角度位置
        var x=Math.cos(i*degree);
        var y=Math.sin(i*degree);
        //將三個點根據座標連接起來
        cxt.lineTo(x*size+dx，y*size+dy);
    }   
    cxt.closePath();
}

曲線圖形

描邊圓

        function $$(id) {
            return document.getElementById(id);
        }
        window.onload=function () {
            var can=$$("can");
            var cxt=can.getContext("2d");
            //描邊圓
            //開始路徑
            cxt.beginPath();
            //圓心座標x、y，半徑，起始度數，結束度數，逆時針
            cxt.arc(75,75,50,0,360*Math.PI/180,true);
            //結束路徑
            cxt.closePath();
            //開始描邊
            cxt.strokeStyle="pink";
            cxt.stroke();
        }

填充圓

 cxt.fillStyle="pink";
 cxt.fill();

半圓

 cxt.arc(75,75,50,0,180*Math.PI/180,true);

殘缺圓

cxt.arc(75,75,50,0,-270*Math.PI/180,true);

弧線
去掉cxt.closePath();

圓角矩形

        function $$(id) {
            return document.getElementById(id);
        }
        window.onload=function () {
            var cnv=$$("canvas");
            var cxt=cnv.getContext("2d");
            createRoundedRect(cxt,200,100,20,20,20);
            cxt.fillStyle="blue";
            cxt.fill();
        }
        /*width,height:寬高
        r：圓角半徑
        offsetX,offsetY:左上角頂點座標，第四個圓角的控制點
         */
        function createRoundedRect(cxt,width,height,r,offsetX,offsetY) {
            cxt.beginPath();
            cxt.moveTo(offsetX+r,offsetY);
            //第一個圓角
            cxt.lineTo(offsetX+width-r,offsetY);
            cxt.arcTo(offsetX+width,offsetY,offsetX+width,offsetY+r,r);
            //第二個圓角
            cxt.lineTo(offsetX+width,offsetY+height-r);
            cxt.arcTo(offsetX+width,offsetY+height,offsetX+width-r,offsetY+height,r);
            //第三個圓角
            cxt.lineTo(offsetX+r,offsetY+height);
            cxt.arcTo(offsetX,offsetY+height,offsetX,offsetY+height-r,r);
            //第四個圓角
            cxt.lineTo(offsetX,offsetY+r);
            cxt.arcTo(offsetX,offsetY,offsetX+r,offsetY,r);
            cxt.closePath();
        }

扇形

        function $$(id) {
            return document.getElementById(id);
        }
        window.onload=function () {
            var cnv=$$("canvas");
            var cxt=cnv.getContext("2d");
            createSector(cxt,cnv.width/3,cnv.height/2,90,270,200);
            cxt.fillStyle="blue";
            cxt.fill();
        }
            /**
             * 中心座標（x,y）
             * 半徑r
             * 開始角度angle1
             * 結束角度angle2
             */

       function createSector(cxt,x,y,r,angle1,angle2) {
           cxt.beginPath();
           cxt.moveTo(x,y);
           cxt.arc(x,y,r,angle1*Math.PI/180,angle2*Math.PI/180,false);
           cxt.closePath();

       }