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

零下一度

發布： 2017-05-06 11:51:36

原創

2003 人瀏覽過

我們知道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一開始是空白的。為了展示，首先腳本需要找到渲染上下文，然後在它的上面繪製。

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中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

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

1.Html中的畫布

2.渲染上下文

3.畫一個方塊

4.畫一條線