В части 5 мы сделали квадрат, который следует за курсором мыши и отображал координаты холста на текстовом дисплее, теперь давайте сделаем что-нибудь интересное и превратим его в приложение JavaScript для рисования на холсте с пользовательскими кистями и эффектами.
Внеся всего несколько изменений всего в две функции, мы можем создать довольно достойный эффект кисти.
Обновите свои функции drawMouseCoordinates() и draw(), чтобы они соответствовали следующему фрагменту кода. Обратите внимание, что мы комментируем почти все в нашей функции draw(), которая зацикливается на отрисовке каждого кадра анимации, что обычно составляет около ~60 кадров в секунду (кадров в секунду).
function drawMouseCoordinates(x, y) {
//ctx.fillStyle = "#000000";
//ctx.font = '1em sans-serif';
//ctx.textAlign = 'right';
//ctx.fillText(x + ',' + y, 597, 17);
ctx.setLineDash([5, 5]);
ctx.shadowColor = '#9ecc35';
ctx.shadowBlur = 15;
ctx.fillStyle = "#54b958";
ctx.fillRect(x, y, -50, -50);
ctx.lineWidth = 5;
ctx.strokeStyle = "#4ebca9";
ctx.stroke();
}
function draw() {
//ctx.clearRect(0, 0, canvas.width, canvas.height);
//ctx.fillStyle = "#ffffff";
//ctx.fillRect(0, 0, canvas.width, canvas.height);
//drawRect();
//drawTriangle();
//drawText();
drawMouseCoordinates(mouseX, mouseY)
window.requestAnimationFrame(draw);
}
Хорошо, на этом этапе, когда вы сохраните свой JavaScript.html и обновите свой веб-браузер, вы должны увидеть светящиеся зеленоватые квадраты, появляющиеся там, где вы поместили курсор мыши на холсте. Выделите минуту (или две), чтобы насладиться своей тяжелой работой и, возможно, попробовать написать свое имя или изменить некоторые цвета или цифры.
Хорошо, это все здорово и все такое, но что действительно весело, так это когда мы экспериментируем с добавлением некоторой случайности к нашей квадратной кисти.
Итак, давайте попробуем добавить случайное число в fillRect() вот так…
ctx.fillRect(x, y+getRandomNum(1,200), -50, -50);
…или это…
ctx.fillRect(x+getRandomNum(1,200), y+getRandomNum(1,200), -50, -50);
… и теперь одним движением курсора мыши по холсту мы получаем гораздо больше, чем просто прямую линию.
Попробуйте внести некоторые изменения в некоторые числа и цвета и посмотрите, какой шедевр вы можете создать одним движением курсора мыши! Узрите силу JavaScript!
Кроме того, помните, что вы можете использовать цветовой формат rgba(), который дает вам возможность поставить 0,5 в конце, чтобы сделать каждый квадрат на 50% полупрозрачным.
function drawMouseCoordinates(x, y) {
//ctx.fillStyle = "#000000";
//ctx.font = '1em sans-serif';
//ctx.textAlign = 'right';
//ctx.fillText(x + ',' + y, 597, 17);
ctx.setLineDash([5, 5]);
ctx.shadowColor = "#59584b";
ctx.shadowBlur = 15;
ctx.fillStyle = "rgba(195,89,236, 0.5)";
ctx.fillRect(x+getRandomNum(1,50), y+getRandomNum(1,300), -50, -50);
ctx.lineWidth = 5;
ctx.strokeStyle = "#bca4e9";
ctx.stroke();
}
Для наблюдательного человека вы, возможно, заметили, что в коде нашего прямоугольника есть обводка или граница, но она не работает, и если вы сравните ее с функцией drawRect() из предыдущего примера, вы заметим, что отсутствует strokeRect(). Итак, мы можем добавить это следующим образом.
function drawMouseCoordinates(x, y) {
//ctx.fillStyle = "#000000";
//ctx.font = '1em sans-serif';
//ctx.textAlign = 'right';
//ctx.fillText(x + ',' + y, 597, 17);
ctx.shadowColor = "#f6c63c";
ctx.shadowBlur = 15;
ctx.fillStyle = "rgba(238,96,61, 0.5)";
ctx.fillRect(x+getRandomNum(1,50), y+getRandomNum(1,300), -50, -50);
ctx.strokeStyle = "#f6e03c";
ctx.setLineDash([5, 5]);
ctx.lineWidth = 5;
ctx.strokeRect(x+getRandomNum(1,5), y+getRandomNum(1,300), -50, -50);
}
Надеюсь, это даст вам лучшее представление о том, что вы можете сделать даже с одним из самых простых полигонов, пунктирной границей, некоторыми цветами, небольшой полупрозрачностью и некоторой случайностью. Если вы хотите, вы можете добавить обратно свой текст или имя, раскомментировав функцию drawText(); в вашей основной функции draw(). Итак, пусть ваше искусство будет названо!
И… это конец Учебника по кодированию на JavaScript — Часть 6
