diff options
| author | zhang <zch921005@126.com> | 2022-06-04 08:48:54 +0800 |
|---|---|---|
| committer | zhang <zch921005@126.com> | 2022-06-04 08:48:54 +0800 |
| commit | 44097da7288042e988bcb89f1c6cc817a8e1eec9 (patch) | |
| tree | 7c28da29f31ca429b8d27ed7441d650f1195812d /web/multi_layers | |
| parent | 0f885b830ac552bfd357dec74c70e1349434b58b (diff) | |
0604
Diffstat (limited to 'web/multi_layers')
| -rw-r--r-- | web/multi_layers/index.html | 11 | ||||
| -rw-r--r-- | web/multi_layers/main.js | 60 |
2 files changed, 71 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Title</title> +</head> +<body> + <canvas id="canvas"></canvas> +</body> +<script src="main.js"></script> +</html>
\ 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); +}); |