jquery - html5 canvas - 在图像顶部绘制圆弧(不使用图像加载)

Question

尝试在背景图片上绘制弧线

我的 fiddle 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