特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

怎样创建一个canvas画布环境

来源：互联网收集：自由互联发布时间：2021-06-12

1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Document / title / head body !-- 创建一个宽300px, 高300px的画布环境 -- canvas id ="c1" w

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)环境.

上一篇：WebApi简介
下一篇：基于Web的网上物流系统

怎样创建一个canvas画布环境

相关文章