自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML 5深入淺出教學(xué)篇之八

作者：webabcd
開發(fā) 前端
本文講會講解在HTML 5 canvas畫布上（以路徑的方式）繪制矩形、繪制弧線、繪制曲線、繪制直線、繪制矩形的方法，并附代碼下載。

介紹

HTML 5: 畫布（canvas）之繪制圖形

畫布 Demo - 畫布的基本概念及 Demo，canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()

在畫布上繪制矩形 - canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()

在畫布上繪制弧線（以路徑的方式）- beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()

在畫布上繪制曲線（以路徑的方式）- quadraticCurveTo(), bezierCurveTo()

在畫布上繪制直線（以路徑的方式）- lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()

在畫布上繪制矩形（以路徑的方式）- rect()

示例

1、畫布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>畫布 Demo</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="320" height="240" style="background-color: rgb(222, 222, 222)"> 
  8.         您的瀏覽器不支持 canvas 標(biāo)簽  
  9.     </canvas> 
  10.     <br/> 
  11.     <button type="button" onclick="demo();">Demo</button> 
  12.     <br /> 
  13.     <img id="img" alt="" src="" /> 
  14.     <script type="text/javascript"> 
  15.         var canvas = document.getElementById('canvas')  
  16.         if (canvas.getContext) {  
  17.             alert("您的瀏覽器支持 canvas 標(biāo)簽");  
  18.         } else {  
  19.             alert("您的瀏覽器不支持 canvas 標(biāo)簽");  
  20.         }  
  21.         /*  
  22.          * canvas 標(biāo)簽 - 畫布標(biāo)簽  
  23.          *   getContext("2d") - 獲取畫布標(biāo)簽上的 2D 上下文對象（CanvasRenderingContext2D 對象）  
  24.          *   width - 畫布的寬  
  25.          *   height - 畫布的高  
  26.          *   canvas.toDataURL(type) - 返回畫布數(shù)據(jù)，默認類型為 image/png  
  27.          *     type - 指定返回畫布數(shù)據(jù)的類型，比如可以指定為 image/jpeg，默認類型為 image/png  
  28.          *  
  29.          * CanvasRenderingContext2D - 畫布的 2D 上下文對象，其擁有多種繪制圖像的方法  
  30.          *   canvas - 上下文所對應(yīng)的畫布  
  31.          */  
  32.         var ctx = canvas.getContext('2d');  
  33.         alert(ctx.canvas.id);  
  34.         function demo() {  
  35.             ctx.fillRect(20, 20, 100, 100);  
  36.             alert("width: " + canvas.width.toString());  
  37.             alert("height: " + canvas.height.toString());  
  38.             alert(canvas.toDataURL("image/jpeg"));  
  39.             alert(canvas.toDataURL()); // image/png  
  40.             document.getElementById("img").src = canvas.toDataURL();  
  41.         }  
  42.     </script> 
  43. </body> 
  44. </html> 

