绘制多个填充图像内容的圆圈 [英] Draw multiple circles filled with image content
问题描述
我正在尝试在填充了图像部分的画布上绘制圆圈。想象一下，点击白色画布，用户点击的位置显示照片的一部分。
I am trying to draw circles on a canvas filled with portions from an image. Imagine clicking on a white canvas and where the user clicked reveal a portion of a photo.
我已经找到了绘制1个圆圈的方法，但是无法使用此方法绘制倍数。如果我用其他坐标重复动作，则不会发生绘图。
I have found ways to draw 1 circle, but can not succeed using this to draw multiples. If I repeat the action with other coordinates the drawing is not happening.
function start_drawing(){
ctx.beginPath();
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0,0,canvas.width,canvas.height);//fill the background. color is default black
ctx.arc(mouse.x,mouse.y,45,0,6.28,false);//draw the circle
ctx.arc(mouse.x+100,mouse.y+100,45,0,6.28,false);
ctx.clip();//call the clip method so the next render is clipped in last path
ctx.drawImage(img,0,0);
ctx.closePath();
}
有关如何实现这一点的任何想法？
谢谢。
Any idea on how this can be achieved ? Thank you.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload=function(){
var canvas = document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var mouse={x:0,y:0} //make an object to hold mouse position
canvas.onmousemove=function(e){mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};} //update the mouse when the canvas is moved over
var img=new Image();
img.src="bmw_gina.jpg";
setInterval( start_drawing ,100);// set the animation into motion
ctx.beginPath();
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0,0,canvas.width,canvas.height);//fill the background. color is default black
ctx.closePath();
function start_drawing(){
//ctx.save();
ctx.beginPath();
ctx.arc(mouse.x,mouse.y,45,0,6.28,false);//draw the circle
ctx.clip();//call the clip method so the next render is clipped in last path
ctx.drawImage(img,0,0);
ctx.closePath();
//ctx.restore();
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1003" height="914"></canvas>
</body>
</html>
推荐答案
我可以用yor代码看到两个问题：
There are two issues I can see with yor code:
第一个是 start_drawing 每次执行都清除画布。因此，对于每次鼠标单击（我假设在鼠标单击时调用 start_drawing ），绘制圆圈但在此之前清除画布。
The first is that start_drawing is clearing the canvas every execution. So for each mouse click (I assume that start_drawing is called on mouse click) the circle is drawn but the canvas is cleared before that.
另一个是你需要为你想要的每个剪辑区域调用 BeginPath 和 closePath 创建。所以你的代码看起来应该是这样的：
the other is that You need to call BeginPath and closePath for each clipping region you want to create. so your code should look something like that:
function start_drawing(){
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0,0,canvas.width,canvas.height);//fill the background. color is default black
ctx.beginPath();
ctx.arc(mouse.x,mouse.y,45,0,6.28,false);//draw the circle
ctx.clip();//call the clip method so the next render is clipped in last path
ctx.closePath();
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.arc(mouse.x+100,mouse.y+100,45,0,6.28,false);
ctx.clip();//call the clip method so the next render is clipped in last path
ctx.closePath();
ctx.drawImage(img2,0,0);
}
更新
显然，重置剪裁区域的技巧是重置画布。这可以通过重新设置它的宽度来实现。
Update
Well apparently, the trick to reset the clipping region is to reset the canvas. This can be achieved by re setting it's width.
你去： http://jsfiddle.net/qCg9N/5/
这篇关于绘制多个填充图像内容的圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
