我想尝试为我的技能做一些复杂的事情，也许吧。 我想做的是：
我写过：
<!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>
但是我做错了，因为它造了一个洞，但洞不跟着指针。有任何想法吗？我准备从头开始了，但我需要一些帮助。非常感谢你。
答案 0 :(得分：0)
这是我找到的解决方案：`
<style>
body {
margin: 0px;
padding: 0px;
background:#010101;
color:#EEE;
height:700px;
text-align:center;
}
#title{
position:relative;
font-family: 'Lobster', cursive;
text-shadow: 1px 1px 3px #888;
}
#Regia{
position:relative;
font-family: 'Lobster', cursive;
top:425px;
}
#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:0px;
left:0px;
-webkit-box-shadow: 5px 5px 54px -10px #555; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
box-shadow: 5px 5px 54px -10px #555; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#BIG{
height: 500px;
width: 700px;
position: relative;
top: 0px;
left: 50%;
margin-left: -350px;
}
#v{
position:relative;
top:425px;
height:0px;
width:700px;
}
#v1{
position:absolute;
top:500px;
height:0px;
width:0px;
}
</style>
<script>
var centerX= 20;
var centerY= 20;
document.addEventListener('DOMContentLoaded', function(){
},false);
function draw(v,c,w,h,v1,c1, radius) {
if(v.paused || v.ended){
v1.pause();
}
c.save();
c.clearRect(0, 0, 700, 400);
c.globalAlpha=1;
c.beginPath();
c.arc(centerX, centerY, radius, 0, 2* Math.PI, false);
c.clip();
c.drawImage(v,0,0,w,h);
c.restore();
c1.drawImage(v1,0,0,w,h);
setTimeout(draw,33,v,c,w,h,v1,c1, radius);
}
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
centerX= evt.clientX - left + window.pageXOffset;
centerY = evt.clientY - top + window.pageYOffset;
}
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 = 80;
canvas.addEventListener('mousemove', function(evt){
getMousePos(canvas, evt);
}, false);
v.addEventListener('play', function(){
draw(this,context,cw,ch, v1, context1, radius);
v1.play();
},false);
};
</script>
</head>
<body>
<div id="title"><H1>Test Lente HTML5 - Online</h1></div>
<div id="BIG">
<canvas id="myCanvas1" width="400" height="400"></canvas>
<canvas id="myCanvas" width="400" height="400"></canvas>
<video id="v" controls="controls" >
<source src=video0.mp4 type=video/mp4></source>
<source src=video0.ogg type=video/ogg></source>
<source src=video0.webm type=video/webm><p>Your browser can’t play HTML5 video.</p></source>
</video>
<div id="Regia"> <p>Streaming Test</p></div>
</div>
<video id="v1" muted="muted" >
<source src=video1.webm type=video/webm></source>
<source src=video1.mp4 type=video/mp4></source>
<source src=video1.ogg type=video/ogg></source>
</video>
<span>
</span>
</body>
</html>
我做了一些明确的改变。 现在的步骤是：
我知道也许x和y鼠标变量不是那么礼貌的全球......任何其他好的解决方案都值得赞赏！
`