Каждый раз, когда кто-то нажимает на части моего веб-сайта, я хотел бы показать круг, который со временем станет больше. Я думал об этом через холст. До сих пор мне удалось добавить круг в позицию, где посетитель нажал:Как добавить элементы к холсту, которые меняются со временем?

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Canvas</title> 
</head> 
<body> 
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #cccccc;"> 

    </canvas> 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script> 

     /* Canvas test. */ 
     $(function() { 
      var c = $("#myCanvas"); 
      // add element that changes over time, 
      $(c).click(function(e) { 
       var ctx = this.getContext("2d"); 
       ctx.beginPath(); 
       ctx.arc(e.pageX,e.pageY,40,0,2*Math.PI); 
       ctx.stroke(); 
      }); 
     }); 

    </script> 
</body> 
</html>

ли возможно, чтобы эти круги меняют свой радиус 1px за 100мс и исчезают, когда их радиус больше, чем в полотне?

Можно ли это сделать без холста?

источник

2015-02-04 Edward

Возможно ли, чтобы эти круги изменили радиус 1px на 100 мс и исчезли, когда их радиус больше, чем холст? ДА

Вы можете начать цикл анимации (используйте RAF) и изменение/остановить рост

Это также можно сделать это без холста? ДА

Javasccript + SVG или JavaScript + CSS3, но это может быть не так просто, как холст

редактирования: нашел другую полезную вопрос: Expanding circles with CSS3 animations

источник

2015-02-04 10:38:58 dwana

Imgur

Решение:

You необходимо использовать requestAnimationFrame, чтобы добавить элемент и изменить его с течением времени, нажать на массив точку и нарисовать круг.

/* Canvas test. */ 
 
var circles = []; 
 
var canvas = null; 
 
var ctx = null; 
 

 
function loop() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    circles.forEach(function(arg) { 
 
    var size = 100 - (new Date() - arg.time)/10; 
 
    if (size <= 0) 
 
     return; 
 
    ctx.beginPath(); 
 
    ctx.arc(arg.x, arg.y, size, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
    }); 
 

 
    requestAnimFrame(loop); 
 
} 
 

 
$(function() { 
 
    canvas = $("#myCanvas")[0]; 
 
    ctx = canvas.getContext("2d"); 
 

 
    window.requestAnimFrame = (function() { 
 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
 
     function(callback) { 
 
     window.setTimeout(callback, 1000/60); 
 
     }; 
 
    })(); 
 

 
    requestAnimFrame(loop); 
 
}); 
 

 

 
$(function() { 
 
    var c = $("#myCanvas"); 
 
    // add element that changes over time, 
 
    $(c).click(function(e) { 
 
    circles.push({ 
 
     time: +new Date(), 
 
     x: e.pageX, 
 
     y: e.pageY 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #cccccc;"></canvas>

источник

2015-02-04 14:45:01

Off тему, но то, что кодер вы использовали для создания .gif? :-) – markE

@markE См. [GifW00t] (https://github.com/yaronn/GifW00t). –

Как добавить элементы к холсту, которые меняются со временем?

ответ

Решение:

Смежные вопросы