canvas

初始canvas

<canvas id="c1" width="400" height="400">
<span>不支持canvas瀏覽器</span>
</canvas>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  //webgl : 3D繪圖
};

繪製實心和空心正方形

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    //oGC.fillRect(50,50,100,100);  left top 寬 高
    //若是是整數的話會出現2px邊框，能夠改爲下面的0.5
    oGC.strokeRect(50.5,50.5,100,100);
};

繪製實心和空心正方形加邊線和清除畫布

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.fillStyle = 'red';//填充樣式
    oGC.strokeStyle = 'blue';//邊框顏色
    oGC.lineWidth = 10;//邊框大小
 //下面兩個是有順序的誰先寫誰就先出來
    oGC.fillRect(50,50,100,100);
    oGC.strokeRect(50.5,50.5,100,100);
};

繪製實心和空心正方形加圓角斜角

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.fillStyle = 'red';
    oGC.strokeStyle = 'blue';
    oGC.lineWidth = 10;
    oGC.lineJoin = 'bevel';//round是圓角 bevel是斜角
    oGC.fillRect(50,50,100,100);
    oGC.strokeRect(50.5,50.5,100,100);
};

繪製實心和空心的線路，要用到繪圖路徑

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.beginPath();
    oGC.moveTo(100,100);//在left top距離100處點了一點(起始)
    oGC.lineTo(200,200);//在left top距離200處點了一點（過程）
    oGC.lineTo(300,200);
    oGC.closePath();//一、閉合，二、關閉繪製
    oGC.stroke();//畫線
    
    
    oGC.beginPath();
    oGC.moveTo(100,200);
    oGC.lineTo(200,300);
    oGC.lineTo(300,300);
    oGC.closePath();
    oGC.fill();
    
};

繪製完而後清除畫版

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.beginPath();
    oGC.rect(100,100,100,100);//繪製方塊
    oGC.closePath();
    oGC.fill();
    oGC.clearRect(0,0,oC.width,oC.height); //清除矩形畫布 
};

畫布互不影響

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.save();//開始保存路徑
    oGC.fillStyle = 'red';
    oGC.beginPath();
    oGC.moveTo(100,100);
    oGC.lineTo(200,200);
    oGC.lineTo(300,200);
    oGC.closePath();
    oGC.fill();
    oGC.restore();//結束恢復路徑
    
    oGC.beginPath();
    oGC.moveTo(100,200);
    oGC.lineTo(200,300);
    oGC.lineTo(300,300);
    oGC.closePath();
    oGC.fill();
};

oGC.lineCap = 'square';  // round  端點樣式

經過js畫線

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oC.onmousedown = function(ev){
        var ev = ev || window.event;
        oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
            oGC.stroke();
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };
};

若是在樣式裏設置canvas寬度如width:300 height:200 實際上是設置canvas的高度等比例縮放

畫圓

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.moveTo(200,200);
    //弧度 = 角度*Math.PI/180
    oGC.arc(200,200,150,0,90*Math.PI/180,true);//true是順時針，false是逆時針 150是半徑，0是起始
    oGC.stroke();
    
};