Canvas入门，点，线，多边形的绘制。

最新推荐文章于 2024-05-10 10:10:22 发布

四阶张量

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量2.3k

点赞数 5

分类专栏：可视化文章标签： canvas html5 js 可视化 javascript

本文链接：https://blog.csdn.net/qq_45549336/article/details/106678674

版权

可视化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、canvas简介

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JS操作的位图（bitmap）。Canvas 对象表示一个HTML画布元素。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作

二、Canvas基础入门

说明：看代码注释！！！看代码注释！！！看代码注释！！！

1、使用入口

必须指定画布的id，width与height是画布宽高，不赋值时候，有默认值。

<canvas id="tutorial" width="600" height="700"></canvas>

2、案例

说明：在画布中是有一个以画布左上点为起点，竖直向下为y轴正方向，水平向左为x轴正方向，且必定通过画布id获得画布的dom，通过dom获取2d上下文对象

上代码，可以直接复制，然后对比注释看

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--必须是id，不能是class-->
    <canvas id="tutorial" width="600" height="700"></canvas>
    <script>
        //获取dom元素
        const canvas = document.getElementById('tutorial');
        //获取对象,这里是获得 2d 上下文对象
        const ctx = canvas.getContext('2d');

        //绘制矩形
        ctx.fillStyle = 'red';//填充红色
        ctx.fillRect(0, 0, 50, 50);//绘制区域坐标（x轴起点，y轴起点，宽度，高度）
        ctx.clearRect(10, 10, 20, 20)//清空这个区域（x轴起点，y轴起点，宽度，高度）

        //绘制线段
        ctx.beginPath();//开始绘制
        ctx.lineWidth = 6;
        ctx.strokeStyle = 'blue';
        ctx.moveTo(100, 100);//坐标起点
        //线的端点是圆，还可以是butt(正方)，square(正方，但是追加一段长为线段厚度一半的矩形区域)
        ctx.lineCap = 'round';
        ctx.lineTo(250, 100);//终点,或者理解为下一个点
        ctx.stroke();//进行绘制，这里也是打断上下文渲染，这样下面重新赋值的线段宽度和颜色才会生效
        //ctx.closePath();这个是关闭路径绘制，大家放开这行代码看效果就知道，如果还不想明白，请继续放开下一行代码
        //ctx.moveTo(400, 200);
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'red';
        ctx.lineJoin = 'bevel'//连接时候的样式，另外2个值miter，round
        ctx.lineTo(350, 500);
        ctx.stroke();//进行绘制

        //绘制点
        ctx.beginPath();//开始绘制
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.moveTo(300, 200);//坐标起点
        ctx.lineTo(301, 201);//终点,或者理解为下一个点
        ctx.stroke();//进行绘制

        //绘制圆形
        //开始绘制，是为了说明这是一个与上面无关的新绘制
        //这样才能保证，线不连接，上一个的样式对后面的无影响
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'yellow';
        //(x,y,半径,开始角度，结束角度)，通过这个可以绘制出曲线
        ctx.arc(200, 200, 50, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fill();

    </script>
</body>

</html>

3、结果图

在这里插入图片描述

三、注意事项

1、先在body中写入canvas标签，注意标签只有width与height属性，当不给标签设置widht、height属性时，则默认width为300px、height为150px。
2、canvas是画布，按下浏览器F12后，你只能选中canvas整体的画布，是无法选中你绘制的图形，它们不是dom元素。
3、浏览器自带着padding，没有清除浏览器的padding时候，坐标（0，0）不在屏幕的最左上位置。

四阶张量

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Canvas入门，点，线，多边形的绘制。

一、canvas简介Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JS操作的位图（bitmap）。Canvas 对象表示一个HTML画布元素。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作二、Canvas基础入门说明：看代码注释！！！看代码注释！！！看代码注释！！！1、使用入口必须指定画布的id，width与height是画布宽高，不赋值时候，有默认值。<canvas id="tutorial"
复制链接

扫一扫