Анимировать круг холста для рисования при нагрузке

OK Привет.Анимировать круг холста для рисования при нагрузке

Я решил начать использовать HTML-холст для небольшого проекта, который у меня есть.

Пока нет никакого реального начала. Я просто обучение основ Canvas, и я хочу, чтобы анимировать круг

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     background: #222; 
     } 

    </style> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
</head> 
<body> 
<canvas id="myCanvas" width="578" height="250"></canvas> 

    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var x = canvas.width/2; 
     var y = canvas.height/2; 
     var radius = 75; 
     var startAngle = 1.5 * Math.PI; 
     var endAngle = 3.2 * Math.PI; 
     var counterClockwise = false; 
     context.beginPath(); 
     context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
     context.lineWidth = 15; 
     // line color 
     context.strokeStyle = 'black'; 
     context.stroke(); 
    </script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script> 
</body> 
</html>

Вот скрипка http://jsfiddle.net/oskar/Aapn8/ того, что я пытаюсь добиться. Я не буду суетиться с эффектом «Bounce».

Но я в основном хочу рисовать на странице загрузки и останавливаться на нужный угол дуги. Вот скрипка того, что я создал до сих пор.

http://jsfiddle.net/skerwin/uhVj6/

Благодаря

источник

2013-03-28 Blackline

http://codepen.io/dcdev/pen/upjDy – davidcondrey

Live Demo

// requestAnimationFrame Shim 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
           window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
    window.requestAnimationFrame = requestAnimationFrame; 
})(); 



var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var endPercent = 85; 
var curPerc = 0; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

context.lineWidth = 10; 
context.strokeStyle = '#ad2323'; 
context.shadowOffsetX = 0; 
context.shadowOffsetY = 0; 
context.shadowBlur = 10; 
context.shadowColor = '#656565'; 


function animate(current) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    context.stroke(); 
    curPerc++; 
    if (curPerc < endPercent) { 
     requestAnimationFrame(function() { 
      animate(curPerc/100) 
     }); 
    } 
} 

animate();

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

Анимация постоянно вызывается requestAnimationFrame. Это предпочтительный способ делать любые анимации с холстом. Каждый раз, когда animate называется, текущий процент увеличивается на единицу, а затем используется для перерисовки дуги.

источник

2013-03-28 22:24:50 Loktar

Спасибо, что вы сделали это ... У меня есть некоторые проблемы с моим браузером: - [ – metalwings

Ваша живая демонстрация, похоже, не обновляется? Это выглядит так же – Blackline

Он забыл добавить функцию оживления – metalwings

три этапа:

1) Make an "init" function which will assign the variables (they aren't in any 
function). 
2) Then use requestAnimationFrame, or setInterval with your 
drawing function you will create. 
3) In this "drawing/updating" function you're going to 
write your code to do the maths and then just animate the updated circle.

Там нет никаких функций в вашем коде. Если вы не знаете, как сделать функции и использовать их +, что является глобальной переменной, лучше прочитать сначала учебники об этом, но в любом случае я постараюсь сделать вам пример :)

источник

2013-03-28 21:35:32 metalwings

ОК. если бы вы могли помочь мне с какой-то скрипкой, это было бы здорово. Я разработчик HTML/CSS, просто вступая в Canvas. Я смутно знаю функции (от PHP). – Blackline

Хорошо, сделаю скрипку, когда я закончу :) Хм ... Я не очень хорошо знаю PHP, но думаю, что это так одинаково. В холсте используются JavaScript и jQuery (это похоже на JavaScript) ... Надеюсь, я закончил через 30 минут :) – metalwings

Я с нетерпением жду ваших скриптов. – Blackline

Анимировать круг холста для рисования при нагрузке

ответ

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