Codog

关注微信公众号：Codog代码狗

0%

Canvas（一）基础知识

发表于

基本概念

canvas是一种html标签，虽然平时使用场景不多，但是功能非常强大，常见于各种图表库（例如：G2）。相比html的“组装式”结构，canvas内部更倾向于“绘制”。开发者像一个画家一样使用画笔在画布上绘制作品，也从侧面表明canvas不支持动画，我们看到的动画实质上都是一张图一张图绘制出来的，类似胶片滚动播放一样模拟动画的效果。

上面提到的“画笔”就是canvas的渲染上下文，使用getContext('2d')方法可以获取这个对象。

canvas的基础页面结构类似于这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <canvas id="canvas" width="800" height="600"></canvas>

  <script>
    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        // your code...
      }
    }
    draw();
  </script>
</body>

codepen提供的template： https://codepen.io/pen/?template=JjRErzL

栅格

canvas的坐标原点(0, 0)位于左上角，向右、向下为正值

到此，介绍了canvas的基础概念，接下来会介绍简单的绘制和实用的方法。