Canvas 入门

介绍

Canvas（画布）是 HTML 用于借助脚本画图的元素。获取 DOM 元素后可以使用相应的 API。

Canvas 通过上下文（context）区分 2d 和 3d 画图。

基础用法

坐标系

左上角为原点，向下和向右展开

基本图形

默认支持基本图形中的矩形；其它形状需要使用 path 利用点和线生成。

举例

HTML 中添加元素

<canvas id="tutorial" width="300" height="300">
  Canvas Fallback Content
</canvas>

在 JavaScript 脚本中获取元素，并使用定义在元素上的 API 画图

// 画两个有重叠的矩形
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgb(200, 0, 0)';
  ctx.fillRect(10, 10, 50, 50);

  ctx.fillStyle = 'rgb(0, 0, 200, 0.5)';
  ctx.fillRect(30, 30, 50, 50)
}

流行库

• https://github.com/fabricjs/fabric.js
• https://github.com/tbolis/react-sketch

参考

Canvas API

Basic usage of canvas