From 44097da7288042e988bcb89f1c6cc817a8e1eec9 Mon Sep 17 00:00:00 2001 From: zhang Date: Sat, 4 Jun 2022 08:48:54 +0800 Subject: 0604 --- web/learn_canvas/bar_canvas.html | 50 +++++++++++++ web/learn_canvas/basics/index.html | 11 +++ web/learn_canvas/basics/main.js | 60 ++++++++++++++++ web/learn_canvas/canvas_btns/example.js | 121 ++++++++++++++++++++++++++++++++ web/learn_canvas/canvas_btns/index.html | 43 ++++++++++++ web/learn_canvas/canvas_btns/main.js | 11 +++ web/learn_canvas/canvas_btns/style.css | 18 +++++ web/learn_canvas/canvas_btns/test.html | 77 ++++++++++++++++++++ web/learn_canvas/canvas_btns/test2.html | 47 +++++++++++++ 9 files changed, 438 insertions(+) create mode 100644 web/learn_canvas/bar_canvas.html create mode 100644 web/learn_canvas/basics/index.html create mode 100644 web/learn_canvas/basics/main.js create mode 100644 web/learn_canvas/canvas_btns/example.js create mode 100644 web/learn_canvas/canvas_btns/index.html create mode 100644 web/learn_canvas/canvas_btns/main.js create mode 100644 web/learn_canvas/canvas_btns/style.css create mode 100644 web/learn_canvas/canvas_btns/test.html create mode 100644 web/learn_canvas/canvas_btns/test2.html (limited to 'web/learn_canvas') diff --git a/web/learn_canvas/bar_canvas.html b/web/learn_canvas/bar_canvas.html new file mode 100644 index 0000000..c2d7518 --- /dev/null +++ b/web/learn_canvas/bar_canvas.html @@ -0,0 +1,50 @@ + + + + + + + + + Enter the values seperated by a comma
+
+ +

