1
400x400（canvas1）の元のキャンバスを表示し、50x50（canvas2）の小さなキャンバスを使用して領域を選択し、キャンバス200x200（canvas3）に増幅結果を表示します。私はcanvas2がマウスで動きますが、canvas3はcanvas1の右側にしておきたいと思います。html - cssと並んで配置されたレイアウト
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
position: relative;
border: 1px solid black;
}
.inner {
border:1px solid red;
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
<div id="glass" class="inner">
<canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
<div class="inner" style="top: 25px; left: 0px; width: 50px;"/>
<div class="inner" style="top: -25px; left: 25px; height: 50px;"/>
</div>
<div id="zoomer" class="container">
<canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
<div class="inner" style="top: 100px; left: 0px; width: 200px;"/>
<div class="inner" style="top: -100px; left: 100px; height: 200px;"/>
</div>
<div class="container">
<input id="browser" type='file' ></input>
</div>
<script>
var glass = document.getElementById('glass');
var canvas2 = document.getElementById('canvas2');
var w = canvas2.width;
var h = canvas2.height;
function onMouseMove(event,thiz) {
var x = event.offsetX;
var y = event.offsetY;
glass.style.left = (x - w/2) + 'px';
glass.style.top = (y - h/2) + 'px';
}
</script>
</body>
</html>
しかし、現在の結果は次のとおりです。
- canvas2とcanvas3は、マウスの移動ならば一緒に移動します。
- 選択したファイルのボタンが3
は、私はマウスでのみcanvas2（および十字線）の移動を希望するが、側で静的側面をcanvas1、canvas3とchosseファイルボタンを保つキャンバスと重複しました。
