summaryrefslogtreecommitdiff
path: root/web/learn_canvas/canvas_btns
diff options
context:
space:
mode:
Diffstat (limited to 'web/learn_canvas/canvas_btns')
-rw-r--r--web/learn_canvas/canvas_btns/example.js121
-rw-r--r--web/learn_canvas/canvas_btns/index.html43
-rw-r--r--web/learn_canvas/canvas_btns/main.js11
-rw-r--r--web/learn_canvas/canvas_btns/style.css18
-rw-r--r--web/learn_canvas/canvas_btns/test.html77
-rw-r--r--web/learn_canvas/canvas_btns/test2.html47
6 files changed, 317 insertions, 0 deletions
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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <style>
+ #container
+ {
+ height: 400px;
+ position: relative;
+ width: 400px;
+ }
+ <!--#viewport-->
+ <!--{-->
+ <!--height: 100%;-->
+ <!--width: 100%;-->
+ <!--}-->
+ #controls
+ {
+ top: 0;
+ left: 0;
+ position: absolute;
+ width: 100%;
+ }
+ </style>
+</head>
+<body>
+
+<!--<div id="container">-->
+ <!--<canvas id="viewport">-->
+ <!--</canvas>-->
+ <!--<menu id="controls">-->
+ <!--<button onclick="copy()">belief</button>-->
+ <!--<button onclick="cut()">intents</button>-->
+ <!--</menu>-->
+<!--</div>-->
+<canvas id="viewport" style="z-index:1"></canvas>
+<input type="button" style="z-index:2; position:absolute; top:100; left:100" value="test"/>
+
+</body>
+<script src="main.js"></script>
+
+</html> \ 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 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bouncing Balls</title>
+
+ <style>
+ body {
+ background: #dddddd;
+ }
+
+ #canvas {
+ margin-left: 10px;
+ margin-top: 10px;
+ background: #ffffff;
+ border: thin solid #aaaaaa;
+ }
+
+ #glasspane {
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ padding: 0px 20px 10px 10px;
+ background: rgba(0, 0, 0, 0.3);
+ border: thin solid rgba(0, 0, 0, 0.6);
+ color:# #eeeeee;
+ font-family: Droid Sans, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ cursor: pointer;
+ -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
+ -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
+ box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
+ }
+
+ #glasspane h2 {
+ font-weight: normal;
+ }
+
+ #glasspane .title {
+ font-size: 2em;
+ color:# rgba(255, 255, 0, 0.8);
+ }
+
+ #glasspane a:hover {
+ color:# yellow;
+ }
+
+ #glasspane a {
+ text-decoration: none;
+ color:# #cccccc;
+ font-size: 3.5em;
+ }
+
+ #glasspane p {
+ margin: 10px;
+ color:# rgba(65, 65, 220, 1.0);
+ font-size: 12pt;
+ font-family: Palatino, Arial, Helvetica, sans-serif;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div id='glasspane'>
+ <h2 class='title'>Bouncing Balls</h2>
+
+ <p>One hundred balls bouncing</p>
+
+ <a id='startButton'>Start</a>
+ </div>
+
+ <canvas id='canvas' width='750' height='500'>
+ Canvas not supported
+ </canvas>
+
+ <script src='example.js'></script>
+ </body>
+</html>
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 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Rubber bands with layered elements</title>
+
+ <style>
+ body {
+ background: rgba(100, 145, 250, 0.3);
+ }
+
+ #canvas {
+ margin-left: 20px;
+ margin-right: 0;
+ margin-bottom: 20px;
+ border: thin solid #aaaaaa;
+ cursor: crosshair;
+ padding: 0;
+ }
+
+ #controls {
+ margin: 20px 0px 20px 20px;
+ }
+
+ #rubberbandDiv {
+ position: absolute;
+ border: 3px solid blue;
+ cursor: crosshair;
+ display: none;
+ }
+
+ </style>
+ </head>
+
+ <body>
+ <div id='controls'>
+ <input type='button' id='resetButton' value='Reset'/>
+ </div>
+
+ <div id='rubberbandDiv'></div>
+
+ <canvas id='canvas' width='800' height='520'>
+ Canvas not supported
+ </canvas>
+
+ <script src='example.js'></script>
+ </body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 14:29:22 +0000