Нарисуйте несколько кружков, заполненных изображением - PullRequest
Новая
       4

Нарисуйте несколько кружков, заполненных изображением

0 голосов
/ 12 апреля 2011

Я пытаюсь нарисовать круги на холсте, заполненном частями изображения.Представьте, что вы щелкаете по белому холсту, и там, где щелкнул пользователь, открывается часть фотографии.

Я нашел способы нарисовать 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>

1 Ответ

3 голосов
/ 13 апреля 2011

Есть две проблемы, которые я вижу с вашим кодом:

Первая - start_drawing очищает холст при каждом выполнении.Таким образом, для каждого щелчка мыши (я предполагаю, что start_drawing вызывается при щелчке мыши), круг рисуется, но холст очищается до этого.* для каждого региона отсечения, который вы хотите создать.поэтому ваш код должен выглядеть примерно так: 

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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...