Задача – сделать пасхальное яйцо используя любые 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();
}
Комментариев нет:
Отправить комментарий