详解HTML图形绘制：canvas标签的占位结构-html教程-PHP中文网

是空元素，仅提供位图容器，不自动渲染图形、无默认内容、不响应事件；必须用javascript调用getcontext()和绘图api才能显示内容。

详解html图形绘制：canvas标签的占位结构

canvas 标签本身不渲染任何图形，只提供位图容器

直接说结论：<canvas></canvas> 是个空元素，没有默认内容、不自动绘制、也不响应鼠标事件——它只是给 JavaScript 提供一块可操作的像素区域。浏览器渲染时，它就像一个透明的、带宽高的 <div>，但内部没有任何 DOM 子节点，也没有内置图形。<p>常见错误现象：</p> <ul> <li>写完 <code><canvas id="c"></canvas> 就以为能看见东西，结果页面一片空白

用 CSS 给 <canvas></canvas> 加背景色（比如 background: red），误以为是画布内容，其实只是容器背景

在标签里写文字（如 <canvas>不支持</canvas>）却没加 fallback 文本，导致旧浏览器看不到提示

正确做法：

必须通过 getContext('2d') 获取上下文后，调用 fillRect()、stroke() 等方法才真正“画”出东西
fallback 文本要放在开始和结束标签之间，且仅当 JS 不可用或 getContext 失败时才显示
width 和 height 属性必须写在 HTML 里（不是 CSS），否则画布会回退到默认 300×150，且缩放失真

HTML 属性决定像素尺寸，CSS 属性决定显示尺寸

这是最容易踩坑的地方：两个“大小”根本不是一回事。

width 和 height 属性（如 <canvas width="400" height="300"></canvas>）定义的是画布的**内在位图尺寸**，单位是 CSS 像素，也决定了你调用 fillRect(0,0,400,300) 能填满整个画布。

而 CSS 的 width 和 height（如 canvas { width: 800px; height: 600px; }）只控制**最终在屏幕上占多大物理空间**，浏览器会把那 400×300 像素的位图拉伸填充到 800×600 显示区域——结果就是模糊、锯齿、变形。

所以：

想让高清屏（dpr > 1）下不失真，得手动按设备像素比放大画布尺寸：canvas.width = canvas.clientWidth * window.devicePixelRatio
如果只用 CSS 缩放，又没同步调整 JS 绘图坐标，所有图形位置/大小都会错位
调试时用 console.log(canvas.width, canvas.height) 查实际位图尺寸，别只看 computed style

canvas 元素不可见，但可通过 border 或 background 辅助定位

刚创建的 <canvas></canvas> 默认完全透明，连边框都没有。开发中常因看不见它而误判“没加载”或“JS 没执行”。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

临时调试建议：

加内联样式：<canvas style="border: 1px solid #000"></canvas>，立刻看到边界
设背景色：<canvas style="background: #eee"></canvas>，注意这不是画布内容，只是容器底色
避免用 display: none 隐藏，否则 getContext 可能返回 null；改用 visibility: hidden 或 opacity: 0

真实项目中，一旦绘图逻辑跑通，这些辅助样式就得去掉——因为它们不属于画布内容，也不能被 toDataURL() 导出。

不支持 canvas 的降级处理不是可选项，而是必要步骤

虽然现代浏览器全覆盖，但仍有场景需要 fallback：比如某些企业内网 IE11、WebView 内嵌页禁用 canvas、或 JS 加载失败。

有效做法只有这一种：

把提示文字写在 <canvas></canvas> 开始和结束标签之间：<canvas>您的浏览器不支持 Canvas，请升级或启用 JavaScript</canvas>
不要依赖 JS 动态插入提示，因为 JS 失败时就什么也显示不了
如果要用图片替代，得用 <img src="fallback.png"> 包裹在 <canvas></canvas> 外层，并用 CSS 控制显隐

关键点在于：这个 fallback 文本是 HTML 渲染器直接处理的，不经过 JS，也不影响 canvas 的像素操作逻辑——它只是“占位失败时的备用文案”，不是 canvas 的一部分。

Canvas 的结构本质就是“空容器 + JS 驱动”，所有图形都活在内存位图里，而不是 DOM 树中。这点和 SVG 完全不同，也决定了它没法用 CSS 选择器选中某条线、不能用 aria 描述单个图形、更不能靠伪元素装饰——想改，只能重绘整帧。