canvas 心跳和捕鱼炮台

来源：互联网发布：淘宝上怎么开店卖东西编辑：程序博客网时间：2024/04/28 15:42

<!DOCTYPE html><html><head>   <style>   canvas{   background:#ccc;   }   </style><title>心跳</title><meta charset=""><link rel="stylesheet" href=""><script>  window.onload=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.onclick=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.onload=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.onmousemove=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">

0 0