我想使用jcanvas和模糊。 (http://calebevans.me/和http://blurjs.com/)
这是我的剧本:http://jsfiddle.net/VDC5h/1/
var xStart;
var yStart;
var xStop;
var yStop;
var i=0;
var d=0;
$('#obrazek').click( function(e) {
if(i==1)
{
i=2;
}
if(i==0)
{
var posX = $(this).offset().left, posY = $(this).offset().top;
xStart=(e.pageX - posX);
yStart=(e.pageY - posY);
i=1;
}
});
$("#obrazek").on( "mousemove", function(e) {
if(i==1)
{
var posX = $(this).offset().left, posY = $(this).offset().top;
xStop=(e.pageX - posX);
yStop=(e.pageY - posY);
$('canvas').drawArc({
fillStyle: '#fff',
x: xStart,
y: yStart,
radius: d+1});
d=Math.sqrt(Math.pow(xStart-xStop,2)+Math.pow(yStart-yStop,2))
$('canvas').drawArc({
fillStyle: '#000',
x: xStart,
y: yStart,
radius: d
});
$('#d').html(d);
}
});
如何模糊圈子?我不想要影子:How to draw a blurry circle on HTML5 canvas?
我试过了:
$('canvas').drawArc({
fillStyle: '#000',
x: xStart,
y: yStart,
radius: d
}).blurjs({
source: 'body',
radius: 10
});
当然不起作用:(