<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//Event事件
function showEvent(event){
alert(event.type);
}
function showButton(event){
if(event.button == 0){
alert("You checked the left button!");
}
else if(event.button == 1){
alert("You checked the middle button!");
}
else if(event.button == 2){
alert("You checked the right button!");
}
else{
alert("I can‘t find what you checked!");
}
}
function showCords(event){
document.getElementById("div1").innerHTML = "x:" + event.clientX + "y:" + event.clientY;
document.getElementById("div2").innerText = "<h3>X:" + (event.clientX - 100) + "<br>y:" + (event.clientY - 300) + "</h3>";
document.getElementById("div3").innerHTML = "screenx:" + event.screenX + "screenY:" + event.screenY ;
}
function showtarget(event){
alert(event.target.tagName);
}
function moveDiv(event) {
// alert(event.keyCode);
if (event.keyCode == 37) {
var mx = parseInt(document.getElementById("div1").style.marginLeft);
alert(mx);
mx -= 10;
alert(mx);
document.getElementById("div1").style.marginLeft = mx + "px";
}
if (event.keyCode == 39) {
var myx = parseInt(document.getElementById("div1").style.marginLeft);
alert(myx);
myx += 10;
alert(myx);
document.getElementById("div1").style.marginLeft = myx + "px";
}
}
//Canvas 画布
</script>
</head>
<body style="margin: 0px;padding: 0px;" onkeydown="moveDiv(event)">
//Canvas画布
<canvas id = "canvas" width="400px" height="400px" style="background-color: pink" onmousemove="trans(event)"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");//花不同位置的方块，除掉后面的方块。
setInterval(trans,100);
var i = 0;
function trans(){
cxt.clearRect(0,0,canvas.width,canvas.height)
cxt.fillStyle = "blue";
cxt.fillRect(i,100,20,20);
i += 10;
}
cxt.fillRect(20,20,20,20);
cxt.arc(20,20,20,0,Math.PI*2);
cxt.fill();
setInterval(trans,100);
var i = 0;
function trans(){
cxt.clearRect(0,0,400,400);
cxt.translate(5,0);
cxt.fillStyle = "blue";
cxt.fillRect(0,100,20,20);
i+=5;}
//画一个旋转的线条
cxt.translate(200,200);
setInterval(trans,100);
function trans() {
cxt.clearRect(-200,-200, 400, 400);
cxt.rotate(Math.PI / 20);
cxt.fillStyle = "blue";
cxt.beginPath();
cxt.moveTo(0, 0);
cxt.lineTo(100, 0);
cxt.lineWidth = 5;
cxt.closePath();
cxt.stroke();
}
//方法二
// setInterval(trans,100);
// var angle = 0;
function trans(){
cxt.clearRect(0,0,400,400);
cxt.beginPath();
cxt.moveTo(200, 200);
var angle = Math.atan2((event.clientY - 200),(e.clientX - 200));
var vx = 200 + 100*Math.cos(angle);
var vy = 200 + 100*Math.sin(angle);
cxt.lineTo(vx,vy);
cxt.lineWidth = 5;
cxt.closePath();
cxt.stroke();
// angle+=5;
}
</script>
//Event事件
<!--<div style="width:2000px;height: 200px;background-color:green;onclick = showEvent(event)" onmousedown="showButton(event)"-->
<!--onmousemove="showCords(event)" id = "div1">-->
<div style="width: 200px;height: 200px;background-color: lightgreen; margin-left: 100px;" id = "div1" onmousemove="showCords(event)"
onkeydown="moveDiv(event)">
</div>
<div style="width: 200px;height: 200px;background-color: lightgreen; margin-left: 100px; " id = "div2" onmousemove="showCords(event)">
</div>
<div style="width: 200px;height: 200px;background-color: lightgreen; margin: 100px;" id = "div3" onmousemove="showCords(event)">
</div>
<img src="08.jpg">
<h1>Hello world</h1>
<p>This is a paragraph!</p>
</body>
</html>