Canvas基础用法

_耀北

于 2024-09-04 15:41:53 发布

阅读量616

点赞数 6

文章标签： javascript canva可画

本文链接：https://blog.csdn.net/weixin_72288930/article/details/141895547

版权

<canvas> 是 HTML5 提供的一个用于绘图的元素，配合 JavaScript，可以绘制各种图形、文本和动画。

创建 Canvas 元素

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

• id: 为 <canvas> 元素设置一个唯一的标识符，方便 JavaScript 获取。

• width 和 height: 设置画布的宽度和高度，单位为像素。

• style: 可以通过 CSS 样式设置边框等样式属性。

2. 获取绘图上下文

canvas 本身只是一个容器，要在其中绘图，需要获取绘图上下文 (context)。常用的绘图上下文是 "2d"，即 2D 绘图环境。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

3. 绘制基本图形

绘制矩形

// 绘制实心矩形
ctx.fillStyle = "#FF0000"; // 设置填充颜色
ctx.fillRect(20, 20, 150, 100); // 绘制一个矩形 (x, y, width, height)

// 绘制空心矩形
ctx.strokeStyle = "#0000FF"; // 设置边框颜色
ctx.strokeRect(200, 20, 150, 100); // 绘制一个矩形

绘制路径

ctx.beginPath(); // 开始一条新的路径
ctx.moveTo(75, 50); // 移动画笔到起点 (x, y)
ctx.lineTo(100, 75); // 画一条直线到新点 (x, y)
ctx.lineTo(100, 25);
ctx.closePath(); // 闭合路径
ctx.stroke(); // 绘制路径

绘制圆形或弧形

ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2, false); // 绘制圆形 (x, y, radius, startAngle, endAngle, anticlockwise)
ctx.fillStyle = "#00FF00";
ctx.fill(); // 填充圆形
ctx.closePath();

绘制文本

ctx.font = "30px Arial"; // 设置字体
ctx.fillStyle = "black"; // 设置文字颜色
ctx.fillText("Hello Canvas", 50, 200); // 绘制实心文本 (text, x, y)

ctx.strokeText("Hello Canvas", 50, 250); // 绘制空心文本

绘制图像

const img = new Image();
img.src = 'your-image-url.jpg'; // 图片的路径
img.onload = function() {
    ctx.drawImage(img, 10, 10, 300, 200); // 在指定位置绘制图像 (x, y, width, height)
};

清除画布

ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个画布

绘制一个简单的例子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风景绘制</title>
</head>
<body>
    <canvas id="landscapeCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>

    <script>
        const canvas = document.getElementById('landscapeCanvas');
        const ctx = canvas.getContext('2d');

        // 绘制蓝天
        ctx.fillStyle = '#87CEEB';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制太阳
        ctx.beginPath();
        ctx.arc(700, 100, 50, 0, Math.PI * 2, false);
        ctx.fillStyle = '#FFD700';
        ctx.fill();
        ctx.closePath();

        // 绘制云朵
        function drawCloud(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, Math.PI * 2, false);
            ctx.arc(x + 30, y, 30, 0, Math.PI * 2, false);
            ctx.arc(x + 60, y, 20, 0, Math.PI * 2, false);
            ctx.arc(x + 20, y - 20, 25, 0, Math.PI * 2, false);
            ctx.arc(x + 40, y - 20, 25, 0, Math.PI * 2, false);
            ctx.fillStyle = '#FFFFFF';
            ctx.fill();
            ctx.closePath();
        }

        drawCloud(100, 100);
        drawCloud(400, 150);
        drawCloud(600, 80);

        // 绘制山丘
        function drawHill(x, y, width, height, color) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + width / 2, y - height);
            ctx.lineTo(x + width, y);
            ctx.closePath();
            ctx.fillStyle = color;
            ctx.fill();
        }

        drawHill(100, 400, 300, 200, '#556B2F');  // 山丘1
        drawHill(400, 450, 400, 250, '#6B8E23');  // 山丘2
        drawHill(0, 450, 200, 150, '#2E8B57');    // 山丘3

        // 绘制草地
        ctx.fillStyle = '#32CD32';
        ctx.fillRect(0, 450, canvas.width, 150);

        // 添加一些简单的草
        function drawGrass(x, y) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - 10, y - 20);
            ctx.lineTo(x + 10, y - 20);
            ctx.closePath();
            ctx.fillStyle = '#228B22';
            ctx.fill();
        }

        for (let i = 0; i < 30; i++) {
            drawGrass(Math.random() * canvas.width, 500 + Math.random() * 100);
        }
    </script>
</body>
</html>