构建可视化基础——使用HTML Canvas

此文档解决以下问题：

一、<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.初始化画布的基本步骤

扫描二维码关注公众号，回复： 6769428 查看本文章

　　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

构建可视化基础——使用HTML Canvas

猜你喜欢