如何使用HTML canvas來畫圖

時間 2019-11-21

標籤如何使用 html canvas 畫圖欄目 HTML 简体版

原文原文鏈接

將canvas添加到HTML中

<canvas>標籤自身只有兩個屬性: width, height. 兩者在沒有指定的時候（標籤內指定或者CSS指定）分別默認爲300 pixels和150 pixels.javascript

固然除此以外，canvas還有一個HTML的全局屬性——id屬性.html

<!DOCTYPE html>  <!--說明這是一個html頁面-->

<html lang="en">  <!--指明語言，zh中文，fr法語，de德語，it意大利語，ja日語，ko韓語-->
    <head>
        <meta charset="UTF-8">  <!--說明字符編碼模式，放在head中-->
        <script type="text/javascript" src="xxxx"></script>  <!--建議將javascript插入到head中-->
        <title>page_name</title>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="500">瀏覽器不支持canvas</canvas>
    </body>
</html>

書寫canvas標籤還有一點切記：canvas的結束標籤不能夠省略！java

canvas的支持性

並非每一個瀏覽器都支持canvas標籤，除了要檢查瀏覽器的支持性外，還要設置好在不支持狀況下canvas標籤的替換內容（用以提示用戶信息或者乾脆建議用戶將瀏覽器升級到最新版本）web

<canvas id="mycanvas1" width="150" width="150">
    <!--這裏的圖片就是在瀏覽器不支持canvas的時候的替換內容-->
    <img src="..." width="150" height="150" alt=""/>  
</canvas>

下面是如何經過Javascript來檢測瀏覽器是否支持canvas標籤.canvas

if(canvas.getContext){
    var ctx = canvas.getContext('2d');
    //continue drawing
}else{
    //canvas-unsupported code here
}

最後的準備工做

準備工做到這裏尚未結束，還必須使用 getContext(contextId) 來獲取canvas標籤的渲染上下文，經過這個上下文方能夠調用各類繪畫函數.咱們不妨將渲染上下文想象成一個畫筆，只有得到畫筆咱們才能進行繪畫.瀏覽器

這裏的contextId有兩種取值："2d"和"experimental-webgl". 平時我暫且使用前者就行了，它會返回一個CanvasRenderingContext2D對象.函數

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

開始繪畫

canvas就是一個畫布，標籤的大小就是畫布的大小。咱們經過座標來定位並在這張畫布上繪畫。繪畫以前canvas是空的，畫布以左上角爲原點（0,0），向右和向下爲正方向。字體

繪畫以前，先蘸取畫筆的顏色.webgl

//蘸取畫刷顏色
context.fillStyle = "#ffffaa";

而後即可以進行繪畫.編碼

最簡單的繪畫從畫文本開始，沒錯，咱們把文字的當作最簡單的圖形.

//設置字體
context.font = "20px Sans-Serif";
//畫一個文本
context.fillText("Hello World!", 195, 190);

在canvas中只有一種圖形咱們能夠直接經過調用函數就能夠繪畫出來，那就是矩形。這也就意味着，其他全部的圖形，咱們都須要經過繪製路徑來拼成咱們想要的圖形，諸如三角形、梯形等等.

fillRect(x, y, width, height) 繪畫實心矩形

strokeRect(x, y, width, height) 繪畫空心矩形

clearRect(x, y, width, height) 擦除矩形範圍內的全部的像素點

//畫一個矩形
context.fillRect(0, 0, 500, 300);
//畫一個文本
context.fillText("Hello World!", 195, 190);

//設置字體
context.font = "20px Sans-Serif";

//設置字體的垂直對齊方式
context.textBaseline = "top";