2、繪制矩形 | canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
canvas/shape/rectangle.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>在 canvas 上繪制矩形的 demo</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="300" height="360" style="background-color: rgb(222, 222, 222)"> 
  8.         您的瀏覽器不支持 canvas 標(biāo)簽  
  9.     </canvas> 
  10.     <br/> 
  11.     <button type="button" onclick="drawIt();">在畫布上繪制一些矩形</button> 
  12.     <button type="button" onclick="clearIt();">清除畫布</button> 
  13.     <script type="text/javascript"> 
  14.         var canvas = document.getElementById('canvas')  
  15.         if (canvas.getContext) {  
  16.             alert("您的瀏覽器支持 canvas 標(biāo)簽");  
  17.         } else {  
  18.             alert("您的瀏覽器不支持 canvas 標(biāo)簽");  
  19.         }  
  20.         /*  
  21.          * canvas.getContext("2d") - 獲取畫布標(biāo)簽上的 2D 上下文對象（HTML DOM CanvasRenderingContext2D 對象），其擁有多種繪制圖像的方法。  
  22.          */  
  23.         var ctx = canvas.getContext('2d');  
  24.         function drawIt() {  
  25.             clearIt();  
  26.             /*  
  27.              * context.fillRect(x, y, w, h) - 繪制一個有填充色的矩形，默認填充色為 0x000000  
  28.              *   x - 矩形左上角的 x 坐標(biāo)  
  29.              *   y - 矩形左上角的 y 坐標(biāo)  
  30.              *   w - 矩形的寬  
  31.              *   h - 矩形的高  
  32.              */  
  33.             ctx.fillRect(0, 0, 100, 100);  
  34.             /*  
  35.              * context.fillStyle - 指定填充色的顏色值  
  36.              *  
  37.              * 顏色值示例如下：  
  38.              *   Color Name - "green"  
  39.              *   #rgb - "#0f0"  
  40.              *   #rrggbb = "#00ff00" 
  41.              *   rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)  
  42.              *   rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)  
  43.              *   rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)  
  44.              *   rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)  
  45.              */  
  46.             ctx.fillStyle = "#0f0";  
  47.             ctx.fillRect(120, 0, 100, 50);  
  48.             /*  
  49.              * context.lineWidth - 筆劃的寬度，默認值是 1.0。  
  50.              *    注意看本 Demo，筆劃的寬度為 10，可以明顯的看出其中心線為筆劃的路徑，畫布外的圖像不予顯示  
  51.              * context.strokeStyle - 指定筆劃的顏色值  
  52.              * context.strokeRect(x, y, w, h) - 繪制一個不填充的矩形  
  53.              *   x - 矩形左上角的 x 坐標(biāo)  
  54.              *   y - 矩形左上角的 y 坐標(biāo)  
  55.              *   w - 矩形的寬  
  56.              *   h - 矩形的高  
  57.              */  
  58.             ctx.lineWidth = 10;  
  59.             ctx.strokeStyle = "rgb(0, 0, 0)";  
  60.             ctx.strokeRect(0, 120, 100, 100);  
  61.             // 繪制一個填充色半透明的矩形  
  62.             ctx.fillStyle = "rgba(0, 255, 0, 0.3)";  
  63.             ctx.fillRect(0, 240, 100, 100);  
  64.         }  
  65.         function clearIt() {  
  66.             /*  
  67.              * context.clearRect(x, y, w, h) - 將指定的矩形區(qū)域上的圖像全部清除  
  68.              */  
  69.             ctx.clearRect(0, 0, 300, 360);  
  70.             ctx.fillStyle = "Black";  
  71.             ctx.strokeStyle = "Black";  
  72.             ctx.lineWidth = 1;  
  73.         }  
  74.     </script> 
  75. </body> 
  76. </html> 

#p#

