html5中使用Canvas畫線和面的實例-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)建站不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都做網(wǎng)站、網(wǎng)站制作質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠為行業(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式營銷型網(wǎng)站建設(shè)需求，讓再小的品牌網(wǎng)站制作也能產(chǎn)生價值！

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畫線和面的實例”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：html5中使用Canvas畫線和面的實例-創(chuàng)新互聯(lián)
分享URL：http://bm7419.com/article6/djhoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、微信公眾號、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)站改版、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容