Імітаційна модель графічного редактора Paint
Файли html i css, такі ж, як і в минулому уроці:<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Paint</title>
<link rel="stylesheet" href="pr2.css">
</head>
<body>
<canvas id="c1" width="800" height="400"></canvas>
// для вибору кольору
<input type="color" id="color">
<script src="pr2.js"></script>
</body>
</html>
#c1 {
width: 800px;
height: 400px;
border: 3px solid black;
margin: 40px;
background-image: url(setka1.png);
}
Закачати сітку більшого розміру можна тут
Працюємо над JS
var canvas = document.getElementById('c1');var ctx = canvas.getContext('2d');
1. створюємо подію по наведенні миші// об'єкт event визначає координати миші в даний момент часу
canvas.onmousemove = function(event){
var x = event.offsetX;
var y = event.offsetY;
// отримали в змінні X і Y поточні координати миші
ctx.fillRect(x-5, y-5, 10, 10);
// стиль кісті - прямокутник
}
2. створюємо подію на натискання мишіcanvas.onmousedown = function(event){
var x = event.offsetX;
var y = event.offsetY;
ctx.fillRect(x-5, y-5, 10, 10);
}
3. об'єднаємо дві події (малювати лінію неперервну по натисканню миші)
canvas.onmousedown = function(event){
canvas.onmousemove = function(event){var x = event.offsetX;
var y = event.offsetY;
ctx.fillRect(x-5, y-5, 10, 10);
}
canvas.onmouseup = function(){
canvas.onmousemove = null;
}
}
4. додаємо вибір кольору
var myColor = 'black'; // за замовчуванням чорний
document.getElementById('color').oninput = function(){
myColor = this.value;
}canvas.onmousedown = function(event){
canvas.onmousemove = function(event){
var x = event.offsetX;
var y = event.offsetY;
ctx.fillRect(x-5, y-5, 10, 10);
ctx.fillStyle = myColor;
ctx.fill();
}
canvas.onmouseup = function(){
canvas.onmousemove = null;
}
}
Немає коментарів:
Дописати коментар