<!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#ccc;
}
</style>
<title>心跳</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function () {
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
cobj.arc(200,200,50,0,2*Math.PI);
cobj.stroke();
var angle=0;//取值范围在[-1,1]
canvas.οnclick=function (e) {
var mx=e.layerX;
var my=e.layerY;
if(cobj.isPointInPath(mx,my)){//isPointInPath判断鼠标的坐标是否在指定的对象(圆)中
setInterval(function () {
cobj.clearRect(0,0,400,400);//清除画布
angle+=0.2;
cobj.beginPath();
cobj.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
},50)
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400>
</canvas>
</body>
</html>
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#ccc;
}
</style>
<title>捕鱼炮台</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function () {
var canvas=document.getElementById("canvas");
var cobj=canvas.getContext("2d");
cobj.lineWidth=5;
cobj.strokeStyle="#ff0000";
cobj.moveTo(250,400);
cobj.lineTo(250,360);
cobj.stroke();
canvas.οnmοusemοve=function (e) {
var mx=e.layerX;//获取鼠标的x坐标
var my=e.layerY;
var startx=250;
var starty=400;
var angle=Math.atan2((my-starty),(mx-startx));
cobj.clearRect(0,0,500,500);
cobj.beginPath();
cobj.moveTo(startx,starty);
cobj.lineTo(startx+40*Math.cos(angle),starty+40*Math.sin(angle));
cobj.stroke();
}
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
</canvas>
</body>
</html>
</pre><pre code_snippet_id="1570523" snippet_file_name="blog_20160130_4_8649631" name="code" class="html">