canvas绘制矩形和线

最新推荐文章于 2024-08-14 10:08:54 发布

Ian1025

最新推荐文章于 2024-08-14 10:08:54 发布

阅读量462

点赞数 9

分类专栏： GIS 文章标签： canva可画 javascript 开发语言 json 前端前端框架

本文链接：https://blog.csdn.net/Ian1025/article/details/134764789

版权

GIS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.设置canvas元素 -->
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
        //2.获取canvas
        const canvas =document.getElementById("canvas");
        //3.getContext()返回一个对象，对象包含绘制图形的方法和属性
        const ctx = canvas.getContext("2d");
        //4.执行绘制fillReact(x,y,widht,height)x,y
        ctx.fillRect(100,100,100,200);
        ctx.fillStyle="#333"

        //绘制线
        //moveTo绘制起点
        ctx.moveTo(10,10);
        //lineTo绘制终点
        ctx.lineTo(100,100);
        //执行绘制
        ctx.stokeStyle="#ff2d51";
        ctx.stroke();
       
    </script>
</body>
</html>