-1
我正在學習javascript。如何將輸入文本的輸入文本複製到另一個輸入文本？
我不知道First Source的輸入如何用作TextBox的第二個源文件的輸入？
我應該怎麼辦？之間
@@@@@@@@@@@@@@@ First Source @@@@@@@@@@@@@@@@@@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#container canvas{
position: absolute;
}
#land{
background-color: #ececec;
}
#temp{
display: none;
}
</style>
</head>
<body>
<div id="container">
<canvas id="land" width="800" height="600"></canvas>
<canvas id="sky" width="800" height="600"></canvas>
<canvas id="temp" width="800" height="600"></canvas>
</div>
<script src="lib/jquery.js"></script>
<script src="src/vec.js"></script>
<script src="src/vecoper.js"></script>
<script>
var land = document.getElementById('land');
var landc = land.getContext('2d');
var sky = document.getElementById('sky');
var skyc = sky.getContext('2d');
var temp = document.getElementById('temp');
var tempc = temp.getContext('2d');
var PI2 = 2*Math.PI;
var Land = {
init:function(){
this.vtx = 20;
this.tempColor = 'blue'
this.pixelmap = [];
var x = 0;
var y = land.height/1.1;
var l = land.width/this.vtx;
var d;
var h;
landc.save();
landc.fillStyle = '#cccccc';
landc.beginPath();
landc.moveTo(x, y);
for(var i=0, count=this.vtx ; i<count ; i+=1){
x+=l;
h = Math.random() * 20;
d = Math.round(Math.random());
if(d){ y-=h; }
else{ y+=h; }
landc.lineTo(x, y);
}
landc.lineTo(x, land.height);
landc.lineTo(0, land.height);
landc.closePath();
landc.fill();
landc.restore();
this.updatePixelmap();
},
updatePixelmap:function(){
tempc.drawImage(land, 0, 0);
this.pixelmap = tempc.getImageData(0,0, temp.width, temp.height).data;
},
isCollision:function(bomb){
temp.width = temp.width;
var x = bomb.ltx;
var y = bomb.lty;
var targetPixelData = landc.getImageData(x, y, bomb.size*2, bomb.size*2).data;
for(var i= 0, count=bomb.pixelmap.length ; i<count ; i+=4){
a = bomb.pixelmap[ i+3 ];
if(a != 0 && targetPixelData[ i+3 ] != 0 && targetPixelData[ i ] != 0 || targetPixelData[ i+1 ] != 0 || targetPixelData[ i+2 ] != 0){
return true;
}
}
return false;
},
destroy:function(bomb){
landc.save();
landc.globalCompositeOperation = "destination-out";
landc.beginPath();
landc.arc(bomb.x, bomb.y, bomb.power, 0, Math.PI*2, false);
landc.fill();
landc.restore();
}
};
var Bomb = function(){
this.init();
};
Bomb.prototype = {
init:function(){
this.x = Math.random() * sky.width;
this.y = Math.random() * -200;
this.speed = Math.random() + 5;
this.size = (Math.random() * 10) + 5;
this.power = this.size*3;
this.pixelmap = [];
this.color = '#cccccc';
this.tempColor = 'red';
this.updatePixelmap();
},
updatePixelmap:function(){
this.pixelmap = [];
var size = this.size;
var size2 = this.size*2;
temp.width = temp.width;
tempc.save();
tempc.fillStyle = this.tempColor;
tempc.beginPath();
tempc.arc(size, size, size, 0, PI2, false);
tempc.fill();
tempc.restore();
this.pixelmap = tempc.getImageData(0,0, size2, size2).data;
},
update:function(){
this.y += this.speed;
this.ltx = this.x-this.size;
this.lty = this.y-this.size;
skyc.save();
skyc.fillStyle = this.color;
skyc.beginPath();
skyc.arc(this.x, this.y, this.size, 0, PI2, false);
skyc.fill();
skyc.restore();
},
exp:function(){
this.speed = 0;
}
};
var World = {
loopId:null,
land:Land,
bombs:(function(){
var result = [];
for(var i= 0, count=10 ; i<count ; i+=1){ result.push(new Bomb()); }
return result;
}()),
init:function(){
land.width = land.width;
sky.width = sky.width;
this.land.init();
},
update:function(){
sky.width = sky.width;
skyc.save();
var bomb;
for(var i= 0, count=this.bombs.length ; i<count ; i+=1){
bomb = this.bombs[ i];
bomb.update();
if(!this.land.isCollision(bomb)) {
if(this.land.isCollision(bomb)){
this.land.destroy(bomb);
bomb.exp();
bomb.init();
}
}else{
console.log(bomb.y+bomb.size/2, land.height);
if(bomb.y+bomb.size/2 > land.height){
bomb.init();
}
}
}
skyc.restore();
},
start:function(){
var self = this;
this.stop();
this.loopId = setInterval(function(){
self.update();
}, 1000/40)
},
stop:function(){
clearInterval(this.loopId);
}
};
World.init();
World.start();
</script>
</body>
</html>
@@@@@@@@@@@@@@@ secound source @@@@@@@@@@@@@@@@@
enter code here
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
* {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
width: 800px;
height: 600px;
background: red;
}
#myCanvas {
width: 800px;
height: 600px;
background: blue;
}
#stop {
position: absolute;
}
#write {
position: absolute;
width: 200px;
height: 24px;
left: 50%;
margin-left: -100px;
margin-top: -50px;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var write = document.getElementById('write');
document.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
write.focus();
}
});
write.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
console.log(write.value);
write.value = '';
}
});
// a flag to let you stop the animation
var ok2animate=true;
// a Drop pseudo-class
// Properties: current x,y & the speed at which this drop falls
function Drop(){
this.x=Math.random()*(canvas.width-20);
this.y=-Math.random()*20;
this.fallRate=1;
}
// draw this drop on the canvas
Drop.prototype.draw=function(){
ctx.beginPath();
ctx.moveTo(this.x-5,this.y);
ctx.lineTo(this.x,this.y-7);
ctx.lineTo(this.x+5,this.y);
ctx.arc(this.x,this.y,5,0,Math.PI);
ctx.closePath();
ctx.fill();
return(this);
}
// make this drop "fall"
Drop.prototype.fall=function(){
this.y+=this.fallRate;
return(this);
}
// an animation loop to make some test drops fall
function animate(){
// request another animation frame
if(ok2animate){
requestAnimationFrame(animate);
}
// fill the canvas with the orange background
// ctx.fillStyle="orange";
// ctx.fillRect(0,0,canvas.width,canvas.height)
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="Game_Background.jpg";
// make all drops fall and then redraw them
ctx.fillStyle="red";
for(var i=0;i<drops.length;i++){
drops[i].fall().draw();
}
}
// let the user stop the animation
$("#stop").click(function(){
ok2animate=false;
});
// an array of objects each representing 1 drop
var drops=[];
// add some test drops
for(var i=0;i<10;i++){
drops.push(new Drop());
}
// start the animation
requestAnimationFrame(animate);
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<button id="stop">Stop</button>
<canvas id="myCanvas" width=800 height=600></canvas>
<input type="text" id="write">
</div>
</body>
</html>