怎么使用JavaScript操作Canvas绘制图形？-js教程-PHP中文网

怎么使用JavaScript操作Canvas绘制图形？

狼影

发布： 2025-09-20 13:54:02

原创

840人浏览过

首先通过HTML创建canvas元素并用JavaScript获取其2D渲染上下文，接着利用ctx的方法绘制图形：先设置fillStyle为blue并调用fillRect绘制填充矩形，再设置strokeStyle为red和lineWidth为3后调用strokeRect绘制边框矩形。

怎么使用javascript操作canvas绘制图形？

使用JavaScript操作Canvas绘制图形，核心在于获取到HTML中的

<canvas>

登录后复制

元素，然后通过它拿到2D渲染上下文（

getContext('2d')

登录后复制

）。一旦你有了这个上下文，它就像你手中的画笔和颜料盘，各种绘制方法就任你调遣了，从简单的线条、矩形到复杂的路径、文字乃至图片，都能在你的“画布”上生动呈现。这过程，说白了，就是通过代码指令，一步步构建你的视觉世界。

要开始在Canvas上挥洒创意，我们得先搭好舞台。首先，HTML里得有个

<canvas>

登录后复制

标签，给它一个ID，方便JavaScript找到它。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
    您的浏览器不支持Canvas。
</canvas>

登录后复制

接着，就是JavaScript的部分了。

const canvas = document.getElementById('myCanvas');
// 检查浏览器是否支持Canvas，这是个好习惯
if (canvas.getContext) {
    const ctx = canvas.getContext('2d'); // 获取2D渲染上下文

    // 我个人觉得，最直观的绘制就是矩形了。
    // 绘制一个填充矩形：(x, y, width, height)
    ctx.fillStyle = 'blue'; // 设置填充颜色
    ctx.fillRect(50, 50, 100, 75); // 从(50,50)开始，宽100，高75

    // 绘制一个边框矩形
    ctx.strokeStyle = 'red'; // 设置边框颜色
    ctx.lineWidth = 3; // 设置线宽
    ctx.strokeRect(180, 50, 100, 75);

    // 清除矩形区域
    // ctx.clearRect(0, 0, canvas.width, canvas.height

登录后复制

以上就是怎么使用JavaScript操作Canvas绘制图形？的详细内容，更多请关注php中文网其它相关文章！