index 1 html doctype html html head titlecanvas

index 1. html <!doctype html> <html> <head> <title>canvas. Example</title> <meta charset='utf-8' /> </head> <body>

Более сложный пример: index 2. html Шахматная доска <!doctype html> <html> <head> <title>canvas. Example</title>

<body> <canvas id='example'>Обновите браузер</canvas> <script> var example = document. get. Element. By. Id("example"), ctx

Пример ниже показывает действие всего описанного выше: index 3. html <body> <canvas id='example'>Обновите браузер</canvas>

index 4. html <body> <canvas id='example'>Обновите браузер</canvas> <script> var example = document. get. Element.

Цветная шахматная доска: index 5. html <body> <canvas id='example'>Обновите браузер</canvas> <script> var example =

Изменение толщины линий Для изменения значения толщины существует используется - line. Width. ctx. line.

Для добавления эффекта тени для текста используется shadow. Offset. X. context. shadow. Offset. X

http: //htmlhook. ru/rukovodstvo-po-html 5 -canvas. html https: //ru. wikipedia. org/wiki/Canvas_(HTML)

Slides: 20

Download presentation

index 1. html <!doctype html> <html> <head> <title>canvas. Example</title> <meta charset='utf-8' /> </head> <body> <canvas height='320' width='480' id='example'>Обновите браузер</canvas> <script> var example = document. get. Element. By. Id("example"), ctx = example. get. Context('2 d'); ctx. fill. Rect(0, 0, example. width, example. height); </script> </body> </html>

Более сложный пример: index 2. html Шахматная доска <!doctype html> <html> <head> <title>canvas. Example</title> <meta charset='utf-8' /> </head> …. Пример </html>

<body> <canvas id='example'>Обновите браузер</canvas> <script> var example = document. get. Element. By. Id("example"), ctx = example. get. Context('2 d'); example. width = 640; example. height = 480; ctx. stroke. Rect(15, 266, 266); ctx. stroke. Rect(18, 260, 260); ctx. fill. Rect(20, 256, 256); for (i = 0; i < 8; i += 2) for (j = 0; j < 8; j += 2) { ctx. clear. Rect(20 + i * 32, 20 + j * 32, 32); ctx. clear. Rect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32); } </script> </body>

Пример ниже показывает действие всего описанного выше: index 3. html <body> <canvas id='example'>Обновите браузер</canvas> <script> var example = document. get. Element. By. Id("example"), ctx = example. get. Context('2 d'); example. height = 480; example. width = 640; ctx. begin. Path(); ctx. arc(80, 100, 56, 3/4 * Math. PI, 1/4 * Math. PI, true); ctx. fill(); // Заливается дуга ctx. move. To(40, 140); ctx. line. To(20, 40); ctx. line. To(60, 100); ctx. line. To(80, 20); ctx. line. To(100, 100); ctx. line. To(140, 40); ctx. line. To(120, 140); ctx. stroke(); // Обводится контур короны </script> </body>

index 4. html <body> <canvas id='example'>Обновите браузер</canvas> <script> var example = document. get. Element. By. Id("example"), ctx = example. get. Context('2 d'); example. height = 480; example. width = 640; ctx. begin. Path(); ctx. move. To(10, 15); ctx. bezier. Curve. To(75, 55, 175, 20, 250, 15); ctx. move. To(10, 15); ctx. quadratic. Curve. To(100, 250, 15); ctx. stroke(); </script> </body>

Цветная шахматная доска: index 5. html <body> <canvas id='example'>Обновите браузер</canvas> <script> var example = document. get. Element. By. Id("example"), ctx = example. get. Context('2 d'); example. height = 480; example. width = 640; ctx. stroke. Style = '#B 70 A 02'; // меняем цвет рамки ctx. stroke. Rect(15, 266, 266); ctx. stroke. Rect(18, 260, 260); ctx. fill. Style = '#AF 5200'; // меняем цвет клеток ctx. fill. Rect(20, 256, 256); for (i = 0; i < 8; i += 2) for (j = 0; j < 8; j += 2) { ctx. clear. Rect(20 + i * 32, 20 + j * 32, 32); ctx. clear. Rect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32); } </script> </body>

Изменение толщины линий Для изменения значения толщины существует используется - line. Width. ctx. line. Width = 20; ctx. stroke. Style = "rgb(255, 0, 0)"; ctx. stroke. Rect(50, 100, 100); Можно изменить пример с треугольником: ctx. line. Width = 20; ctx. begin. Path(); ctx. move. To(50, 50); ctx. line. To(50, 250); ctx. line. To(250, 250); ctx. close. Path(); ctx. stroke();

Для добавления эффекта тени для текста используется shadow. Offset. X. context. shadow. Offset. X = 5; context. shadow. Offset. Y = 5; context. shadow. Blur = 5; context. shadow. Color = "rgba(0, 0, 0, 1)";

http: //htmlhook. ru/rukovodstvo-po-html 5 -canvas. html https: //ru. wikipedia. org/wiki/Canvas_(HTML)