Canvas 是 HTML5 的绘图区域，需用 JavaScript 获取 2D 上下文（ctx）后绘图；核心步骤是获取 canvas 元素并调用 getContext(‘2d’)；支持矩形、路径、文字等绘制及 requestAnimationFrame 动画。
Canvas 是 HTML5 提供的一个绘图区域，本身不带任何图形，需要通过 JavaScript 获取上下文（context）后才能画图、动画。核心就两步：拿到 canvas 元素，再调用它的 getContext('2d') 方法获取 2D 绘图接口。
获取画布和绘图上下文
先在 HTML 中放一个 标签，设置宽高（别只用 CSS 缩放，否则会模糊）：
canvas id=”myCanvas” width=”500″ height=”300″>
然后在 JS 中获取它：
立即学习“Java免费学习笔记（深入）”；
const canvas = document.getElementById(‘myCanvas’);
const ctx = canvas.getContext(‘2d’);
这个 ctx 就是你的“画笔”，所有绘图操作都靠它。
绘制基本图形
Canvas 不是 DOM 元素，不能用 CSS 控制，所有样式和形状都要用 JS 设置：
矩形：直接用 fillRect(x, y, width, height) 填充，或 strokeRect() 只描边路径类图形（线、圆、多边形）：先 beginPath()，再用 moveTo()、lineTo()、arc() 等拼路径，最后 fill() 或 stroke()文字：用 fillText("内容", x, y)，可设 ctx.font 和 ctx.textAlign颜色与样式：用 ctx.fillStyle（填充色）、ctx.strokeStyle（描边色）、ctx.lineWidth（线宽）等控制
实现简单动画
Canvas 动画本质是“清空 → 重画 → 循环”。关键不是定时器本身，而是每次重绘前要清除上一帧：
用 ctx.clearRect(0, 0, canvas.width, canvas.height) 清空整块画布用 requestAnimationFrame(animate) 替代 setInterval，更流畅、更省资源在动画函数里更新图形位置/状态，再重新绘制
例如让一个小圆从左往右移动：
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, 150, 10, 0, Math.PI * 2);
ctx.fill();
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}
animate();
注意几个易错点
Canvas 坐标原点在左上角，x 向右增，y 向下增所有坐标和尺寸单位都是“像素”，不是 CSS 的 rem/em路径必须显式调用 beginPath()，否则会累积上一次的路径变换（平移、旋转、缩放）会影响后续所有绘制，记得用 save() 和 restore() 保护状态导出图片用 canvas.toDataURL('image/png')，可下载或显示为 img
基本上就这些。不复杂但容易忽略细节，动手试几次就熟了。
以上就是javascript怎样操作HTML5 Canvas？_javascript中如何绘制图形和动画？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543198.html
微信扫一扫 
支付宝扫一扫 
