html5 画布 - 在图像顶部绘制弧线（不使用图像加载）

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