怎樣創建一個canvas畫布環境

本文轉載自查看原文 2019-09-22 17:58 775 Canvas

1. 由於canvas畫布在網頁中, 所以需要在html中添加canvas標簽:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 創建一個寬300px, 高300px的畫布環境 -->
    <canvas id="c1" width="300" height="300"></canvas>
</body>
</html>

2. 我們需要控制這個畫布, 在畫布里面繪制圖形, 這時就需要通過js控制:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="c1" width="300" height="300"></canvas>
    <script>
        var canvas = document.getElementById("c1");
        var ctx = canvas.getContext("2d");
        ctx instanceof CanvasRenderingContext2D; // true
    </script>
</body>
</html>

完成了上面兩步以后就可以認為是初始化了一個畫布(canvas)環境.

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Particles.js基於Canvas畫布創建粒子原子顆粒效果將canvas畫布內容轉化為圖片（toDataURL()，創建url）利用H5中canvas畫布繪制一個時鍾(動態) js畫布組件(

) Selenium之Canvas畫布操作 Tkinter 之Canvas畫布 html5——canvas畫布【canvas】畫布畫圓 tkinter 畫布（Canvas）控件 CANVAS畫布與SVG的區別