From 44097da7288042e988bcb89f1c6cc817a8e1eec9 Mon Sep 17 00:00:00 2001 From: zhang Date: Sat, 4 Jun 2022 08:48:54 +0800 Subject: 0604 --- web/multi_layers/index.html | 11 +++++++++ web/multi_layers/main.js | 60 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 web/multi_layers/index.html create mode 100644 web/multi_layers/main.js (limited to 'web/multi_layers') diff --git a/web/multi_layers/index.html b/web/multi_layers/index.html new file mode 100644 index 0000000..3c0cfb8 --- /dev/null +++ b/web/multi_layers/index.html @@ -0,0 +1,11 @@ + + + + + Title + + + + + + \ No newline at end of file diff --git a/web/multi_layers/main.js b/web/multi_layers/main.js new file mode 100644 index 0000000..5aa6458 --- /dev/null +++ b/web/multi_layers/main.js @@ -0,0 +1,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); +}); -- cgit v1.2.3