Слайд 2
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-1.jpg)
Слайд 3
![Как подключить? Обновите браузер start();](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-2.jpg)
Как подключить?
Слайд 4
![Как использовать? function start() { var example = document.getElementById("canvas"); var ctx = example.getContext('2d'); }](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-3.jpg)
Как использовать?
function start() {
var example = document.getElementById("canvas");
var ctx =
example.getContext('2d');
}
Слайд 5
![Прямоугольники](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-4.jpg)
Слайд 6
![function drawFigures(ctx) { ctx.strokeRect(20,20,50,50); //незакрашенный прямоугольник ctx.fillRect(80, 80, 50, 50); //закрашенный прямоугольник }](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-5.jpg)
function drawFigures(ctx) {
ctx.strokeRect(20,20,50,50); //незакрашенный прямоугольник
ctx.fillRect(80, 80, 50, 50); //закрашенный
прямоугольник
}
Слайд 7
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-6.jpg)
Слайд 8
![function _drawFigures(ctx) { ctx.strokeRect(20, 20, 50, 50); //незакрашенный прямоугольник ctx.fillRect(80,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-7.jpg)
function _drawFigures(ctx) {
ctx.strokeRect(20, 20, 50, 50); //незакрашенный прямоугольник
ctx.fillRect(80, 80,
50, 50); //закрашенный прямоугольник
ctx.clearRect(50, 50, 50, 50); //стираем прямоугольник
}
Слайд 9
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-8.jpg)
Слайд 10
![Цвета ctx.strokeStyle = "red"; ctx.strokeStyle = "#FF0000"; ctx.strokeStyle = "rgb(255,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-9.jpg)
Цвета
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,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-10.jpg)
function _drawFigures(ctx) {
ctx.strokeStyle = "red";
ctx.fillStyle = "green";
ctx.strokeRect(20, 20,
50, 50); //незакрашенный прямоугольник
ctx.fillRect(80, 80, 50, 50); //закрашенный прямоугольник
}
Слайд 12
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-11.jpg)
Слайд 13
![function _drawFigures(ctx) { ctx.strokeStyle = "red"; ctx.fillStyle = "green"; ctx.lineWidth](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-12.jpg)
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
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-13.jpg)
Слайд 15
![Прямые линии](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-14.jpg)
Слайд 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();](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-15.jpg)
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
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-16.jpg)
Слайд 18
![Дуги](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-17.jpg)
Слайд 19
![ctx.beginPath(); ctx.arc(100, 100, 75, 1.2 * Math.PI, 1.8 * Math.PI,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-18.jpg)
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
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-19.jpg)
Слайд 21
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-20.jpg)
Слайд 22
![Тексты](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/11497/slide-21.jpg)