Можностей, предоставляемых веб-разработчикам



Pdf көрінісі
бет197/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   193   194   195   196   197   198   199   200   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

Рис . 5 .12 .
 Анимированная спираль вращается,  
Рис . 5 .13 .
 Пример перемещения 
вращается и никак не остановится 
начала координат методом translate
Теперь, чтобы реализовать задуманное, я должен инициализировать холст при помощи 
метода 
translate
, а затем использовать 
setInterval
 для перерисовки спирали (обратите 


Холст  •  173
внимание, что 
drawSpiral
 написана мной; это не какая-то стандартная функция, которая 
строит путь для спирали и визуализирует ее на холсте с помощью последовательности 
вызовов 
stroke
):
ctx.translate(ctx.canvas.width/2, 
¬ ctx.canvas.height/2);
drawSpiral(); // сложная спиральная математика
setInterval(function () {
    ctx.clearRect(-ctx.canvas.width/2, 
    ¬-ctx.canvas.height/2,
                    ctx.canvas.width, 
                    ¬ ctx.canvas.height);
    ctx.rotate(Math.PI / 180 * 0.5) // 1/2
    ¬ градуса
    drawSpiral();
}, 10);
Единственная сложность, с которой мне приходится столкнуться, — это очистка холста. 
В обычной ситуации я бы просто применял 
clearRect(0,
 
0,
 
width,
 
height)
, но так как 
метод 
translate
 перенес точку 
(0,
 
0)
 в центр экрана, мне приходится вручную указывать 
верхний левый угол, как видно в предыдущем фрагменте кода.


Достарыңызбен бөлісу:
1   ...   193   194   195   196   197   198   199   200   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет