码迷,mamicode.com
首页 > 其他好文 > 详细

2015/12/21--event,canvas

时间:2015-12-21 18:16:41      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

2015/12/21--event,canvas

标签:

原文地址:http://www.cnblogs.com/whatcanido/p/5064012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!