html5中使用Canvas畫線和面的實例

發(fā)布時間：2021-01-30 15:35:33 來源：億速云閱讀：160 作者：小新欄目：web開發(fā)

這篇文章主要介紹了html5中使用Canvas畫線和面的實例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1.Html中的畫布

<!doctype html>
<html lang="en">
 <head>
  <title>Canvas 2D畫線和面</title>
 </head>
 <body>
  <canvas id="cv" width="150" height="150"></canvas>
 </body>
</html>

canvas是HTML5中的元素，當(dāng)沒有設(shè)置寬度和高度的時候，canvas會初始化寬度為300像素和高度為150像素。該元素可以使用CSS來定義大??；如果在繪制時圖像會伸縮以適應(yīng)它的框架尺寸，那么CSS的尺寸與初始畫布的比例不一致，會出現(xiàn)扭曲。

2.渲染上下文

canvas起初是空白的。為了展示，首先腳本需要找到渲染上下文，然后在它的上面繪制。<canvas> 元素有一個做 getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個參數(shù)，上下文的格式。對于2D圖像而言你可以使用 CanvasRenderingContext2D。

var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');

兼容性檢查在不支持 <canvas> 標(biāo)簽的瀏覽器中如何展示替換內(nèi)容。通過簡單的測試getContext()方法的存在，腳本可以檢查編程支持性。上面的代碼片段現(xiàn)在變成了這個樣子：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

3.畫一個方塊

獲得了context，就好像獲得了畫筆，這時我們在畫布上畫下一個方塊：

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);

CanvasRenderingContext2D.fillRect() 是Canvas 2D API 繪制填充矩形的方法。矩形的起點在 (x, y) 位置，矩形的尺寸是 width 和 height ，fillStyle 屬性決定矩形的樣式。

4.畫一條線

同理，畫一條線也是調(diào)用ctx的方法：

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100, 100);
ctx.stroke();

CanvasRenderingContext2D.stroke() 是 Canvas 2D API 使用非零環(huán)繞規(guī)則，根據(jù)當(dāng)前的畫線樣式，繪制當(dāng)前或已經(jīng)存在的路徑的方法。
上面的代碼中我們先繪制一條路徑，然后通過stroke方法用當(dāng)前的樣式把這個路徑渲染出來。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html5中使用Canvas畫線和面的實例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

html5中使用Canvas畫線和面的實例

1.Html中的畫布

2.渲染上下文

3.畫一個方塊

4.畫一條線

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