+ + + + + diff --git a/web/learn_canvas/basics/index.html b/web/learn_canvas/basics/index.html new file mode 100644 index 0000000..3c0cfb8 --- /dev/null +++ b/web/learn_canvas/basics/index.html @@ -0,0 +1,11 @@ + + + + + Title + + + + + + \ No newline at end of file diff --git a/web/learn_canvas/basics/main.js b/web/learn_canvas/basics/main.js new file mode 100644 index 0000000..5aa6458 --- /dev/null +++ b/web/learn_canvas/basics/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); +}); diff --git a/web/learn_canvas/canvas_btns/example.js b/web/learn_canvas/canvas_btns/example.js new file mode 100644 index 0000000..0722613 --- /dev/null +++ b/web/learn_canvas/canvas_btns/example.js @@ -0,0 +1,121 @@ +var canvas = document.getElementById('canvas'), + context = canvas.getContext('2d'), + rubberbandDiv = document.getElementById('rubberbandDiv'), + resetButton = document.getElementById('resetButton'), + image = new Image(), + mousedown = {}, + rubberbandRectangle = {}, + dragging = false; + +// Functions.......................................................... + +function rubberbandStart(x, y) { + mousedown.x = x; + mousedown.y = y; + + rubberbandRectangle.left = mousedown.x; + rubberbandRectangle.top = mousedown.y; + + moveRubberbandDiv(); + showRubberbandDiv(); + + dragging = true; +} + +function rubberbandStretch(x, y) { + rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x; + rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y; + + rubberbandRectangle.width = Math.abs(x - mousedown.x), + rubberbandRectangle.height = Math.abs(y - mousedown.y); + + moveRubberbandDiv(); + resizeRubberbandDiv(); +} + +function rubberbandEnd() { + var bbox = canvas.getBoundingClientRect(); + + try { + context.drawImage(canvas, + rubberbandRectangle.left - bbox.left, + rubberbandRectangle.top - bbox.top, + rubberbandRectangle.width, + rubberbandRectangle.height, + 0, 0, canvas.width, canvas.height); + } + catch (e) { + // Suppress error message when mouse is released + // outside the canvas + } + + resetRubberbandRectangle(); + + rubberbandDiv.style.width = 0; + rubberbandDiv.style.height = 0; + + hideRubberbandDiv(); + + dragging = false; +} + +function moveRubberbandDiv() { + rubberbandDiv.style.top = rubberbandRectangle.top + 'px'; + rubberbandDiv.style.left = rubberbandRectangle.left + 'px'; +} + +function resizeRubberbandDiv() { + rubberbandDiv.style.width = rubberbandRectangle.width + 'px'; + rubberbandDiv.style.height = rubberbandRectangle.height + 'px'; +} + +function showRubberbandDiv() { + rubberbandDiv.style.display = 'inline'; +} + +function hideRubberbandDiv() { + rubberbandDiv.style.display = 'none'; +} + +function resetRubberbandRectangle() { + rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 }; +} + +// Event handlers..................................................... + +canvas.onmousedown = function (e) { + var x = e.clientX, + y = e.clientY; + + e.preventDefault(); + rubberbandStart(x, y); +}; + +window.onmousemove = function (e) { + var x = e.clientX, + y = e.clientY; + + e.preventDefault(); + if (dragging) { + rubberbandStretch(x, y); + } +}; + +window.onmouseup = function (e) { + e.preventDefault(); + rubberbandEnd(); +}; + +image.onload = function () { + context.drawImage(image, 0, 0, canvas.width, canvas.height); +}; + +resetButton.onclick = function(e) { + context.clearRect(0, 0, context.canvas.width, + context.canvas.height); + context.drawImage(image, 0, 0, canvas.width, canvas.height); +}; + +// Initialization..................................................... + +image.src = 'curved-road.png'; \ No newline at end of file diff --git a/web/learn_canvas/canvas_btns/index.html b/web/learn_canvas/canvas_btns/index.html new file mode 100644 index 0000000..9509727 --- /dev/null +++ b/web/learn_canvas/canvas_btns/index.html @@ -0,0 +1,43 @@ + + + + + Title + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web/learn_canvas/canvas_btns/main.js b/web/learn_canvas/canvas_btns/main.js new file mode 100644 index 0000000..be07ddb --- /dev/null +++ b/web/learn_canvas/canvas_btns/main.js @@ -0,0 +1,11 @@ +let canvas = document.getElementById("viewport"); +let ctx = canvas.getContext("2d"); + +//var win_height = 600; +//var win_width = 800; + +canvas.height = 600; +canvas.width = 800; +console.log(canvas.width, canvas.height); + +canvas.style.background = "#bbf"; \ No newline at end of file diff --git a/web/learn_canvas/canvas_btns/style.css b/web/learn_canvas/canvas_btns/style.css new file mode 100644 index 0000000..c9b2bbf --- /dev/null +++ b/web/learn_canvas/canvas_btns/style.css @@ -0,0 +1,18 @@ +#container +{ + height: 400px; + position: relative; + width: 400px; +} +#viewport +{ + height: 100%; + width: 100%; +} +#controls +{ + bottom: 0; + left: 0; + position: absolute; + width: 100%; +} \ No newline at end of file diff --git a/web/learn_canvas/canvas_btns/test.html b/web/learn_canvas/canvas_btns/test.html new file mode 100644 index 0000000..9de2318 --- /dev/null +++ b/web/learn_canvas/canvas_btns/test.html @@ -0,0 +1,77 @@ + + + + Bouncing Balls + + + + + +
+

Bouncing Balls

+ +

One hundred balls bouncing

+ + Start +
+ + + Canvas not supported + + + + + diff --git a/web/learn_canvas/canvas_btns/test2.html b/web/learn_canvas/canvas_btns/test2.html new file mode 100644 index 0000000..b456738 --- /dev/null +++ b/web/learn_canvas/canvas_btns/test2.html @@ -0,0 +1,47 @@ + + + + Rubber bands with layered elements + + + + + +
+ +
+ +
+ + + Canvas not supported + + + + + \ No newline at end of file -- cgit v1.2.3