Canvas

Сентябрь 5, 2022

Содержание

3. Как подключить? Обновите браузер start();
4. Как использовать? function start() { var example = document.getElementById("canvas"); var ctx = example.getContext('2d'); }
5. Прямоугольники
6. function drawFigures(ctx) { ctx.strokeRect(20,20,50,50); //незакрашенный прямоугольник ctx.fillRect(80, 80, 50, 50); //закрашенный прямоугольник }
8. function _drawFigures(ctx) { ctx.strokeRect(20, 20, 50, 50); //незакрашенный прямоугольник ctx.fillRect(80, 80, 50, 50); //закрашенный прямоугольник ctx.clearRect(50,
10. Цвета ctx.strokeStyle = "red"; ctx.strokeStyle = "#FF0000"; ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.strokeStyle = "rgba(255, 0,
11. function _drawFigures(ctx) { ctx.strokeStyle = "red"; ctx.fillStyle = "green"; ctx.strokeRect(20, 20, 50, 50); //незакрашенный прямоугольник ctx.fillRect(80,
13. function _drawFigures(ctx) { ctx.strokeStyle = "red"; ctx.fillStyle = "green"; ctx.lineWidth = 10; ctx.strokeRect(20, 20, 50, 50);
15. Прямые линии
16. ctx.beginPath(); ctx.moveTo(0, 100); ctx.lineTo(100, 0); ctx.lineTo(200, 100); ctx.lineTo(150, 200); ctx.lineTo(50, 200); ctx.lineTo(0, 100); ctx.stroke();
18. Дуги
19. ctx.beginPath(); ctx.arc(100, 100, 75, 1.2 * Math.PI, 1.8 * Math.PI, false); ctx.lineWidth = 5; ctx.strokeStyle =
22. Тексты
24. Скачать презентацию

Слайд 2

Слайд 3

Как подключить?

Слайд 4

Как использовать?
function start() { var example = document.getElementById("canvas"); var ctx =

example.getContext('2d'); }

Слайд 5

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

Слайд 6

function drawFigures(ctx) { ctx.strokeRect(20,20,50,50); //незакрашенный прямоугольник ctx.fillRect(80, 80, 50, 50); //закрашенный

прямоугольник }

Слайд 7

Слайд 8

$function _drawFigures(ctx) { ctx.strokeRect(20, 20, 50, 50); //незакрашенный прямоугольник ctx.fillRect(80, 80,$

function _drawFigures(ctx) { ctx.strokeRect(20, 20, 50, 50); //незакрашенный прямоугольник ctx.fillRect(80, 80,

50, 50); //закрашенный прямоугольник ctx.clearRect(50, 50, 50, 50); //стираем прямоугольник }

Слайд 9

Слайд 10

Цвета
ctx.strokeStyle = "red"; ctx.strokeStyle = "#FF0000"; ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.strokeStyle = "rgba(255,

0, 0, 1)"; ctx.fillStyle = "green";

Слайд 11

$function _drawFigures(ctx) { ctx.strokeStyle = "red"; ctx.fillStyle = "green"; ctx.strokeRect(20, 20,$

function _drawFigures(ctx) { ctx.strokeStyle = "red"; ctx.fillStyle = "green"; ctx.strokeRect(20, 20,

50, 50); //незакрашенный прямоугольник ctx.fillRect(80, 80, 50, 50); //закрашенный прямоугольник }

Слайд 12

Слайд 13

$function _drawFigures(ctx) { ctx.strokeStyle = "red"; ctx.fillStyle = "green"; ctx.lineWidth =$

function _drawFigures(ctx) { ctx.strokeStyle = "red"; ctx.fillStyle = "green"; ctx.lineWidth =

10; ctx.strokeRect(20, 20, 50, 50); //незакрашенный прямоугольник ctx.fillRect(80, 80, 50, 50); //закрашенный прямоугольник }

Слайд 14

Слайд 15

Прямые линии

Слайд 16

ctx.beginPath(); ctx.moveTo(0, 100); ctx.lineTo(100, 0); ctx.lineTo(200, 100); ctx.lineTo(150, 200); ctx.lineTo(50, 200); ctx.lineTo(0, 100); ctx.stroke();

Слайд 17

Слайд 18

Дуги

Слайд 19

ctx.beginPath(); ctx.arc(100, 100, 75, 1.2 * Math.PI, 1.8 * Math.PI, false); ctx.lineWidth =

5; ctx.strokeStyle = "black"; ctx.stroke();

Слайд 20

Слайд 21

Слайд 22

Тексты