使用Canvas绘制矩形

开始飞翔的菜鸟

于 2024-03-27 21:00:16 发布

阅读量1.1k

点赞数 22

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/c_nwe_one/article/details/137079751

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用Canvas绘制矩形

文章目录

使用Canvas绘制矩形
@[TOC](文章目录)

前言
一、使用canvas绘制一个矩形
二、使用鼠标绘制矩形
三，使用鼠标绘制多个矩形

前言

Canvas 是一种基于矢量图形的可编程图形元素，允许Web开发者使用JavaScript语言在网页上动态创建和操作图形、图像、图表和其他视觉内容

一、使用canvas绘制一个矩形

首先html代码

<canvas id="canvas " width="300" height="300"></canvas>

然后是css代码

canvas {
     /** 设置画布的边框颜色  */
     border: 1px solid black; 
}

然后编写js代码

function draw() {
      var canvas = document.getElementById('canvas');
      if (!canvas.getContext) return;
      var ctx = canvas.getContext("2d") 
      ctx.fillStyle = 'red';
      ctx.fillRect(50, 50, 200, 100);
}
draw();

canvas.getContext(“2d”)
该方法会返回一个 CanvasRenderingContext2D 对象
这个对象包含了一系列的属性和方法，它们允许开发者在Canvas上绘制线条、形状、文本、图像以及执行颜色填充、描边、阴影设置等各种2D图形操作。

完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        canvas {
            /** 设置画布的边框颜色  */
            border: 1px solid black;         }
    </style>
</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas>

    <script>
        function draw() {
            var canvas = document.getElementById('canvas');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = 'red';
            ctx.fillRect(50, 50, 200, 100);
        }
        draw();
    </script>
</body>

</html>

5.实现效果
效果图片

二、使用鼠标绘制矩形

通过前面的内容，我们知道了证明使用canvas绘制一个矩形，那么现在我们来使用鼠标绘制一个矩形吧

html和css代码和上面的一样
完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        canvas {
            /** 设置画布的边框颜色  */
            border: 1px solid black;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas>

    <script>
        // 获取Canvas元素
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 初始化鼠标按下坐标与是否正在绘制标志
        const isDrawing = false;
        let startX, startY;

        // 添加鼠标按下事件监听器
        canvas.addEventListener('mousedown', function (event) {
            isDrawing = true;
            // 记录鼠标按下位置
            startX = event.clientX - canvas.offsetLeft;
            startY = event.clientY - canvas.offsetTop;
            console.log("canvas.offsetLeft: ", canvas.offsetLeft + " canvas.offsetTop: ", canvas.offsetTop);
        });

        // 添加鼠标移动事件监听器
        canvas.addEventListener('mousemove', function (event) {
            if (isDrawing) {
                // 清除上次绘制的矩形,不清除移动的时候会导致矩形叠加
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                // 计算鼠标当前位置与起始位置之间的宽度和高度
                const endX = event.clientX - canvas.offsetLeft;
                const endY = event.clientY - canvas.offsetTop;

                // 绘制矩形
                ctx.strokeRect(startX, startY, endX - startX, endY - startY);
            }
        });

        // 添加鼠标抬起事件监听器
        canvas.addEventListener('mouseup', function () {
            if (isDrawing) {
                // 鼠标抬起时清除并重新绘制最终的矩形，不跟随鼠标移动
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.strokeRect(startX, startY, event.clientX - startX - canvas.offsetLeft, event.clientY - startY - canvas.offsetTop);

                // 结束绘制
                isDrawing = false;
            }
        });

        // 添加鼠标离开画布事件监听器，确保鼠标离开时也会结束绘制
        canvas.addEventListener('mouseleave', function () {
            if (isDrawing) {
                isDrawing = false;
            }
        });
    </script>
</body>

</html>

三，使用鼠标绘制多个矩形

完成代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用鼠标绘制多个矩形</title>
    <style>
        canvas {
            /** 设置画布的边框颜色  */
            border: 1px solid black;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        let isDrawing = false;
        let currentRect = null;
        // 存储所有的矩形
        const rectangles = [];

        // 侦听mousedown事件开始绘制矩形
        canvas.addEventListener('mousedown', function (event) {
            isDrawing = true;
            const rectStart = getCursorPosition(event);
            currentRect = { x: rectStart.x, y: rectStart.y, startX: rectStart.x, startY: rectStart.y };
        });

        // 侦听mousemove事件更新当前绘制矩形的尺寸
        canvas.addEventListener('mousemove', function (event) {
            if (isDrawing) {
                const rectEnd = getCursorPosition(event);
                currentRect.width = Math.abs(rectEnd.x - currentRect.startX);
                currentRect.height = Math.abs(rectEnd.y - currentRect.startY);
                if (rectEnd.x < currentRect.startX) currentRect.x = rectEnd.x;
                if (rectEnd.y < currentRect.startY) currentRect.y = rectEnd.y;
                redraw();
            }
        });

        // 侦听mouseup事件结束绘制并将矩形添加到数组中
        canvas.addEventListener('mouseup', function (event) {
            if (isDrawing) {
                isDrawing = false;
                rectangles.push(currentRect);
                currentRect = null;
                redraw();
            }
        });

        // 获取鼠标在canvas上的坐标
        function getCursorPosition(event) {
            const rect = canvas.getBoundingClientRect();
            return { x: event.clientX - rect.left, y: event.clientY - rect.top };
        }

        // 绘制单个矩形
        function drawRect(x, y, width, height) {
            context.strokeRect(x, y, width, height); 
        }

        // 清除画布并重新绘制所有矩形
        function redraw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            for (let rect of rectangles) {
                drawRect(rect.x, rect.y, rect.width, rect.height);
            }
            if (currentRect) drawRect(currentRect.x, currentRect.y, currentRect.width, currentRect.height);
        }
    </script>
</body>

</html>