Страницы

Поиск по вопросам

четверг, 18 октября 2018 г.

Сделать яйцо на Пасху на HTML

Задача – сделать пасхальное яйцо используя любые WEB технологии.
HTML, CSS, SVG, Canvas, JavaScript можно использовать любые техники и приёмы.


Ответ

Пасхальное яйцо с помощью Canvas и JavaScript:
var canvas = document.getElementById('canvas'), canvas2 = document.createElement('canvas'), ctx = canvas.getContext('2d'), ctx2 = canvas2.getContext('2d'); canvas2.width = canvas2.height = 50; ctx2.lineWidth = 5; ctx2.fillStyle = '#8f0'; ctx2.fillRect(0, 0, 50, 50); ctx2.strokeStyle = '#80f'; ctx2.fillStyle = '#0ae'; ctx2.beginPath(); ctx2.moveTo(0, 25); ctx2.lineTo(25, 0); ctx2.lineTo(50, 25); ctx2.lineTo(25, 50); ctx2.lineTo(0, 25); ctx2.stroke(); ctx2.fill(); ctx2.strokeStyle = '#8f0'; ctx2.fillStyle = '#00ae00'; ellipse(ctx2, 25, 25, 15, 15); ctx2.fill(); ctx2.fillStyle = '#80f'; ellipse(ctx2, 25, 25, 9, 9); ctx2.fill(); ctx2.stroke(); ctx.lineWidth = 2; //следующая строка будет работать не везде //ctx.ellipse(130, 195, 125, 170, 0, 0, 2 * Math.PI); ellipse(ctx, 130, 195, 125, 170); ctx.strokeStyle = '#80f'; ctx.fillStyle = ctx.createPattern(canvas2, 'repeat'); ctx.fill(); ctx.stroke(); ctx.font = 'bold 164px "Palatino Linotype",serif'; ctx.fillStyle = '#ddd'; ctx.fillText('ХВ', 20, 250); ctx.strokeText('ХВ', 20, 250); //stackoverflow.com/a/8372834/ function ellipse(ctx, cx, cy, rx, ry) { ctx.save(); ctx.beginPath(); ctx.translate(cx - rx, cy - ry); ctx.scale(rx, ry); ctx.arc(1, 1, 1, 0, 2 * Math.PI, false); ctx.restore(); }

Комментариев нет:

Отправить комментарий