HTML5 за 10 минут

Исходный код


Полный исходный код примера HTML-документа canvas.html

Ниже для справки приводится полностью исходный код рассмотренного в этом уроке примера HTML-документа canvas. html.

<1D0CTYPE html>

<htrol>

<head>

<title>

Пример применения элемента управления Canvas </title>

<script type="text/javascript"> function loader()

{

var canvas = document.getEleroentById (canvas); var canvasl = canvas,getContext(2d);

// Прямоугольники

canvasl.fillStyle = "rgba(0# 0f 200, 1)"; canvasl.fillRect(30, 30, 75, 70);

canvasl.fillStyle = игдЬа(200, 200, 0, 1)"; canvasl.fillRect(70, 50, 55, 70);

canvasl.fillStyle = "rgba(200, 0, 0, 1)"; canvasl.fillRect(90, 50, 75, 50);

// Штриховые треугольники canvas1.beginPath();

canvasl.strokeStyle = "rgba(200, 0, 0, 0.5)"; canvasl.moveTo(110, 205); canvasl.lineTo(110, 125); canvasl.lineTo(30, 205); canvasl.closePath(); canvas1.stroke();

canvas1.beginPath(); canvasl.moveTo(100, 205); canvasl.lineTo(100, 125); canvasl.lineTo(20, 205); canvasl.closePath(); canvas1.stroke();

canvasl.beginPath(); canvasl.moveTo(90, 205); canvasl.lineTo(90, 125); canvasl.lineTo(10, 205); canvasl.closePath(); canvasl.stroke();

// Заполняемый треугольник

canvasl.fillStyle = "rgba(0, 200, 0, 0.5)";

canvasl.beginPath();

canvasl.moveTo(225, 25);

canvasl.lineTo(305, 25);

canvasl.lineTo(225, 105);

canvasl.closePath();

canvasl.fill();

// Форма сердечка

canvasl.fillStyle = "rgba(200, 0, 0, 0.5)"; canvasl.beginPath(); canvasl.moveTo(75, 250);

canvasl.bezierCurveTo(75, 247, 70, 235, 50, 235); canvasl.bezierCurveTo(20, 235, 20, 272.5, 20, 272); canvasl.bezierCurveTo(20, 290, 40, 312, 75, 330); canvasl.bezierCurveTo(110, 312, 130, 290, 130, 272); canvasl.bezierCurveTo(130, 272.5, 130, 235, 100, 235); canvasl.bezierCurveTo(85, 235, 75, 247, 75, 250); canvas1.closePath(); canvasl.fill();

// Кривые второго порядка

canvas1.strokeStyle = "rgba(0, 0, 0, 1)";

canvas1.beginPath();

canvasl.moveTo(275, 125);

canvasl.quadraticCurveTo(225, 125, 225, 162);

canvasl.quadraticCurveTo(260, 200, 265, 200);

canvasl.quadraticCurveTo(325, 200, 325, 162);

canvasl.quadraticCurveTo(325, 125, 275, 125);

canvas1.closePath();

canvasl.stroke();

// Дуги canvas1.beginPath();

canvasl.arc(275, 275, 50, 0, Math.PI  2, true); canvasl.moveTo(310, 275);

canvas1.arc(275, 275, 35, 0, 0.75  Hath.PI, false); canvasl.moveTo(300, 255);

canvas1.arc(265, 255, 35, 0, 0.5  Math.PI, false); canvasl.moveTo(280, 255);

canvasl.arc(245, 255, 35, 0, 0.2  Math.PI, false);

canvas1.closePath();

canvasl.stroke();

// Текст

canvasl.font = italic 40px sans-serif; canvasl.strokeText("ПриветIй, 50, 400);

}

</script>

</head>

<body onload="loader()">

<Ь1>Пример применения элемента управления Canvas</hl> <canvas id="canvas" width="600" height="500">

</canvas>

</body>

</html>

УрокЗ

Комментарии закрыты