社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 一波HTML5 Canvas基礎繪圖實例程式碼集合_html5教學技巧

一波HTML5 Canvas基礎繪圖實例程式碼集合_html5教學技巧

WBOY
發布： 2016-05-16 15:45:46
原創
1641 人瀏覽過

基本繪製

XML/HTML Code複製內容到剪貼簿
  1. var canvas = document.getElementBy>document
    2. .getElementBy; >
  2. if (canvas.getContext) {   
  3.     var context = canvas.Congetn('2d');
  4.     // 線寬   
  5.     context.lineWidth = 4; 🎜>
    6.     // 畫筆顏色   
    7.     
  7. context.strokeStyle = 'red';     // 填充色   
  8.     
    9. context.fillStyle
  9.  = "red";     // 帽型   
    10.     
  10. context.lineCap
    11.  = 
  11. 'butt';     // 開始路徑        context.beginPath();   
  12.     // 起點   
  13.     context.moveTo(10,10);   
  14.     // 終點   
  15.     context.lineTo(150,50);   
  16.     // 繪製   
  17.     context.stroke();   
  18. ｝  
    20.     
  20. 長方形

XML/HTML Code
複製內容到剪貼簿

var canvas
 = 
  1. document.getElementBy>document.getElementBy; > if (canvas.getContext) {        context.beginPath();   
  2.     context.strokeRect(10,10,70,40);   
  3.     // 矩形的另一種方式   
  4.     context.rect(10,10.70,40);   
  5.     context.stroke();   
  6.         
  7.     // 實心長方形   
  8.     context.beginPath();   
  9.     context.fillRect(10,10,70,40);   
  10.     // 另一種方式實心長方形   
  11.     context.beginPath();   
  12.     context.rect(10,10,70,40);   
  13.     context.fill();   
  14. ｝  
  16.       圓形

XML/HTML Code
複製內容到剪貼簿

  1. var canvas = document.getElementBy>document
    2. .getElementBy; >
  2. if (canvas.getContext) {   
  3.     context.beginPath();   
  4.     // 圓中心座標x, 圓中心座標Y, 圓弧半徑， 起始角度，終止角度，是否逆時針   
  5.     // 第4個參數和第五個參數是要傳入的弧度，如果畫30角度，需要將其轉化為弧度 30 * Math.PI / 180   
  6.     context.arc(100,100,70,0,130 * Math.PI / 180, true);   
  7.     context.stroke();   
  8.     context.fill();   
  9. ｝  


     圓角

XML/HTML Code複製內容到剪貼簿
  1. var canvas = document.getElementBy>document
  2. .getElementBy; >
    3. if (canvas.getContext) {   
    4.     context.beginPath();   
    5.     context.moveTo(20,20);   
    6.     context.lineTo(70,20);   
    7.        // 為路徑畫弧度p1.x p1.y p2.x, p2.y 弧半徑，    
    8.     context.arcTo(120,30,120,70, 50);   
    9.     context.lineTo(120,120);   
    10.     context.stroke();   
    11.         
    12.     // 擦除canvas 畫板   
    13.     context.beginPath();   
    14.     context.fillRect(10,10,200,100);   
    15.         
    16.     // 擦除區域   
    17.     context.clearRect(30,30,50,50);   
    18. ｝  

二次貝塞爾曲線
XML/HTML Code
複製內容到剪貼簿
  1. var canvas = document.getElementBy>
    2. document
  2. .getElementBy; >
  3. if (canvas.getContext) {   
  4.       context.beginPath();   
  5.       context.moveTo(100,100);   
  6.       context.quadraticCurveTo(20,50,200,20);   
  7.       context.stroke();   
｝  


    
三次貝塞爾曲線
XML/HTML Code
複製內容到剪貼簿
  1. var 勞動 = 文件.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.      context.moveTo(68,130);   
  4.      var cX1 = 20;   
  5.      var cY1 = 10;   
  6.      var cX2 = 268;   
  7.      var cY2 = 10;   
  8.      var endX = 268;   
  9.      var endY = 170;   
  10.      context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   
  11.      context.lines();   
  12.         
  13.     // 利用剪輯指定繪圖區域，之後指定繪圖區域，只能在繪圖區域中進行繪圖擦歐總   
  14.     // 均勻圓   
  15.     context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   
  16.     // 限制區   
  17.     context.clip();   
  18.     //開始嘗試其他光源   
  19.     context.beginPath();   
  20.     context.fillStyle = 'lightblue';   
  21.     //結果統計並未顯示   
  22.     context.fillRect(0,0,300,150);   
  23. }  

畫板進階使用

XML/HTML 程式碼將內容複製到剪貼簿
  1. var canvas = document.getElementBy>document
    2. .getElementBy; >
  2. if (canvas.getContext) {   
  3.     var context = canvas.Congetn('2d');
  4.     /*   
  5.      * drawImage(image,dx,dy)   
  6.      * drawImage(image,dx,dy,dw,dh)   
  7.      * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);   
  8.      * image 繪圖物件   
  9.      * dx dy canvas 的座標   
  10.      * dw，dh 表示 image 即將在canvas中繪圖的位置   
  11.      * sw，sh 表示image 所要繪圖的區域   
  12.      * sx,sy 所要繪圖的起始位置    
  13.      */   
  14.     var image = document    context.drawImage(image, 0, 0);   
  15.      var img
  16.  = new 新        
    17. img.src
  17.  = 'images/1.jpg''images/1.jpg';      
  18. img.onload = functionfunction
  19.              
  20.          // drawImage    
  21.          // 從 0,0 座標開始繪製   
  22.          // context.drawImage(img,0,0);   
  23.          // 從0，且0 開始,繪製完整圖至100,100 長寬   
  24.          // context.drawImage(img, 0, 0, 100, 100);  
  25.          // 截圖,50,50 到 100,100 從 260,130 開始繪製，並放置至 100,100 260,130 開始繪製，並放置至 100,100 260,130 
  26.          // context.drawImage(img, 50, 50, 100,100, 260, 130, 100,             
  27.          // 利用getImageData 與 putImageData 繪圖   
  28.   
  29.          context.drawImage(img, 10, 10);   
  30.          // 從畫板上取得像素資料   
  31.          // 起始位置， 結束位置   
  32.          var 
  33. imgData = context
  34.          // 將資料繪製至畫板指定位置座標   
  35.          context.putImageData(imgData,10,260);   
  36.          // 將所去的像素資料一部分，並畫到畫板上   
  37.          context.putImageData(imgData,200,260,50,50,100,100);      
  38.              
  39.          // createImageData 建立像素   
  40.           var imgData = context = context
    41.  = 
  41. context
  42.           // 以建立指定大小的空格物件              var imgData01 = context
    43.  = 
  43. context
    44.               
  44.           for (i =  = imgData01.width
    45.  * imgData01.height * 4; i =4) {   
    46.               // 紅色像素   
    47.               imgData01.data[i   0] = 255;   
    48.               imgData01.data[i 1] = 0;   
    49.               imgData01.data[i 2] = 0;   
    50.               imgData01.data[i 3] = 255;   
    51.                   
    52.           }   
    53.           context.putImageData(imgData01, 10, 260);   
    54.      }   
    55. }  
相關標籤：
canvas html5 繪圖
來源：php.cn
上一篇：談HTML5本地儲存技術_html5教學技巧 下一篇：淺談基於HTML5的線上影片播放方案_html5教學技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板