JavaScript绘制canvas图形教程

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript如何绘制canvas图形》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

必须先调用 getContext('2d') 获取 2D 绘图上下文才能绘图，否则 fillRect 等方法静默失败；需确保 DOM 加载完成、canvas 元素存在且参数字符串为小写 '2d'。

怎么获取 canvas 的 2D 绘图上下文

必须先调用 getContext('2d') 才能开始绘图，否则所有绘制方法都会静默失败。这个步骤不能省略，且只对 元素有效。

常见错误是直接在未获取上下文的 canvas 上调用 fillRect 或 beginPath，结果什么也不显示，控制台也无报错。

• 确保 DOM 已加载完成，比如放在 window.onload 或 DOMContentLoaded 回调里
• getContext('2d') 返回 null 时，说明 canvas 尚未渲染或被移除，需检查元素是否存在
• 不支持 getContext('webgl') 的旧浏览器不会影响 2D，但别传错字符串（如写成 '2D' 或 '2d '）

如何画一个带边框的实心矩形

最基础的图形操作：用 fillRect 填充，用 strokeRect 描边，两者可独立使用，也可组合。

注意：fillStyle 和 strokeStyle 必须在调用绘制函数前设置，顺序不能颠倒。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff6b6b';
ctx.strokeStyle = '#4ecdc4';
ctx.lineWidth = 2;
ctx.fillRect(50, 30, 120, 80);   // x, y, width, height
ctx.strokeRect(50, 30, 120, 80); // 同样坐标和尺寸

为什么 drawImage 不显示图片

绝大多数情况不是 API 写错了，而是图片还没加载完成就调用了 drawImage。Canvas 不会等待图片加载，它只管“此刻有没有像素数据”。

正确做法是监听图片的 load 事件，再执行绘制。

• 不要用本地 file:// 协议直接打开 HTML——现代浏览器会因 CORS 拒绝加载本地图片
• 如果图片来自跨域服务，需设置 img.crossOrigin = 'anonymous'，且服务端返回合法 CORS 头
• drawImage 有 3 种参数形式，最常用的是 drawImage(img, dx, dy) 和 drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)，缩放裁剪时容易搞混源/目标坐标

路径绘制后为什么不显示

调用 beginPath() 只是清空当前路径，并不自动触发渲染；真正绘制靠的是 fill()、stroke() 或 clip()。漏掉这两步，路径就只是内存里的坐标点集合。

另外，closePath() 不是必需的，但它会影响填充效果（尤其是非凸多边形），而 stroke() 对是否闭合不敏感。

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 50);
ctx.lineTo(300, 100);
// 没有 closePath，fill 仍能形成三角形（自动闭合）
ctx.fillStyle = 'rgba(100, 150, 255, 0.7)';
ctx.fill(); // 必须有这一行
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI * 2);
ctx.strokeStyle = '#333';
ctx.lineWidth = 3;
ctx.stroke(); // 必须有这一行

路径对象不可复用，每次绘制新图形都得重新 beginPath()，否则旧路径会叠加进新路径里，导致意外描边或填充。

以上就是《JavaScript绘制canvas图形教程》的详细内容，更多关于的资料请关注golang学习网公众号！