如何用代碼實現HTML5Canvas基礎繪圖

如何用代碼實現HTML5Canvas基礎繪圖，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

基本繪制

XML/HTML Code復制內容到剪貼板

1. 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復制內容到剪貼板

1. 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復制內容到剪貼板

1. 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);   
           
       // 擦除區域   
       context.clearRect(30,30,50,50);   
   ｝

二次貝塞爾曲線

XML/HTML Code復制內容到剪貼板

1. 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復制內容到剪貼板

1. 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指定繪圖區域，指定繪圖區域之后，只能在繪圖區域中進行繪圖擦歐總   
       // 繪制圓形   
       context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   
       // 限制區域   
       context.clip();   
       // 開始嘗試繪制其他   
       context.beginPath();   
       context.fillStyle = 'lightblue';   
       // 結果矩形并沒有顯示出來   
       context.fillRect(0,0,300,150);   
   }

畫板進階使用

XML/HTML Code復制內容到剪貼板

1. 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 所要繪圖的區域   
        * 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 長寬區域中   
            // 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 創建像素   
             var imgData = context.getImageData(50,50,200,200);   
             // 創建指定大小的空對象   
             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);   
        }   
   }

關于如何用代碼實現HTML5Canvas基礎繪圖問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。