3、路徑方式繪制 - 弧線 | beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
canvas/shape/path/arc.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>以路徑的方式在 canvas 上繪制圓和弧的 demo</title> 
  5. </head> 
  6. <body> 
  7.     <img alt="" src="arcTo.png" /> 
  8.     <br/> 
  9.     <canvas id="canvas" width="260" height="360" style="background-color: rgb(222, 222, 222)"> 
  10.         您的瀏覽器不支持 canvas 標(biāo)簽  
  11.     </canvas> 
  12.     <br /> 
  13.     <button type="button" onclick="drawIt();">在畫布上繪制一些圓和弧</button> 
  14.     <button type="button" onclick="clearIt();">清除畫布</button> 
  15.     <script type="text/javascript"> 
  16.         var ctx = document.getElementById('canvas').getContext('2d');  
  17.         function drawIt() {  
  18.             clearIt();  
  19.             /*  
  20.              * context.beginPath() - 準(zhǔn)備繪制一條路徑  
  21.              *  
  22.              * context.arc(x, y, radius, startRadian, endRadian, anticlockwise) - 根據(jù)指定的參數(shù)繪制一條弧線  
  23.              *   x - 弧線的中心點的 x 坐標(biāo)  
  24.              *   y - 弧線的中心點的 x 坐標(biāo)  
  25.              *   radius - 弧線的半徑  
  26.              *   startRadian - 弧線起始點的弧度（以 X 軸正半軸的三點鐘方向為弧度 0）  
  27.              *   endRadian - 弧線結(jié)束點的弧度（以 X 軸正半軸的三點鐘方向為弧度 0）  
  28.              *   anticlockwise - 是否以逆時針方向繪制路徑  
  29.              *  
  30.              * context.fill() - 使用當(dāng)前的顏色或漸變色等來填充當(dāng)前路徑的內(nèi)部  
  31.              *  
  32.              * context.stroke() - 繪制當(dāng)前路徑  
  33.              *  
  34.              * context.isPointInPath(x, y) - 判斷指定的點是否在當(dāng)前路徑內(nèi)  
  35.              */             
  36.             // 繪制一個以黑色為填充色的圓形  
  37.             ctx.beginPath();  
  38.             ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);  
  39.             ctx.fill();  
  40.             alert(ctx.isPointInPath(50, 50));  
  41.             // 繪制一個以半透明藍色為填充色的圓形  
  42.             ctx.beginPath();  
  43.             ctx.fillStyle = "rgba(0, 0, 255, 0.5)";  
  44.             ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);  
  45.             ctx.fill();  
  46.             ctx.lineWidth = 10;  
  47.             // 演示按順時針方向繪制弧線（以 X 軸正半軸的三點鐘方向為弧度 0）  
  48.             ctx.beginPath();  
  49.             ctx.strokeStyle = "rgb(0, 255, 0)";  
  50.             ctx.arc(50, 150, 50, 0, 1.5 * Math.PI, false);  
  51.             ctx.stroke();  
  52.             // 演示按逆時針方向繪制弧線（以 X 軸正半軸的三點鐘方向為弧度 0）  
  53.             ctx.beginPath();  
  54.             ctx.strokeStyle = "rgb(0, 255, 0)";  
  55.             ctx.arc(150, 150, 50, 0, 1.5 * Math.PI, true);  
  56.             ctx.stroke();  
  57.  
  58.             /*  
  59.              * context.moveTo(x, y) - 新開一個路徑，并指定路徑的起點  
  60.              *  
  61.              * context.arcTo(x1, y1, x2, y2, radius) - 通過指定切點和半徑的方式繪制弧線。  
  62.              *   x1, y1 - 路徑當(dāng)前點與 (x1, y1) 的連接線為弧線起點的切線。詳見圖片 arcTo.png  
  63.              *   x2, y2 - (x1, y1) 與 (x2, y2) 的連接線為弧線終點的切線，此切點即為弧線的終點。詳見圖片 arcTo.png  
  64.              *   radius - 弧線半徑  
  65.              */  
  66.             ctx.beginPath();  
  67.             ctx.strokeStyle = "rgb(0, 0, 255)";  
  68.             ctx.moveTo(50, 250);  
  69.             ctx.arcTo(150, 250, 150, 1000, 50);  
  70.             ctx.stroke();  
  71.         }  
  72.         function clearIt() {  
  73.             ctx.clearRect(0, 0, 260, 360);  
  74.             ctx.fillStyle = "Black";  
  75.             ctx.strokeStyle = "Black";  
  76.             ctx.lineWidth = 1;  
  77.         }  
  78.     </script> 
  79. </body> 
  80. </html> 

4、路徑方式繪制 - 曲線 | quadraticCurveTo(), bezierCurveTo()
canvas/shape/path/curve.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>以路徑的方式在 canvas 上繪制曲線的 demo</title> 
  5. </head> 
  6. <body> 
  7.     <img alt="" src="curve.png" /> 
  8.     <br/> 
  9.     <img alt="" src="curve_quadratic.gif" /> 
  10.     <br/> 
  11.     <img alt="" src="curve_bezier.gif" /> 
  12.     <br/> 
  13.     <canvas id="canvas" width="260" height="300" style="background-color: rgb(222, 222, 222)"> 
  14.         您的瀏覽器不支持 canvas 標(biāo)簽  
  15.     </canvas> 
  16.     <br/> 
  17.     <button type="button" onclick="drawIt();">在畫布上繪制一些曲線</button> 
  18.     <button type="button" onclick="clearIt();">清除畫布</button> 
  19.     <script type="text/javascript"> 
  20.         var ctx = document.getElementById('canvas').getContext('2d');  
  21.         function drawIt() {  
  22.             clearIt();  
  23.             /*  
  24.              * context.quadraticCurveTo(cpX, cpY, x, y) - 以當(dāng)前點為曲線起點，按指定的參數(shù)繪制二次方貝塞爾曲線。見圖 curve.png, curve_bezier.gif  
  25.              *   cpX - 控制點的 x 軸坐標(biāo)  
  26.              *   cpY - 控制點的 y 軸坐標(biāo)  
  27.              *   x - 曲線終點的 x 軸坐標(biāo)  
  28.              *   y - 曲線終點的 y 軸坐標(biāo)  
  29.              */  
  30.             ctx.beginPath();  
  31.             ctx.moveTo(20, 100);  
  32.             ctx.quadraticCurveTo(40, 20, 180, 100);  
  33.             ctx.stroke();  
  34.             /*  
  35.              * context.bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y) - 以當(dāng)前點為曲線起點，按指定的參數(shù)繪制三次方貝塞爾曲線。見圖 curve.png, curve_quadratic.gif  
  36.              *   cpX1 - 和曲線起點相關(guān)連的控制點的 x 軸坐標(biāo)  
  37.              *   cpY1 - 和曲線起點相關(guān)連的控制點的 y 軸坐標(biāo)  
  38.              *   cpX2 - 和曲線終點相關(guān)連的控制點的 x 軸坐標(biāo)  
  39.              *   cpY2 - 和曲線終點相關(guān)連的控制點的 y 軸坐標(biāo)  
  40.              *   x - 曲線終點的 x 軸坐標(biāo)  
  41.              *   y - 曲線終點的 y 軸坐標(biāo)  
  42.              */  
  43.             ctx.beginPath();  
  44.             ctx.moveTo(20, 200);  
  45.             ctx.bezierCurveTo(0, 160, 160, 120, 180, 200);  
  46.             ctx.stroke();  
  47.         }  
  48.         function clearIt() {  
  49.             ctx.clearRect(0, 0, 260, 300);  
  50.         }  
  51.     </script> 
  52. </body> 
  53. </html> 

