也许我正试图让我的技能变得有点复杂。我想做的是：
- 在画布 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>
但我做错了什么，因为它会造成洞，但洞没有跟随指针。有任何想法吗？我已准备好从头开始，但我需要一些帮助。太感谢了。