7.1 Canvas基础

关键词: Canvas元素, 画布, 绘图上下文, 坐标系统, 画布属性, HTML5绘图, 2D绘图, 画布尺寸

学习目标

理解Canvas元素的基本概念和作用
掌握Canvas元素的HTML语法和属性
学会获取Canvas绘图上下文的方法
理解Canvas坐标系统的工作原理
掌握Canvas元素的基本设置和配置

7.1.1 Canvas元素介绍

Canvas元素的概念

Canvas是HTML5引入的一个新元素，提供了一个可以通过脚本进行绘图的画布。Canvas元素本身只是一个容器，实际的绘图需要通过JavaScript来实现。

html

<!-- 基本的Canvas元素 -->
<canvas id="myCanvas" width="800" height="600">
    您的浏览器不支持Canvas元素
</canvas>

Canvas元素的特点

Canvas元素具有以下重要特点：

位图绘制：Canvas创建的是位图（像素图），而不是矢量图
脚本驱动：需要JavaScript来进行实际的绘图操作
即时模式：绘图是即时的，没有保留绘图命令的场景图
跨平台：在支持HTML5的浏览器中具有良好的兼容性

html

<!-- 带有样式的Canvas元素 -->
<canvas id="styledCanvas" width="400" height="300" style="border: 1px solid #000;">
    <p>您的浏览器不支持Canvas。请升级您的浏览器以查看此内容。</p>
</canvas>

7.1.2 Canvas元素的HTML语法

基本语法结构

Canvas元素的基本语法非常简单，主要包含几个重要的属性：

html

<canvas id="标识符" width="宽度" height="高度" class="样式类" style="内联样式">
    备用内容
</canvas>

重要属性详解

width和height属性

html

<!-- 指定Canvas的尺寸 -->
<canvas id="canvas1" width="500" height="400">
    不支持Canvas的提示信息
</canvas>

<!-- 默认尺寸的Canvas（300x150） -->
<canvas id="canvas2">
    默认尺寸的画布
</canvas>

id属性

html

<!-- 用于JavaScript访问的标识符 -->
<canvas id="gameCanvas" width="800" height="600">
    游戏画布
</canvas>

<canvas id="chartCanvas" width="600" height="400">
    图表画布
</canvas>

备用内容

Canvas元素内部可以包含备用内容，当浏览器不支持Canvas时会显示这些内容：

html

<canvas id="modernCanvas" width="600" height="400">
    <p>您的浏览器不支持HTML5 Canvas元素。</p>
    <p>请升级到现代浏览器以获得更好的体验。</p>
    <img src="fallback-image.png" alt="备用图片">
</canvas>

7.1.3 Canvas上下文获取

获取绘图上下文的HTML基础

虽然获取绘图上下文需要JavaScript，但Canvas元素的HTML结构为此提供了基础：

html

<!-- 为获取2D上下文准备的Canvas -->
<canvas id="canvas2d" width="400" height="300">
    2D绘图画布
</canvas>

<!-- 为获取3D上下文准备的Canvas -->
<canvas id="canvas3d" width="400" height="300">
    3D绘图画布（WebGL）
</canvas>

上下文类型说明

Canvas支持多种上下文类型，每种都有其特定的用途：

2D上下文标识

html

<!-- 适用于2D绘图的Canvas -->
<canvas id="drawing2d" width="500" height="500" data-context="2d">
    2D绘图区域
</canvas>

3D上下文标识

html

<!-- 适用于3D绘图的Canvas -->
<canvas id="drawing3d" width="500" height="500" data-context="webgl">
    3D绘图区域（需要WebGL支持）
</canvas>

7.1.4 Canvas坐标系统

坐标系统概念

Canvas使用标准的计算机图形坐标系统，了解这个系统对于HTML布局和后续的绘图操作都很重要：

html

<!-- 展示坐标系统的Canvas -->
<canvas id="coordinateSystem" width="400" height="300">
    <p>坐标系统：</p>
    <p>原点(0,0)在左上角</p>
    <p>X轴向右增长</p>
    <p>Y轴向下增长</p>
</canvas>

坐标系统特点

原点位置

html

<!-- 标记原点位置的Canvas -->
<canvas id="originPoint" width="200" height="200" style="border: 1px solid #ccc;">
    原点在左上角(0,0)
</canvas>

坐标轴方向

html

<!-- 展示坐标轴方向的Canvas -->
<canvas id="axisDirection" width="300" height="200">
    <p>X轴：从左到右 (0 → width)</p>
    <p>Y轴：从上到下 (0 → height)</p>
</canvas>

7.1.5 Canvas尺寸和样式

Canvas尺寸设置

Canvas的尺寸可以通过HTML属性或CSS来设置，但两者有不同的作用：

HTML属性设置

html

<!-- 通过HTML属性设置画布尺寸 -->
<canvas id="htmlSize" width="600" height="400">
    HTML属性设置尺寸