#p#

5、路徑方式繪制 - 直線 | lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()
canvas/shape/path/line.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>以路徑的方式在 canvas 上繪制直線的 demo</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="340" height="300" style="background-color: rgb(222, 222, 222)"> 
  8.         您的瀏覽器不支持 canvas 標(biāo)簽  
  9.     </canvas> 
  10.     <br/> 
  11.     <button type="button" onclick="drawIt();">在畫布上繪制一些直線</button> 
  12.     <button type="button" onclick="clearIt();">清除畫布</button> 
  13.     <script type="text/javascript"> 
  14.         var ctx = document.getElementById('canvas').getContext('2d');  
  15.         function drawIt() {  
  16.             clearIt();  
  17.             ctx.strokeStyle = 'Green';  
  18.             /*  
  19.              * context.lineWidth - 筆劃的寬度，默認值是 1.0  
  20.              */  
  21.             ctx.lineWidth = 10;              
  22.             /*  
  23.             * context.beginPath() - 準(zhǔn)備繪制一條路徑  
  24.             * context.stroke() - 繪制當(dāng)前路徑  
  25.             * context.moveTo(x, y) - 新開一個路徑，并指定路徑的起點  
  26.             * context.lineTo(x, y) - 將當(dāng)前點與指定的點用一條筆直的路徑連接起來  
  27.             */  
  28.             ctx.beginPath();  
  29.             ctx.moveTo(20, 20);  
  30.             ctx.lineTo(200, 20);  
  31.             ctx.stroke();  
  32.             /*  
  33.              * context.lineCap - 指定線條末端的繪制方式  
  34.              *   round - 線條末端有一個半圓形線帽  
  35.              *   square - 線條末端有一個矩形線帽  
  36.              *   butt - 線條末端無任何特殊處理，此值為默認值  
  37.              */  
  38.             ctx.beginPath();  
  39.             ctx.lineCap = "round";  
  40.             ctx.moveTo(20, 40);  
  41.             ctx.lineTo(200, 40);  
  42.             ctx.stroke();  
  43.             ctx.beginPath();  
  44.             ctx.lineCap = "square";  
  45.             ctx.moveTo(20, 60);  
  46.             ctx.lineTo(200, 60);  
  47.             ctx.stroke();  
  48.             ctx.beginPath();  
  49.             ctx.lineCap = "butt";  
  50.             ctx.moveTo(20, 80);  
  51.             ctx.lineTo(200, 80);  
  52.             ctx.stroke();  
  53.             ctx.lineWidth = 20;              
  54.             /*  
  55.              * context.lineJoin - 指定兩條線段的連接方式  
  56.              *   bevel - 兩條線段的連接點用一個三角形填充  
  57.              *   round - 兩條線段的連接點用一個弧形填充  
  58.              *   miter - 兩條線段以斜接的方式連接，默認值  
  59.              */  
  60.             ctx.beginPath();  
  61.             ctx.lineJoin = "bevel";  
  62.             ctx.moveTo(20, 120);  
  63.             ctx.lineTo(60, 120);  
  64.             ctx.lineTo(20, 160);  
  65.             ctx.stroke();  
  66.             ctx.beginPath();  
  67.             ctx.lineJoin = "round";  
  68.             ctx.moveTo(100, 120);  
  69.             ctx.lineTo(140, 120);  
  70.             ctx.lineTo(100, 160);  
  71.             ctx.stroke();  
  72.             ctx.beginPath();  
  73.             ctx.lineJoin = "miter";  
  74.             ctx.moveTo(180, 120);  
  75.             ctx.lineTo(220, 120);  
  76.             ctx.lineTo(180, 160);  
  77.             ctx.stroke();  
  78.             /*  
  79.              * context.miterLimit - 當(dāng) lineJoin 為 miter 方式時，此值表示斜接長度與筆劃寬度之間的所允許的最大比值，默認值為 10  
  80.              */  
  81.             ctx.miterLimit = 2;  
  82.             ctx.beginPath();  
  83.             ctx.lineJoin = "miter";  
  84.             ctx.moveTo(260, 120);  
  85.             ctx.lineTo(300, 120);  
  86.             ctx.lineTo(260, 160);  
  87.             ctx.stroke();  
  88.             ctx.lineWidth = 2;  
  89.             /*  
  90.              * context.closePath() - 如果當(dāng)前路徑是打開的則關(guān)閉它  
  91.              */  
  92.             ctx.beginPath();  
  93.             ctx.moveTo(20, 180);  
  94.             ctx.lineTo(180, 180);  
  95.             ctx.lineTo(180, 280);  
  96.             ctx.closePath(); // 關(guān)閉打開的路徑  
  97.             ctx.stroke();  
  98.         }  
  99.         function clearIt() {  
  100.             ctx.clearRect(0, 0, 340, 300);  
  101.             ctx.fillStyle = "Black";  
  102.             ctx.strokeStyle = "Black";  
  103.             ctx.lineWidth = 1;  
  104.         }  
  105.     </script> 
  106. </body> 
  107. </html> 

