Canvas - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Canvas. Доклад-сообщение содержит 23 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Canvas Сокольников Алексей, 2017

Слайд 2

Описание слайда:

Слайд 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); //закрашенный прямоугольник } 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, 50, 50); //закрашенный прямоугольник...$

Описание слайда:

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, 50, 50); //незакрашенный...$

Описание слайда:

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 = 10; ctx.strokeRect(20, 20, 50,...$

Описание слайда:

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

Описание слайда:

Тексты

Слайд 23

Описание слайда:

ctx.textAlign = "center"; ctx.strokeText("Hello, world", 50, 10, 600); ctx.fillStyle = "red"; ctx.font = "italic 16pt Verdana"; ctx.fillText("test text", 50, 100);

Теги Canvas

Похожие презентации