Canvas需用width/height属性初始化，不可用CSS；getContext('2d')获取绘图上下文；fillRect填充、strokeRect描边，无drawRect；动画须clearRect清屏后重绘；路径绘制前必调beginPath()。

Canvas 不是现成的绘图工具，而是一块空白画布——它本身不画任何东西，所有图形都得靠 JavaScript 一帧一帧手动绘制。

Canvas 元素怎么初始化才不会白屏

常见错误是只写 标签却不设宽高，或用 CSS 拉伸尺寸，结果图形被拉糊、坐标错乱、甚至完全不显示。

• 必须通过 width 和 height 属性（不是 CSS）设置 Canvas 像素尺寸，例如：
• 获取上下文要用 getContext('2d')，返回 CanvasRenderingContext2D 对象，后续所有绘图操作都靠它
• 如果页面动态加载 Canvas，确保 DOM 加载完成后再执行 document.getElementById() 和 getContext()

drawRect / fillRect / strokeRect 区别在哪

这三个函数名看着像，但行为完全不同，混用会导致“画了却看不见”。

• drawRect(x, y, w, h) —— 不存在。这是典型误记，Canvas API 中没有这个函数
• fillRect(x, y, w, h) —— 填充一个实心矩形（默认黑色，可通过 fillStyle 改）
• strokeR

  

  ect(x, y, w, h) —— 只描边，不填充；描边宽度由 lineWidth 控制，颜色由 strokeStyle 控制
• 注意：Canvas 坐标原点在左上角，x 向右增，y 向下增，和数学坐标系相反

为什么 clearRect 后图形还在闪动

这不是 clearRect 的问题，而是没做「清屏→重绘」完整循环，导致旧帧残留。

• clearRect(0, 0, canvas.width, canvas.height) 只擦除像素，不重置绘图状态（比如 fillStyle、lineWidth 等仍保留）
• 动画场景中，必须在每一帧开头调用 clearRect，再重新调用 fillRect、beginPath() 等绘制新内容
• 如果用了 save()/restore() 或变换（translate、rotate），clearRect 不会自动还原这些状态，需自行管理

路径绘制（lineTo / arc / closePath）总连不上线

Canvas 的路径是显式状态机，不调 beginPath() 就会把新图形追加到旧路径里，造成意外连接或重复描边。

• 每次画新图形前，务必先调 ctx.beginPath()，否则 lineTo() 会从上一次路径终点继续画
• moveTo(x, y) 是“抬笔移动”，不画线；lineTo(x, y) 是“落笔连线”，必须配合 beginPath() + moveTo() 才能控制起点
• closePath() 自动画一条线回到起点，但它不自动 stroke() 或 fill()，该调还得调
• 圆弧用 arc(x, y, r, startAngle, endAngle, anticlockwise)，角度单位是弧度，不是度数——别忘了 Math.PI / 180 转换

Canvas 的“简单”是假象：它不维护图形对象，不响应事件，不支持图层。一旦需要拖拽、缩放、点击判断，就得自己算坐标、存数据、做碰撞检测——这些才是实际项目中最容易卡住的地方。

# css  # javascript  # java  # 工具  # 区别  # 重绘  # 为什么  # canva 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  微信推文制作网站有哪些,怎么做微信推文，急？  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  如何在万网自助建站中设置域名及备案？  如何正确选择百度移动适配建站域名？  JavaScript如何实现路由_前端路由原理是什么  佛山企业网站制作公司有哪些,沟通100网上服务官网？  如何获取免费开源的自助建站系统源码？  北京网站制作公司哪家好一点,北京租房网站有哪些？  Laravel如何实现事件和监听器？（Event & Listener实战）  html5的keygen标签为什么废弃_替代方案说明【解答】  JavaScript如何实现错误处理_try...catch如何捕获异常？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  Laravel如何实现数据库事务？（DB Facade示例）  如何用5美元大硬盘VPS安全高效搭建个人网站？  如何挑选高效建站主机与优质域名？  lovemo网页版地址 lovemo官网手机登录  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  Laravel如何为API编写文档_Laravel API文档生成与维护方法  bing浏览器学术搜索入口_bing学术文献检索地址  大连网站制作公司哪家好一点,大连买房网站哪个好？  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  Laravel怎么为数据库表字段添加索引以优化查询  如何在阿里云服务器自主搭建网站？  Laravel如何使用模型观察者？（Observer代码示例）  如何批量查询域名的建站时间记录？  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  深入理解Android中的xmlns:tools属性  如何确保FTP站点访问权限与数据传输安全？  Laravel如何生成URL和重定向？（路由助手函数）  如何快速搭建高效可靠的建站解决方案？  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  iOS UIView常见属性方法小结  EditPlus中的正则表达式实战(6)  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  Laravel中的withCount方法怎么高效统计关联模型数量  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  Laravel如何配置和使用缓存？（Redis代码示例）  如何用AI一键生成爆款短视频文案？小红书AI文案写作指令【教程】  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  如何在腾讯云免费申请建站？  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  bootstrap日历插件datetimepicker使用方法