index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="c1" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 40px;
background-image: url(setka.png);
}
script.js
var canvas = document.getElementById('c1'); // полчим canvas
var ctx = canvas.getContext('2d');
// Рисуем залитый прямоугольник
ctx.fillStyle = 'red'; // стиль заливки
// ctx.fillRect(x, y, width, heigh);
ctx.fillRect(100, 50, 150, 75);
ctx.fillStyle = 'blue';
ctx.fillRect(150, 100, 100, 50);
ctx.clearRect(0, 0, 400, 200); // стирает canvas - терка
// Рисуем незалитый прямоугольник
ctx.strokeStyle = "green"; // цвет обводки
ctx.lineWidth = "10"; // ширина обводки
ctx.rect(50, 10, 100, 100); // задаем координаты прямоугольника
ctx.stroke(); // команда на отрисовку
ctx.fillStyle = "orange"; // укажем цвет заливки
ctx.fill(); // зальем прямоугольник
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="c1" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 40px;
background-image: url(setka.png);
}
script.js
var canvas = document.getElementById('c1'); // полчим canvas
var ctx = canvas.getContext('2d');
// Рисуем залитый прямоугольник
ctx.fillStyle = 'red'; // стиль заливки
// ctx.fillRect(x, y, width, heigh);
ctx.fillRect(100, 50, 150, 75);
ctx.fillStyle = 'blue';
ctx.fillRect(150, 100, 100, 50);
ctx.clearRect(0, 0, 400, 200); // стирает canvas - терка
// Рисуем незалитый прямоугольник
ctx.strokeStyle = "green"; // цвет обводки
ctx.lineWidth = "10"; // ширина обводки
ctx.rect(50, 10, 100, 100); // задаем координаты прямоугольника
ctx.stroke(); // команда на отрисовку
ctx.fillStyle = "orange"; // укажем цвет заливки
ctx.fill(); // зальем прямоугольник
Комментариев нет:
Отправить комментарий