[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
プログラミング、3DCGとその他いろいろについて
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
<canvas id="keyUpEventDemoCanvas" width="300" height="200"></canvas> <script src="https://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1371908340"> </script>
(function () { var canvas = document.getElementById("keyUpEventDemoCanvas"); canvas.containsMouse = function (mousePosition) { var clientRect = this.getBoundingClientRect(); return clientRect.left < mousePosition.x && mousePosition.x < clientRect.right && clientRect.top < mousePosition.y && mousePosition.y < clientRect.bottom; }; var mousePosition = new Object(); document.addEventListener( "mousemove", function (e) { mousePosition.x = e.clientX; mousePosition.y = e.clientY; } ); document.addEventListener( "keyup", function (e) { if (canvas.containsMouse(mousePosition)) { alert("key up"); } }); })();
<canvas id="mouseDownEventDemoCanvas" width="300" height="200"></canvas> <script> (function () { var canvas = document.getElementById("mouseDownEventDemoCanvas"); canvas.addEventListener( "mousedown", function (e) { alert("mouse down"); }); })(); </script>
<canvas id="clickEventDemoCanvas" width="300" height="200"></canvas> <script> (function () { var canvas = document.getElementById("clickEventDemoCanvas"); canvas.addEventListener( "click", function (e) { var bounds = canvas.getBoundingClientRect(); alert("X" + (e.clientX - bounds.left)+ " ,Y" + (e.clientY - bounds.top)); }); })(); </script>
プロパティ | 説明 |
screenX | マウスポインタのスクリーン上のX座標を取得します。 |
screenY | マウスポインタのスクリーン上のY座標を取得します。 |
clientX | マウスポインタのDOMコンテント上のX座標を取得します。 |
clientY | マウスポインタのDOMコンテント上のY座標を取得します。 |
ctrlKey | イベントが起きた時、ctrlキーが押されていればtrue、そうでなければfalseを取得します。 |
shiftKey | イベントが起きた時、shiftキーが押されていればtrue、そうでなければfalseを取得します。 |
altKey | イベントが起きた時、altキーが押されていればtrue、そうでなければfalseを取得します。 |
metaKey | イベントが起きた時、meta/ctrlキーが押されていればtrue、そうでなければfalseを取得します。 |
button | イベントを起こしたマウスボタンを取得します。 |
buttons | ユーザーが押しているマウスボタンを取得します。 |
relatedTarget | 関連した要素を取得します。たとえばonmouseoutイベントではマウスポインタが入った要素を表します。(マウスポインタが出た要素はtargetで取得します。) |
<canvas id="drawAnimatedRectCanvas" width="300" height="300"></canvas> <script> (function () { var canvas = document.getElementById("drawAnimatedRectCanvas"); var context = canvas.getContext("2d"); var time = 0; function drawFrame() { window.requestAnimationFrame(drawFrame); context.clearRect(0, 0, canvas.width, canvas.height); time += 1.0 / 60; context.fillRect(0, 100 * (1 + Math.sin(time)), 100, 100); } drawFrame(); })(); </script>
<canvas id="drawSetIntervalDemoCanvas" width="300" height="300"></canvas> <script> (function () { var canvas = document.getElementById("drawSetIntervalDemoCanvas"); var context = canvas.getContext("2d"); var time = 0; var dTime = 1.0 / 60; window.setInterval( function () { context.clearRect(0, 0, canvas.width, canvas.height); time += dTime; context.fillRect(0, 100 * (1 + Math.sin(time)), 100, 100); }, dTime * 1000 ); })(); </script>
<canvas id="drawInversedImageCanvas" width="300" height="200"></canvas> <script type="text/JavaScript" src="https://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1371278164"> </script>
(function() { var canvas = document.getElementById("drawInversedImageCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(0, 0, 255)"; context.fillRect(0, 0, 100, 100); context.strokeStyle = "rgb(255, 255, 255)"; context.strokeRect(10, 10, 80, 80); var imageData = context.getImageData(0, 0, 100, 100); for (var i = 0; i < imageData.data.length; i += 4) { var max = 255; imageData.data[i + 0] = max - imageData.data[i + 0]; imageData.data[i + 1] = max - imageData.data[i + 1]; imageData.data[i + 2] = max - imageData.data[i + 2]; imageData.data[i + 3] = max; } context.putImageData(imageData, 100, 0); })();
<canvas id="drawWaveCanvas" width="300" height="200"></canvas> <script type="text/JavaScript" src="https://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1371278220"> </script>
(function() { var canvas = document.getElementById("drawGradationManuallyCanvas"); var context = canvas.getContext("2d"); var size = { width: 200, height: 100 }; var imageData = context.createImageData(size.width, size.height); for (var x = 0; x < size.width; x++) { for (var y = 0; y < size.height; y++) { var pixelIndex = x + y * size.width; var dataIndex = pixelIndex * 4; var max = 255; imageData.data[dataIndex + 0] = max * x / size.width; imageData.data[dataIndex + 1] = max * y / size.height; imageData.data[dataIndex + 2] = max; imageData.data[dataIndex + 3] = max; } } context.putImageData(imageData, 0, 0); })();