自分のスキルのために少し複雑なものを作ろうとしているのかもしれません。私がやりたいことは次のとおりです。
- キャンバス 0 (z-index:1) でビデオを再生する
- キャンバス 1 (z-index:2) でビデオを再生する
- キャンバス2に丸穴を作る
- 穴をマウスの位置に追従させます (キャンバス上で);
私はこれを書いた：
<!DOCTYPE HTML><html><head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
height:400px;
width:700px;
position:absolute;
top:0px;
left:0px;
}
#myCanvas1 {
border: 1px solid #9C9898;
height:400px;
width:700px;
position:absolute;
top:100px;
left:0px;
}
#BIG{
height:800px;
width:800px;
position:absolute;
top:0px;
left:0px;
}
#v{
position:absolute;
top:600px;
height:40px;
width:100px;
}
#v1{
position:absolute;
top:500px;
height:0px;
width:0px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var centerX= 200;
var centerY= 200;
document.addEventListener('DOMContentLoaded', function(){
},false);
function draw(v,c,w,h,v1,c1, radius, centerX, centerY) {
if(v.paused || v.ended){
v1.pause();
return false;
}
c.beginPath();
c.arc(centerX, centerY, radius, 0, 2* Math.PI, true);
c.clip();
c.drawImage(v,0,0,w,h);
c1.drawImage(v1,0,0,w,h);
setTimeout(draw,20,v,c,w,h,v1,c1, radius, centerX, centerY);
}
function getMousePos(canvas, evt){
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
centerX=mouseX;
var mouseY = evt.clientY - top + window.pageYOffset;
centerY=mouseY;
return {
x: mouseX,
y: mouseY
};
}
function writeMessage(canvas, message ,x){
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(x, 10, 25);
}
window.onload = function(){
var v = document.getElementById('v');
var v1=document.getElementById('v1');
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var canvas1 = document.getElementById('myCanvas1');
var context1 = canvas1.getContext('2d');
var cw = Math.floor(canvas.clientWidth );
var ch = Math.floor(canvas.clientHeight );
canvas.width = cw;
canvas.height = ch;
canvas1.width = cw;
canvas1.height = ch;
var radius = 70;
canvas.addEventListener('mousemove', function(evt){
var mousePos = getMousePos(canvas, evt);
var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
writeMessage(canvas, message, mousePos.x);
}, false);
v.addEventListener('play', function(){
draw(this,context,cw,ch, v1, context1, centerX, centerY, radius);
v1.play();
},false);
};
</script>
</head>
<body>
<div id="BIG">
<canvas id="myCanvas1" width="1000" height="1000"></canvas>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
</div>
<video id="v1" >
<source src=video.webm type=video/webm>
</video>
<video id="v" controls >
<source src=video.mp4 type=video/mp4>
</video>
<span>
</span>
</body>
</html>
しかし、それは穴を作るので何か間違っていますが、穴はポインターに従いません。何か案は？ゼロからやり直す準備はできていますが、助けが必要です。どうもありがとう。