6、路徑方式繪制 - 矩形 | rect()
canvas/shape/path/rect.html

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>以路徑的方式在 canvas 上繪制矩形的 demo</title> 
  5. </head> 
  6. <body> 
  7.     <canvas id="canvas" width="300" height="360" style="background-color: rgb(222, 222, 222)"> 
  8.         您的瀏覽器不支持 canvas 標(biāo)簽  
  9.     </canvas> 
  10.     <br/> 
  11.     <button type="button" onclick="drawIt();">在畫布上繪制矩形</button> 
  12.     <button type="button" onclick="clearIt();">清除畫布</button> 
  13.     <script type="text/javascript"> 
  14.         var ctx = document.getElementById('canvas').getContext('2d');  
  15.         function drawIt() {  
  16.             clearIt();  
  17.             ctx.strokeStyle = "Black";  
  18.             /*  
  19.              * context.rect(x, y, w, h) - 以路徑的方式繪制一個矩形  
  20.              *   x - 矩形左上角的 x 坐標(biāo)  
  21.              *   y - 矩形左上角的 y 坐標(biāo)  
  22.              *   w - 矩形的寬  
  23.              *   h - 矩形的高  
  24.              */  
  25.             ctx.beginPath();  
  26.             ctx.rect(20, 20, 260, 320);  
  27.             ctx.stroke();  
  28.         }  
  29.         function clearIt() {  
  30.             ctx.clearRect(0, 0, 300, 360);  
  31.         }  
  32.     </script> 
  33. </body> 
  34. </html> 

[源碼下載]

原文鏈接：http://www.cnblogs.com/webabcd/archive/2012/02/13/2348813.html

責(zé)任編輯：張偉 來源： webabcd的博客
HTML5
相關(guān)推薦

2012-05-30 14:51:09

HTML5

2012-05-31 10:57:06

HTML5

2012-05-30 13:49:52

HTML5

2012-05-30 13:26:12

HTML5

2012-05-31 09:54:13

HTML5

2012-05-31 09:35:43

HTML5

2012-05-30 15:17:54

HTML5

2012-05-30 11:11:42

HTML5

2012-05-30 13:17:46

HTML5

2012-05-30 10:52:09

HTML5

2009-11-18 13:30:37

Oracle Sequ

2009-11-17 17:31:58

Oracle COMM

2022-02-25 08:54:50

setState異步React

2021-03-16 08:54:35

AQSAbstractQueJava

2011-07-04 10:39:57

Web

2013-11-14 15:53:53

AndroidAudioAudioFlinge

2017-06-06 15:34:41

物聯(lián)網(wǎng)數(shù)據(jù)庫壓縮

2017-06-05 14:50:33

大數(shù)據(jù)數(shù)據(jù)庫壓縮

2017-07-02 18:04:53

塊加密算法AES算法

2019-01-07 15:29:07

HadoopYarn架構(gòu)調(diào)度器
點贊
收藏

51CTO技術(shù)棧公眾號