首頁 >web前端 >H5教程 >html5中Canvas的使用--畫線與麵

html5中Canvas的使用--畫線與麵

零下一度原創: 2017-05-06 11:51:362051瀏覽

我們知道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中的元素，當沒有設定寬度和高度的時候，canvas會初始化寬度為300像素和高度為150像素。該元素可以使用CSS來定義大小；如果在繪製時圖像會伸縮以適應它的框架尺寸，那麼CSS的尺寸與初始畫布的比例不一致，會出現扭曲。

2.渲染上下文

canvas一開始是空白的。為了展示，首先腳本需要找到渲染上下文，然後在它的上面繪製。 5ba626b379994d53f7acf72a64f9b697 元素有一個做 getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。 getContext()只有一個參數，上下文的格式。對於2D圖像你可以使用 CanvasRenderingContext2D。

var canvas = document.getElementById(&#39;cv&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);

兼容性检查在不支持 <canvas> 标签的浏览器中如何展示替换内容。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：
var canvas = document.getElementById(&#39;tutorial&#39;);
if (canvas.getContext){
  var ctx = canvas.getContext(&#39;2d&#39;);
  // 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.畫一條線

同理，畫一條線也是呼叫ctx的方法：

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

CanvasRenderingContext2D.stroke() 是Canvas 2D API 使用非零環繞規則，根據目前的畫線樣式，繪製目前或已經存在的路徑的方法。
上面的程式碼中我們先繪製一條路徑，然後透過stroke方法用目前的樣式渲染這個路徑。

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

#3. php.cn原始html5影片教學

以上是html5中Canvas的使用--畫線與麵的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：分享一個用html5實現砲彈自由落體的實例程式碼下一篇：分享一個用html5實現砲彈自由落體的實例程式碼

看更多