javascript的canvas是什么_如何绘制图形？

Canvas 是 HTML 提供的命令式绘图元素，需通过 JavaScript 的 2D 上下文（getContext('2d')）调用 fillRect、arc 等方法绘制图形，并设置 fillStyle、strokeStyle 等样式属性；清空画布可用 canvas.width = canvas.width 或 clearRect。

它不是 SVG，不生成 DOM 节点；也不是 p + CSS，不能靠样式堆出图形——它是命令式绘图：你告诉它“从哪开始、画什么、怎么填”，它就照做。

怎么启用 canvas？

先在 HTML 里放一个 <canvas></canvas> 标签，指定宽高（最好用 width/height 属性，别只靠 CSS 缩放）：

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

登录后复制

然后用 JS 获取上下文（2D 绘图用 getContext('2d')）：

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

登录后复制

怎么画基本图形？

所有绘制都通过 ctx 对象调用方法。记住两个关键步骤：描边（stroke） 和 填充（fill），很多图形默认只描边，不填色就看不见。

立即学习“Java免费学习笔记（深入）”；

标签： css javascript java html js svg canva