1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
var win_height = window.innerHeight;
var win_width = window.innerWidth;
canvas.height = win_height;
canvas.width = win_width;
console.log(canvas.width, canvas.height);
canvas.style.background = "#bbf";
class Circle {
constructor(context, xpos, ypos, radius, color) {
this.context = context;
this.xpos = xpos;
this.ypos = ypos;
this.radius = radius;
this.color = color;
}
draw() {
this.context.beginPath();
this.context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI*2, this.color);
this.context.strokeStyle = "grey";
this.context.lineWidth = 15;
this.context.fillStyle = this.color;
this.context.fill();
this.context.stroke();
this.context.closePath();
}
clickCircle(xmouse, ymouse) {
const distance = Math.sqrt((xmouse - this.xpos) * (xmouse - this.xpos) + (ymouse - this.ypos) * (ymouse - this.ypos));
if (distance <= this.radius) {
return true;
}
return false;
}
changeColor (newColor) {
this.color = newColor;
this.draw();
}
}
let circle = new Circle(ctx, 200, 200, 100, "blue");
circle.draw(ctx);
canvas.addEventListener("click", (event) => {
// console.log(event);
// console.log("clicked canvas");
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
if (circle.clickCircle(x, y)) {
circle.changeColor("red");
} else {
circle.changeColor("blue");
}
// console.log(rect);
});
|
