canvas 心跳和捕鱼炮台

最新推荐文章于 2022-08-17 19:55:08 发布

不是我的货

最新推荐文章于 2022-08-17 19:55:08 发布

阅读量885

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/wym1581/article/details/50611497

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

不是我的货

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas 心跳和捕鱼炮台

canvas{ background:#ccc; } 心跳 window.onload=function () { var canvas=document.getElementById("canvas"); var cobj=canvas.getContext("2d"); cobj.arc(200
复制链接

扫一扫

专栏目录