怎样创建一个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)环境.

posted on 2019-09-22 17:58  aisowe  阅读(2485)  评论(0)  编辑  收藏  举报

导航