Продолжая нашу прекрасную случайную цветную радугу в Части 10, давайте начнем с желейных бобов и нового движения.
Идите вперед и обновите свою основную функцию draw() следующим образом, где мы закомментируем функцию drawColorStops(), раскомментируем пару строк и добавим новую функцию с именем drawLine().
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#88d3ff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//drawRect();
//drawTriangle();
//drawPolygon();
//drawText();
//drawRandomSquare();
drawMouseCoordinates(mouseX, mouseY)
//drawColorStops();
drawLine();
window.requestAnimationFrame(draw);
}
function drawLine() {
// Draw a line here!
}
Теперь давайте заполним нашу новую функцию drawLine() большей частью того, что вы уже узнали, линейным градиентом в качестве стиля обводки и некоторыми цветовыми точками для градиента, а также установим ширину линии 50.
function drawLine() {
// context.createLinearGradient(x0,y0,x1,y1);
let grd = ctx.createLinearGradient(300, 125, 300, 175);
grd.addColorStop(0, "#77d721");
grd.addColorStop(0.55, "#73d520");
grd.addColorStop(1, "#16a803");
ctx.moveTo(100, 150);
ctx.lineTo(500, 150);
ctx.strokeStyle = grd;
ctx.lineWidth = 50;
ctx.stroke();
}
Одна приятная вещь, которую вы можете сделать при использовании обводки линии, — это установить стили линии, и в этом случае мы устанавливаем концы линии с обеих сторон линии, чтобы они были круглыми, чтобы придать нам больше вида желейных бобов.
ctx.lineWidth = 50; ctx.lineCap = "round"; ctx.stroke();
Круто, теперь давайте дадим ему немного жизни, используя наш простой и удобный код JavaScript для случайного обхода из предыдущих частей этой серии руководств.
let randomY = 150;
function drawLine() {
// context.createLinearGradient(x0,y0,x1,y1);
let grd = ctx.createLinearGradient(300, randomY-25, 300, randomY+25);
grd.addColorStop(0, "#77d721");
grd.addColorStop(0.55, "#73d520");
grd.addColorStop(1, "#16a803");
ctx.moveTo(100, randomY);
ctx.lineTo(500, randomY);
ctx.strokeStyle = grd;
ctx.lineWidth = 50;
ctx.lineCap = "round";
ctx.stroke();
randomY += getRandomNum(-5, 6);
}
Теперь у вас должно получиться хорошее случайное движение по вертикальной оси Y, которое в равной степени применяет движение к градиенту и обводке линии одновременно, тем самым удерживая их вместе во время анимации… Но что-то не так…
Чтобы исправить эту и подобные проблемы, нам нужно обернуть ее в путь.
ctx.beginPath(); ctx.moveTo(100, randomY); ctx.lineTo(500, randomY); ctx.strokeStyle = grd; ctx.lineWidth = 50; ctx.lineCap = "round"; ctx.stroke(); ctx.closePath();
Это должно дать вам что-то похожее на дрожащую зеленую мармеладку.
Это что-то вроде «ме»… Настоящие мармеладки, наверное, не были бы такими нервными. РЖУ НЕ МОГУ
Вместо того, чтобы использовать случайный выбор в этом случае, давайте немного больше контролируем диапазон движения и скорость.
let lineY = 150; // Starting position
let lineDY = 3; // Movement speed
function drawLine() {
if( lineY + lineDY > 160 || lineY + lineDY < 140 ) {
lineDY = -lineDY;
}
lineY += lineDY;
// context.createLinearGradient(x0,y0,x1,y1);
let grd = ctx.createLinearGradient(300, lineY-25, 300, lineY+25);
grd.addColorStop(0, "#77d721");
grd.addColorStop(0.55, "#73d520");
grd.addColorStop(1, "#16a803");
ctx.beginPath();
ctx.moveTo(100, lineY);
ctx.lineTo(500, lineY);
ctx.strokeStyle = grd;
ctx.lineWidth = 50;
ctx.lineCap = "round";
ctx.stroke();
ctx.closePath();
}
Хорошим маленьким последним штрихом может стать добавление тени…
... ctx.lineCap = "round"; ctx.shadowColor = "#000000"; ctx.shadowBlur = 100; ctx.shadowOffsetY = 50; ctx.stroke(); ...
Теперь каждый раз, когда наша функция drawLine() запускается в нашем цикле анимации draw() (который обычно составляет около 60 кадров в секунду), она будет проверять, находится ли вертикальная позиция Y линии выше или ниже определенной точки на основе диапазона, который мы задаем. это. Мы делаем «или», добавляя символы двойной вертикальной черты: ||
Затем мы добавляем либо положительное, либо отрицательное значение lineDY, чтобы заставить его двигаться вверх или вниз, в данном случае только на 10… то есть на 160 и 140 (которые вы можете видеть между скобками в операторе if).
Попробуйте поэкспериментировать с числами, например, вы можете легко заставить свою зеленую мармеладку отскакивать от пола и потолка, если хотите.
...
let lineDY = 10; // Movement speed
function drawLine() {
if( lineY + lineDY > 275 || lineY + lineDY < 25 ) {
lineDY = -lineDY;
}
...
И… это конец учебника по кодированию на JavaScript — часть 11.
Если вам понравилась эта статья или если эта статья вам вообще помогла, рассмотрите возможность подписки, аплодисментов, комментариев или щелкните здесь, чтобы купить мне кофе (любое из этих действий будет очень признательно и мотивирует!)
