Помогите с кликами
Здравствуйте, пожалуйста помогите реализовать код где будет по клику мыши появляться на canvas круг который движется в сторону клика :help: :help: :help:
Я пытался реализовать этот код в функции, но круг то исчезал, то вообще не двигался и ошибки были ! |
Всемогущий,
А можно макет с вашими попытками? |
Здравствуйте, макет к сожалению не могу показать. Но я все круги создавал в этом событии:
canvas.addEventListener..... Когда я кликал круги не появлялись ! |
Появляются
<style>
canvas {
width:300px;
height:150px;
border:1px solid black;
}
</style>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.addEventListener("click", function() {
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.stroke();
});
</script>
|
А как сделать чтобы появившиеся кружки двигались в направлении клика мыши ? что надое еще написать ?
|
canvas cursor move ball
Всемогущий,
https://stackoverflow.com/questions/...o-mouse-coords https://www.c-sharpcorner.com/Upload...sor-move-ball/ код из последней ссылки
<!DOCTYPE HTML>
<html>
<head>
<title>Cursor Move Ball </title>
<meta charset="utf-8">
<style type="text/css">
canvas { border: 1px solid black; }
#game{background:Grey}
</style>
<script type="text/javascript">
var a=0;
var b=0;
var mA=0;
var mB=0;
var delay=10;
var timer=10;
function init(){
var canvas = document.getElementById('game');
//loop calls create each 20 ms
setInterval(create,10);
canvas.addEventListener('click', ev_cursor, false);
}
function ev_cursor (ev) {
mA = ev.layerX;
mB = ev.layerY;
}
function create(){
var canvas = document.getElementById('game');
if (canvas.getContext){
var c = canvas.getContext('2d');
timer+=1;
c.fillStyle ="Blue";
c.strokeStyle="#000";
delay=20-(mB/100);
accelX=mA-a;
accelY=mB-b;
a+=(accelX)/delay;
b+=(accelY)/delay;
a+=Math.sin(timer)*accelX/5;
b+=Math.sin(timer)*accelY/5;
c.clearRect(0,0,1000,900);
c.beginPath();
c.arc(a,b,100,0,Math.PI*2,true); // 100 is ball size
c.fill();
}
}
</script>
</head>
<body onload="init();">
<div><h1>HTML5 Cursor Move Ball </h1></div>
<canvas id="game" width="1000" height="800" >
</canvas>
</body>
</html>
|
Спасибо всем за ответы!) + в карму
|
| Часовой пояс GMT +3, время: 16:27. |