Canvas Draw Manually 手工绘制 - caleb531/jcanvas-docs GitHub Wiki

Draw Manually 手工绘制

With the draw() method, you can draw on the canvas using native canvas methods (or any method, for that matter). To do this, write your code inside a function
draw()方法,你可以使用本地画布方法(或其它方法)来在画布上绘图。为了做到这点,要将你的代码写进一个函数当中。

$('canvas').draw({
  fn: function(ctx) {
    ctx.fillStyle = '#333';
    ctx.fillRect(50, 50, 100, 100);
  }
});

Draw Anything 画任意东西

The draw() method can be used to draw any other jCanvas drawing (although usually this is not necessary).
draw()方法可以用来绘制任何其它jCanvas的绘制过程(尽管通常情况下不必要这么做)。

$('canvas').draw({
  type: 'rectangle',
  fillStyle: '#c33',
  x: 100, y: 100,
  width: 100, height: 80
});

The above code is equivalent to the following:
上边的代码等效于下边的:

$('canvas').drawRect({
  fillStyle: '#c33',
  x: 100, y: 100,
  width: 100, height: 80
});

Notes 注意

The this keyword in the callback function refers to the canvas DOM element.
回调函数中的关键字this,指向的是画布的DOM元素。