</canvas>

CSS样式设置

html

<!-- 通过CSS设置显示尺寸 -->
<canvas id="cssSize" width="300" height="200" style="width: 600px; height: 400px;">
    CSS样式设置显示尺寸
</canvas>

响应式Canvas

html

<!-- 响应式Canvas的HTML结构 -->
<div class="canvas-container">
    <canvas id="responsiveCanvas" width="800" height="600">
        响应式画布
    </canvas>
</div>

Canvas样式化

Canvas元素可以像其他HTML元素一样进行样式化：

html

<!-- 带有边框和背景的Canvas -->
<canvas id="styledCanvas" width="400" height="300" 
        style="border: 2px solid #333; background-color: #f0f0f0;">
    样式化的画布
</canvas>

<!-- 带有阴影效果的Canvas -->
<canvas id="shadowCanvas" width="400" height="300" 
        style="box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
    带阴影的画布
</canvas>

7.1.6 Canvas可访问性

添加可访问性标记

Canvas元素应该包含适当的可访问性标记：

html

<!-- 带有可访问性标记的Canvas -->
<canvas id="accessibleCanvas" width="500" height="400" 
        role="img" aria-label="数据可视化图表">
    <p>这是一个显示销售数据的图表。</p>
    <p>2023年第一季度销售额：100万元</p>
    <p>2023年第二季度销售额：120万元</p>
    <p>2023年第三季度销售额：150万元</p>
</canvas>

提供文本替代

html

<!-- 带有详细文本描述的Canvas -->
<canvas id="chartCanvas" width="600" height="400" 
        aria-describedby="chart-description">
    <div id="chart-description">
        <h3>年度销售趋势图</h3>
        <table>
            <tr><th>月份</th><th>销售额</th></tr>
            <tr><td>1月</td><td>50万</td></tr>
            <tr><td>2月</td><td>60万</td></tr>
            <tr><td>3月</td><td>55万</td></tr>
        </table>
    </div>
</canvas>

本节要点回顾

Canvas元素语法：<canvas id="标识符" width="宽度" height="高度">备用内容</canvas>
尺寸设置：width和height属性设置画布尺寸，CSS设置显示尺寸
备用内容：为不支持Canvas的浏览器提供替代内容
坐标系统：原点在左上角，X轴向右，Y轴向下
可访问性：添加适当的ARIA标签和文本替代内容

常见问题FAQ

Q: Canvas元素的width和height属性与CSS样式设置有什么区别？

A: width和height属性设置的是画布的实际绘图尺寸（像素数），而CSS设置的是画布在页面上的显示尺寸。如果两者不一致，画布内容会被拉伸或压缩。

Q: Canvas元素内部的内容什么时候会显示？

A: 当浏览器不支持Canvas元素时，会显示Canvas标签内部的备用内容。在支持Canvas的浏览器中，这些内容不会显示。

Q: 如何让Canvas元素响应式显示？

A: 可以通过CSS设置Canvas的显示尺寸为百分比，或使用JavaScript动态调整Canvas的width和height属性来实现响应式效果。

Q: Canvas元素可以像其他HTML元素一样设置CSS样式吗？

A: 是的，Canvas元素可以设置边框、背景、阴影等CSS样式，但这些样式不会影响Canvas内部的绘图内容。

Q: Canvas的坐标系统可以改变吗？

A: Canvas的默认坐标系统是固定的，但可以通过变换操作来改变绘图坐标系统的方向和原点位置。

下一节预览：下一节我们将学习第7章第2节-图形绘制，重点介绍Canvas中各种基本图形的绘制方法和HTML5相关的绘图元素。

7.1 Canvas基础 ​

学习目标 ​

7.1.1 Canvas元素介绍 ​

Canvas元素的概念 ​

Canvas元素的特点 ​

7.1.2 Canvas元素的HTML语法 ​

基本语法结构 ​

重要属性详解 ​

width和height属性 ​

id属性 ​

备用内容 ​

7.1.3 Canvas上下文获取 ​

获取绘图上下文的HTML基础 ​

上下文类型说明 ​

2D上下文标识 ​

3D上下文标识 ​

7.1.4 Canvas坐标系统 ​

坐标系统概念 ​

坐标系统特点 ​

原点位置 ​

坐标轴方向 ​

7.1 Canvas基础

学习目标

7.1.1 Canvas元素介绍

Canvas元素的概念

Canvas元素的特点

7.1.2 Canvas元素的HTML语法

基本语法结构

重要属性详解

width和height属性

id属性

备用内容

7.1.3 Canvas上下文获取

获取绘图上下文的HTML基础

上下文类型说明

2D上下文标识

3D上下文标识

7.1.4 Canvas坐标系统

坐标系统概念

坐标系统特点

原点位置

坐标轴方向