> var centerX = 300, centerY = 150;
> // Добавьте код для вывода меток
> results.forEach(function(result) {
> var sliceAngle = (result.count / total) * 2 * Math.PI;
> cx.beginPath();
> cx.arc(centerX, centerY, 100,
> currentAngle, currentAngle + sliceAngle);
> currentAngle += sliceAngle;
> cx.lineTo(centerX, centerY);
> cx.fillStyle = result.color;
> cx.fill();
> });
>
Используйте технику >requestAnimationFrame из глав 13 и 15 для рисования прямоугольника с прыгающим внутри мячом. Мяч двигается с постоянной скоростью и отскакивает от сторон прямоугольника при соударении.
>
>
Предварительно рассчитанное отзеркаливание
Преобразования, к сожалению, замедляют рисование растровых изображений. Для векторной графики эффект не так заметен, потому что преобразованиям подвергаются всего лишь несколько точек, после чего рисование продолжается как обычно. Для растра позиция каждого пикселя должна быть преобразована, и хотя возможно, что браузеры в будущем будут делать это по-умному, это приводит к ненужному увеличению времени на отрисовку растра.
В нашей игре, где есть всего один преобразуемый спрайт, это не проблема. Но представьте, что вам надо рисовать сотни персонажей или тысячи вращающихся частиц от взрыва.
Подумайте, как можно было бы рисовать инвертированного персонажа без подгрузок дополнительных файлов и без постоянных преобразований вызовов >drawImage.