Canvas

Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。

没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

一个Canvas定义了一个指定尺寸的矩形框,在这个范围内我们可以随意绘制:

  1. <canvas id="test-canvas" width="300" height="200"></canvas>

由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>内部的HTML,如果浏览器不支持Canvas,它将显示<canvas>内部的HTML:

  1. <canvas id="test-stock" width="300" height="200">
  2. <p>Current Price: 25.51</p>
  3. </canvas>

在使用Canvas前,用canvas.getContext来测试浏览器是否支持Canvas:

  1. <!-- HTML代码 -->
  2. <canvas id="test-canvas" width="200" heigth="100">
  3. <p>你的浏览器不支持Canvas</p>
  4. </canvas>

你的浏览器不支持Canvas

Canvas - 图1

getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象,所有的绘图操作都需要通过这个对象完成。

  1. var ctx = canvas.getContext('2d');

如果需要绘制3D怎么办?HTML5还有一个WebGL规范,允许在Canvas中绘制3D图形:

  1. gl = canvas.getContext("webgl");

本节我们只专注于绘制2D图形。

绘制形状

我们可以在Canvas上绘制各种形状。在绘制前,我们需要先了解一下Canvas的坐标系统:

canvas-xy

Canvas的坐标以左上角为原点,水平向右为X轴,垂直向下为Y轴,以像素为单位,所以每个点都是非负整数。

CanvasRenderingContext2D对象有若干方法来绘制图形:

Canvas - 图3

绘制文本

绘制文本就是在指定的位置输出文本,可以设置文本的字体、样式、阴影等,与CSS完全一致:

Canvas - 图4

Canvas除了能绘制基本的形状和文本,还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果要实现非常复杂的操作,考虑以下优化方案:

  • 通过创建一个不可见的Canvas来绘图,然后将最终绘制结果复制到页面的可见Canvas中;

  • 尽量使用整数坐标而不是浮点数;

  • 可以创建多个重叠的Canvas绘制不同的层,而不是在一个Canvas中绘制非常复杂的图;

  • 背景图片如果不变可以直接用<img>标签并放到最底层。

练习

请根据从163获取的JSON数据绘制最近30个交易日的K线图,数据已处理为包含一组对象的数组:

  1. window.drawStock = function (data) {
  2. var
  3. canvas = document.getElementById('stock-canvas'),
  4. MAX_X = canvas.width,
  5. MAX_Y = canvas.height,
  6. ctx = canvas.getContext('2d');
  7. var low = data.reduce(function (prev, x) {
  8. return x.low < prev.low ? x : prev;
  9. });
  10. var high = data.reduce(function (prev, x) {
  11. return x.high > prev.high ? x : prev;
  12. });
  13. var chg = high.high - low.low;
  14. // index range:
  15. var lowest = Math.floor(low.low - chg * 0.1);
  16. var highest = Math.floor(high.high + chg * 0.1 + 1);
  17. var calcY = function (idx) {
  18. return MAX_Y * (highest - idx) / (highest - lowest);
  19. };
  20. var drawAtX = function (x, k) {
  21. var
  22. tmp,
  23. y1 = calcY(k.open),
  24. y2 = calcY(k.close);
  25. if (y1 > y2) {
  26. tmp = y1;
  27. y1 = y2;
  28. y2 = tmp;
  29. }
  30. ctx.fillStyle = (k.open > k.close) ? '#00ff00' : '#ff0000';
  31. ctx.fillRect(x, calcY(k.high), 1, calcY(k.low) - calcY(k.high));
  32. ctx.fillRect(x-2, y1, 5, y2 - y1);
  33. };
  34. ctx.clearRect(0, 0, MAX_X, MAX_Y);
  35. ctx.font = '12px serif';
  36. ctx.textAlign = 'right';
  37. ctx.fillStyle = '#000000';
  38. ctx.fillText(String(Math.floor(high.high)), 40, 15);
  39. ctx.fillText(String(Math.floor(low.low)), 40, MAX_Y - 20);
  40. var i, x;
  41. for (i=0; i<data.length; i++) {
  42. x = i * 8 + 50;
  43. drawAtX(x, data[i]);
  44. }
  45. };

Canvas - 图5

下载为图片

读后有收获可以支付宝请作者喝咖啡,读后有疑问请加微信群讨论:

Canvas - 图6 Canvas - 图7