Canvas 的基本用法

１．什么是Canvas

定义：是HTML5提供的一种新标签, ie9才开始支持的，Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

２．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实现。

８ 版本支持

最新标准：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();