Canvas 是指在瀏覽器頁面上繪製影像。 HTML 中的 Canvas 標籤就是這樣一種元素,它為 HTML 提供點陣圖表面,就像由像素圖組成的空白畫布,可能包含兩種以上的顏色可供使用。 元素用於借助腳本語言(例如 JavaScript)在網頁上建立圖形圖像。 元素建立一個空白畫布來使用,就像圖形容器一樣,但您需要使用 javascript 進行實際建立、繪製圖形、圖像等。
最初,HTML不支援canvas,但後來HTML5引進了這個canvas功能。這個 HTML5 中的標籤用於透過 JavaScript 腳本繪製圖形。我們也可以用這個canvas標籤來繪製圖像。可以使用動畫、圖形、照片處理、資料視覺化使畫布元素變得美觀。這項畫布功能最初是透過 Apple 公司在 Web Kit 中引入的。
即時範例:與其編寫獨立程式碼來實現每個形狀的圖形,否則它將成為處理器的過載。因此,為了克服這種情況,開發人員在 HTML 中提出了 canvas 標籤。更少的程式碼可以給我們一個精確的圖形動畫形狀。
HTML 中的畫布功能是透過應用
<canvas> //specify some properties inside canvas tag because different shape have different properties like width="" ,height="" , style=”” //code </canvas> <script> //script code for animations and graphics </script>
這是範例:
矩形內的圓形與畫布範例:
代碼:
<!DOCTYPE html> <html> <head> <title> Canvas in HTM5 </title> <!--CSS Styles--> <style> h1 { color: green; text-align:center; } p { color:brown; border: solid 2px blue; font-size: 25px; } </style> </head> <body> <h1> Circle Shape inside Rectangle Shape </h1> <canvas id="rectangleCircle" width="300" height="200" style="border:2px solid red;"> </canvas> <script> var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape creatingCircle.beginPath();//circle shape begin creatingCircle.arc(150,100,80,4,4*Math.PI);//circle x, y and size of the circle creatingCircle.stroke();//stroke of the circle </script> </body> </html>
輸出:
圓形內的文字與畫布範例:
代碼:
/strong><!DOCTYPE html> <html> <head> <title> Canvas in HTM5 </title> <!--CSS Styles--> <style> h1 { color: red; text-align:center; } p { color:green; border: solid 2px maroon; font-size: 25px; } </style> </head> <body> <h1> Text Inside the Circle Shape </h1> <canvas id="rectangleCircle" width="300" height="200" style="border:2px solid navy;"> </canvas> <script> var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape creatingCircle.beginPath();//circle shape begin creatingCircle.arc(150,100,100,4,4*Math.PI);//circle x, y and size of the circle creatingCircle.stroke();//stroke of the circle creatingCircle.font = "30px Arial";//Creating a font creatingCircle.strokeText("EDUCBA",100,90);// Creating text inside the circle </script> </body> </html>
輸出:
用 Canvas 畫線範例:
代碼:
<!DOCTYPE html> <html> <head> <title> Canvas in HTM5 </title> <!--CSS Styles--> <style> h1 { color: blue; text-align:center; } p { color:red; border: solid 2px orange; font-size: 25px; } </style> </head> <body> <h1> Draw the Line with Canvas </h1> <canvas id="lineID" width="400" height="400" style="border:2px solid orange;"> </canvas> <script> var line = document.getElementById("lineID");// with id drawing line shape with script var lineCreate = line.getContext("2d");//get the line type from 2d shape lineCreate.moveTo(0,0);//move the line lineCreate.lineTo(400,400);//Where to where line has to move lineCreate.stroke();//line stroke </script> </body> </html>
輸出:
畫布上的三角形範例:
代碼:
<!DOCTYPE html> <html> <head> <title> Canvas in HTM5 </title> <!--CSS Styles--> <style> h1 { color: fuchsia; text-align:center; } p { color:blue; border: solid 2px skyblue; font-size: 25px; } </style> </head> <body> <h1> Triangle Shape with Canvas </h1> <canvas id="triangleID" width="300" height="300" style="border:2px solid skyblue;"> </canvas> <script> var canvas = document.getElementById('triangleID');// with id drawing traingles shape with script if (canvas.getContext) { var traingle = canvas.getContext('2d');//get the traingels type from 2d shape //Creating the traingle traingle.beginPath(); traingle.moveTo(25,25); traingle.lineTo(105,25); traingle.lineTo(25,105); traingle.fill(); // Triangle can be stroked with below fuctions traingle.beginPath(); traingle.moveTo(125,125); traingle.lineTo(125,45); traingle.lineTo(45,125); traingle.closePath(); traingle.stroke(); } else { alert('Your browser does ot support this feature');//alert the user document.write('Your browser does ot support this feature');//display the output } </script> </body> </html>
輸出:
HTML5版本中引入了canvas標籤。 canvas 和 JavaScript 程式碼都可以提供您使用 canvas 標籤繪製的準確形狀。我們可以畫圓形、長方形、直線、三角形等
以上是HTML 中的畫布標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!