2018/2/23 canvas知识一

1.什么是canvas？（了解）

• 是HTML5提供的一种新标签

<canvas></canvas>

 英 ['kænvəs]  美 ['kænvəs]   帆布画布

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

2.sublime配置canvas插件（推荐）

推荐：

安装插件：AndyJS2
github地址： https://github.com/malun666/AndyJS2
直接下载到：X:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages

3.canvas标签语法和属性

• canvas：画布油布的意思 ==英 ['kænvəs] 美 ['kænvəs] ==
• 标签名canvas，需要进行闭合。就是一普通的html标签。
• 可以设置width和height属性，但是属性值单位必须是px，否则忽略。
• width和hegiht：默认300*150像素
• 注意：
  • 不要用CSS控制它的宽和高,会走出图片拉伸，
  • 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
  • 可以给canvas画布设置背景色

4.浏览器不兼容处理

• ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持
• 只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
• 移动端的兼容情况非常理想，基本上随便使用
• 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
• 如果浏览器不兼容，最好进行友好提示

 例如：                      

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

• 浏览器不兼容，可以使用flash等手段进行优雅降级