這篇文章主要介紹了一波HTML5 Canvas基礎繪圖實例代碼集合,包括圓形矩形圓角等基本圖形的繪制,需要的朋友可以參考下

基本繪制

XML/HTML Code

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

if (canvas.getContext) {   

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

    // 線寬   

    context.lineWidth = 4;   

    // 畫筆顏色   

    context.strokeStyle = 'red';   

    // 填充色   

    context.fillStyle = "red";   

    // 線帽類型   

    context.lineCap = 'butt'; // round, square   

    // 開始路徑   

    context.beginPath();   

    // 起點   

    context.moveTo(10,10);   

    // 終點   

    context.lineTo(150,50);   

    // 繪制   

    context.stroke();   

｝  

矩形

XML/HTML Code

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

if (canvas.getContext) {   

    context.beginPath();   

    context.strokeRect(10,10,70,40);   

    // 矩形的另一種方式   

    context.rect(10,10.70,40);   

    context.stroke();   

    // 實心矩形   

    context.beginPath();   

    context.fillRect(10,10,70,40);   

    // 另一種方式實心矩形   

    context.beginPath();   

    context.rect(10,10,70,40);   

    context.fill();   

｝  

圓形

XML/HTML Code

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

if (canvas.getContext) {   

    context.beginPath();   

    // 圓中心坐標x, 圓中心坐標Y, 圓弧半徑， 起始角度，終止角度，是否逆時針   

    // 第4個參數和第五個參數是要傳入的弧度，如果畫30角度，需要將其轉化為弧度 30 * Math.PI / 180   

    context.arc(100,100,70,0,130 * Math.PI / 180, true);   

    context.stroke();   

    context.fill();   

｝  

圓角

XML/HTML Code

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

if (canvas.getContext) {   

    context.beginPath();   

    context.moveTo(20,20);   

    context.lineTo(70,20);   

       // 為一條路徑畫弧度p1.x p1.y p2.x, p2.y 弧半徑，    

    context.arcTo(120,30,120,70, 50);   

    context.lineTo(120,120);   

    context.stroke();   

    // 擦除canvas 畫板   

    context.beginPath();   

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

    // 擦除區(qū)域   

    context.clearRect(30,30,50,50);   

｝  

二次貝塞爾曲線

XML/HTML Code

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

if (canvas.getContext) {   

      context.beginPath();   

      context.moveTo(100,100);   

      context.quadraticCurveTo(20,50,200,20);   

      context.stroke();   

｝  

三次貝塞爾曲線

XML/HTML Code

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

if (canvas.getContext) {   

     context.moveTo(68,130);   

     var cX1 = 20;   

     var cY1 = 10;   

     var cX2 = 268;   

     var cY2 = 10;   

     var endX = 268;   

     var endY = 170;   

     context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   

     context.stroke();   

    // 利用clip指定繪圖區(qū)域，指定繪圖區(qū)域之后，只能在繪圖區(qū)域中進行繪圖擦歐總   

    // 繪制圓形   

    context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   

    // 限制區(qū)域   

    context.clip();   

    // 開始嘗試繪制其他   

    context.beginPath();   

    context.fillStyle = 'lightblue';   

    // 結果矩形并沒有顯示出來   

    context.fillRect(0,0,300,150);   

}  

畫板進階使用

XML/HTML Code

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

if (canvas.getContext) {   

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

    /*   

     * drawImage(image,dx,dy)   

     * drawImage(image,dx,dy,dw,dh)   

     * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);   

     * image 繪圖對象   

     * dx dy canvas 的坐標   

     * dw，dh 表示 image 在canvas中即將繪圖的位置   

     * sw，sh 表示image 所要繪圖的區(qū)域   

     * sx,sy 所要繪圖的開始位置    

     */   

    var image = document.getElementById('img');   

    context.drawImage(image, 0, 0);   

     var img = new Image();   

     img.src = 'images/1.jpg';   

     img.onload = function(){   

         // drawImage    

         // 從 0,0 坐標開始繪制   

         // context.drawImage(img,0,0);   

         // 從0，0 開始,繪制整張圖到100,100 長寬   

         // context.drawImage(img, 0, 0, 100, 100);   

         // 截圖,50,50 到 100,100 從 260,130 開始繪制，放到 100,100 長寬區(qū)域中   

         // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);   

         // 利用getImageData 和 putImageData 繪制圖片   

         context.drawImage(img, 10, 10);   

         // 從畫板上獲取像素數據   

         // 開始位置， 結束位置   

         var imgData = context.getImageData(50,50,100,100);   

         // 將數據畫到畫板指定位置坐標   

         context.putImageData(imgData,10,260);   

         // 將所去的像素數據一部分，畫到畫板上   

         context.putImageData(imgData,200,260,50,50,100,100);      

         // createImageData 創(chuàng)建像素   

          var imgData = context.getImageData(50,50,200,200);   

          // 創(chuàng)建指定大小的空對象   

          var imgData01 = context.createImageData(imgData);   

          for (i = 0; i < imgData01.width * imgData01.height * 4; i+=4) {   

              // 紅色像素   

              imgData01.data[i + 0] = 255;   

              imgData01.data[i+1] = 0;   

              imgData01.data[i+2] = 0;   

              imgData01.data[i+3] = 255;   

          }   

          context.putImageData(imgData01, 10, 260);   

     }   

}