如何在HTML5 Canvas中绘制矩形？

2024年10月20日 互联网
在HTML5 Canvas中使用fillRect()方法绘制矩形，设置起始坐标和宽度、高度。

HTML5 Canvas 是一个强大的工具，用于在网页上绘制图形，通过使用 JavaScript，可以动态地绘制各种形状、线条和图像，下面将详细介绍如何在 HTML5 Canvas 中绘制矩形，包括基本方法、属性设置以及一些示例代码。

基本方法

1、清除矩形区域：clearRect(double x, double y, double w, double h) 用于清除指定区域的像素，使其变为透明。

如何在HTML5 Canvas中绘制矩形？

2、描边矩形：strokeRect(double x, double y, double w, double h) 用于绘制矩形的边框。

3、填充矩形：fillRect(double x, double y, double w, double h) 用于填充矩形的内部。

基本属性

1、线宽：lineWidth 用于设置矩形边框的宽度。

2、颜色：strokeStyle 用于设置矩形边框的颜色，fillStyle 用于设置矩形内部的填充颜色。

实例教程

清除矩形区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>清除矩形区域</title>
</head>
<body>
    <canvas id="canvas" width="700" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.fillStyle = 'blue';
        context.fillRect(50, 50, 200, 200); // 先绘制一个蓝色的矩形
        context.clearRect(50, 50, 200, 200); // 清除刚刚绘制的矩形
    </script>
</body>
</html>

描边矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>描边矩形</title>
</head>
<body>
    <canvas id="canvas" width="700" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.strokeStyle = 'red';
        context.lineWidth = 10;
        context.strokeRect(50, 50, 200, 200); // 绘制一个红色的描边矩形
    </script>
</body>
</html>

填充矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>填充矩形</title>
</head>
<body>
    <canvas id="canvas" width="700" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.fillStyle = 'green';
        context.fillRect(50, 50, 200, 200); // 绘制一个绿色的填充矩形
    </script>
</body>
</html>

综合实例

以下是一个综合实例，展示了如何使用fillRect 和strokeRect 绘制两个矩形，并添加鼠标点击事件以清除画布内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>综合实例</title>
</head>
<body>
    <canvas id="canvas" width="700" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.lineJoin = 'round';
        context.lineWidth = 30;
        context.font = '24px Helvetica';
        context.fillText('点击任何处以擦除', 175, 40);
        context.strokeRect(75, 100, 200, 200); // 左边的描边矩形
        context.fillRect(325, 100, 200, 200); // 右边的填充矩形
        context.canvas.onmousedown = function (ev) {
            context.clearRect(0, 0, canvas.width, canvas.height); // 清除整个画布
        }
    </script>
</body>
</html>

FAQs

问题1：如何设置矩形边框的虚线样式？

答：可以通过设置context.setLineDash() 来实现虚线样式。

context.setLineDash([5, 15]); // 第一个参数为虚线的长度，第二个参数为间隔的长度

问题2：如何给矩形添加渐变色？

答：可以使用createLinearGradient() 或createRadialGradient() 方法创建渐变对象，然后将其赋值给fillStyle 或strokeStyle。

var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
context.fillStyle = gradient;
context.fillRect(50, 50, 200, 200); // 绘制一个线性渐变的矩形
最新文章