1.什么是Canvas
定义:是HTML5提供的一种新标签, ie9才开始支持的,Canvas是一个矩形区域的画布,可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.Canvas主要应用的领域
1 可视化数据: 各类统计图表,比如:百度的echart
2 场景秀: 用Canvas实现动态的广告效果能够非常融洽的跨平台运行。如:手机中微产品.在移动端兼容性很好
3 游戏: canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas成为HTML5小游戏开发首选。现阶段h5做游戏,营业方式不是很明确. 25 超棒的 HTML5 Canvas 游戏
4 其他可嵌入网站的内容 (多用于活动页面、特效):类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。
5 趋势=> 模拟器: 无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境,如移动端各种类型手机.
6 趋势=> 远程计算机控制: Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。
7 趋势=> 图形编辑器: Photoshop图形编辑器将能够100%基于Web实现。
8 版本支持
最新标准:http://www.w3.org/TR/2dcontext/
稳定版本的标准:http://www.w3.org/TR/2013/CR-2dcontext-20130806/
<SCript>
// 得到当前画布的对象
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.moveTo(10,0);
context.lineTo(50,0);
context.stroke();
// 填充颜色
context.fillstyle='';
// 还要调用
context.fill();
// 线的颜色
context.strokeStyle;
// 设置圆形端点
context.lineTo
// 重置路径
context.beginPath();
// 闭合路径
context.closePath();