html5 canvas - 在图像顶部绘制弧（不使用图像onload）

Question

尝试在背景图像上绘制圆弧

我的小提琴http://jsfiddle.net/Qeqg6/

var canvas = this.__canvas = new fabric.Canvas('c');
var ctx=canvas.getContext('2d');

ctx.beginPath();
ctx.arc(200,350,50,0*Math.PI,1.5*Math.PI);
ctx.stroke();

canvas.setBackgroundImage('http://placehold.it/350x150', canvas.renderAll.bind(canvas));

有一个stackoverflow问题，但它对我的情况没有帮助。 HTML5 Canvas - my lines/arcs are not appearing on top of an image

Answer 1

由于你使用的是jQuery，你可以简单地使用css（实际上即使没有jQuery）：

var canvas = this.__canvas = new fabric.Canvas('c');
var ctx=canvas.getContext('2d');

$('#c').css('background-image','url(http://placehold.it/350x150)');

ctx.beginPath();
ctx.arc(200,350,50,0*Math.PI,1.5*Math.PI);

ctx.stroke();

<强> working fiddle