绘制多个填充图像内容的圆圈答案

【问题标题】：Draw multiple circles filled with image content绘制多个填充图像内容的圆圈
【发布时间】：2011-08-03 19:49:30
【问题描述】：

我正在尝试在充满图像部分的画布上绘制圆圈。想象一下，点击一个白色的画布，用户点击的地方会显示照片的一部分。

我已经找到了绘制 1 个圆的方法，但无法成功使用它来绘制多个圆。如果我用其他坐标重复该动作，则绘图不会发生。

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();
}

关于如何实现这一点的任何想法？谢谢。

稍后编辑（使用的整个确切代码）

<!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>

【问题讨论】：

你能在jsfiddle.net上创建一个包含所有代码的页面的副本吗？
嗨。我试过了，但是将我的代码放在那里并单击运行根本没有结果，这与我绘制了 1 个圆圈的服务器不同。这是jsfiddle.net/qCg9N/3的代码链接。如果您能提供任何帮助，非常感谢。

标签： html5-canvas

【解决方案1】：

你的代码有两个问题：

首先是start_drawing 每次执行都会清除画布。所以对于每次鼠标点击（我假设start_drawing在鼠标点击时被调用），圆圈被绘制但画布在此之前被清除。

另一个是您需要为要创建的每个剪辑区域调用BeginPath 和closePath。所以你的代码应该是这样的：

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); 

}

更新

显然，重置剪辑区域的技巧是重置画布。这可以通过重新设置它的宽度来实现。

你去：http://jsfiddle.net/qCg9N/5/

【讨论】：

嗨。谢谢您的帮助。我试图将我的整个代码放在这里 jsfiddle.net/qCg9N/3 。这里它没有渲染任何圆圈，但至少你可以看看完整的代码。我稍微改了一下。我认为它应该做的：首先绘制白色矩形。比在每个mousemove上调用start_drawing函数来绘制鼠标所在图片的圆形区域。但不知何故，只画了第一个圆圈。任何想法？谢谢。