此文档解决以下问题:
一,<canvas > 标记的简单使用, 输出简单条形图
二,<canvas> 参考手册
三, 学习 html5 Canvas 这一篇文章就够了
Canvas 是 html5 语言中最具创新和印象里的元素, 尤其它是与数据可视化相关的. 通过 < canvas > 标记, 设计师在 web 页面桩监理一块预留的任意区域, 可以包含在运行时通过编程方式创建的图像. HTML5 画布图形时有情调的 JavaScript API 提供的 -- 大量的 API 目前都具有良好的跨浏览器支持, 并且可以立即使用.
使用 < canvas > 的第一步是: 在 HTML 页面的 < body > 区域中包含该标记. 只需要在其中包含 3 个特性: id,width 和 height.
1. 一个完整的一个完整的 < canvas > 标记列表
- <canvas id="chart1" width="600" height="400">
- <img src="images/altchart1.jpg" width="600" height="400">
- </canvas>
2. 初始化画布的基本步骤
1) 创建一个变量用于保存画布对象, 使用它的 id 进行识别.
2) 检查是否支持画布 API 的 getContext() 方法 (从而得知他是否支持 < canvas > 标记).
3) 如果支持, 创建一个变量并在目标画布对象上应用 getContext() 方法.
在实际中, 代码如下:
- <script type="text/javascript">
- function drawCanvas(){
- var theChart = document.getElementById('chart1');
- if (theChart.getContext){
- var theContext = theChart.getContext('2d');
- theContext.fillRect(50,200,100,200);
- }
- }
- </script>
3. 绘制第一个矩形的完整代码. 其中有基本的 CSS 和 HTML, 用于将画布居中病显示出轮廓
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Canvas Example 1
- </title>
- <script type="text/javascript">
- function drawCanvas() {
- var theChart = document.getElementById('chart1');
- if (theChart.getContext) {
- var theContext = theChart.getContext('2d');
- //fillRect(x,y,width,height) 函数绘制一个填充矩形,
- // 参数前两个值用于确定矩形的左上角, 后两个参数提供了尺寸, 所有的值均已像素为单位
- theContext.fillRect(50, 200, 100, 200);
- }
- }
- </script>
- <style>
- #outerWrapper { width: 800px; margin: 1em auto; } canvas { border: 1px
- solid #000; }
- </style>
- </head>
- <body onLoad="drawCanvas();">
- <div id="outerWrapper">
- <canvas id="chart1" width="600" height="400">
- <img src="images/altchart1.jpg" width="600" height="400">
- </canvas>
- </div>
- </body>
- </HTML>
4. 运行结果
注意:
画布 AP 相当强大, 可以通过编程的方式执行许多不同的绘图操作. 下面是所有操作的列表的一部分:
矩形, 实体的和空心的
任意尺寸的点
连接的直线
弧形
圆形和椭圆, 实体的和空心的
使用了指定字体, 大小和颜色的文本
导入图片
完整的颜色控制, 包括阿尔法透明处理
任意颜色组合的渐变, 线性的或放射性的
任意对象或文本的阴影
任意对象的模式, 在指定方向进行重复
基于 < canvas > 标记输出的图标插件:
- CahrJS
- RGraph
- FusionCharts
- Flot
来源: http://www.bubuko.com/infodetail-3114963.html