Canvas 是 HTML 提供的命令式绘图元素，需通过 JavaScript 的 2D 上下文（getContext('2d')）调用 fillRect、arc 等方法绘制图形，并设置 fillStyle、strokeStyle 等样式属性；清空画布可用 canvas.width = canvas.width 或 clearRect。
它不是 SVG，不生成 DOM 节点；也不是 div + CSS，不能靠样式堆出图形——它是命令式绘图：你告诉它“从哪开始、画什么、怎么填”，它就照做。
先在 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免费学习笔记（深入）”；
fillRect(x, y, width, height) 或 strokeRect(...)
beginPath()，再用 moveTo()、lineTo()、arc() 等“画线”，最后 stroke() 或 fill()
arc(x, y, radius, startAngle, endAngle)，注意角度单位是弧度（比如 π 就是 Math.PI），画完要 closePath() 才能正确填充这些属性在绘制前设好，影响后续所有操作：
ctx.fillStyle = '#ff6b6b' —— 填充色（矩形 fill / 路径 fill）ctx.strokeStyle = 'blue' —— 描边色（strokeRect / stroke）ctx.lineWidth = 2 —— 描边粗细ctx.lineCap = 'round' —— 线端样式（'butt'/'round'/'square'）ctx.globalAlpha = 0.7 —— 整体透明度（0～1）最可靠的方式是重设宽高（会清空并重置所有样式）：
canvas.width = canvas.width; // 简洁写法，触发重置
或者用 clearRect(0, 0, canvas.width, canvas.height)，但不会重置线条宽度、颜色等状态。
基本上就这些。canvas 不复杂，但容易忽略路径管理（比如忘了 beginPath() 导致图形连在一起）和坐标系原点（左上角）。多练几次矩形、线条、圆，后面画图表、游戏、滤镜就顺了。
以上就是javascript的canvas是什么_如何绘制图形？的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
658
收藏
