canvas 详解

canvas

什么是canvas？

<canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布

• Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。
• canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
• HTML5 之前的 web 页面只能用一些固定样式的标签：比如 p、div、h1 等

canvas标签本身是一个画布，没有绘画能力，所有的绘制都是通过js脚本实现的

都能干什么？（了解）

1. 游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，canvas 游戏在流畅度和跨平台方面更牛。
2. 可视化数据.数据图表话，比如:百度的 echart.js
3. banner 广告：Flash 曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5 技术能够在 banner 广告上发挥巨大作用，用 Canvas 实现动态的广告效果再合适不过。
4. 未来=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由 JavaScript 来实现。
5. 未来=> 远程计算机控制：Canvas 可以让开发者更好地实现基于 Web 的数据传输，构建一个完美的可视化控制界面。
6. 未来=> 图形编辑器：Photoshop 图形编辑器将能够 100%基于 Web 实现。
   其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与 Web 融合，并且不需要任何插件。

我们课程的目标

• 要求必须会做基本的用 canvas 绘制图形等、各种图表。

canvas 使用方式：

<canvas id="cavsElem" width="500" height="500">
  你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
</canvas>

可以设置 width 和 height 属性，但是属性值单位必须是 px，否则忽略。

注意：

• 不要用 CSS 控制它的宽和高,否则会出现画布拉伸情况。
• 重新设置 canvas 标签的宽高属性会让画布擦除所有的内容。
• 可以给 canvas 画布设置背景色

Context：Canvas 的上下文、绘制环境。（重点掌握）

• 上下文：上知天文，下知地理。是所有的绘制操作 api 的