第一篇博客

Random Circles Generation

代码

HTML

<DOCTYPE! html>

<html>

<head>
	<title>Random Circles Generator</title>

	<style>
	  #myCanvas
	  {
		background-color: black;
	  }
	</style>

</head>


<body>
  <input id="clickMe" type="button" value="Generate" onclick="generateCircles();" />
  <canvas id="myCanvas"></canvas>


  <script type="text/javascript">
	var c = document.getElementById("myCanvas");
	c.width = window.innerWidth;
	c.height = window.innerHeight;

	generateCircles();

	function generateCircles()
	{
	  for(var i=0; i<10; i++)
	  {
	   drawCircle(Math.random()*window.innerWidth, Math.random()*window.innerHeight, Math.random()*50, "blue");
	  }
	}

	function drawCircle(x, y, size, col)
	{
	  var circle = c.getContext("2d");
	  circle.beginPath();
	  circle.arc(x, y, size, 0, 2 * Math.PI);
	  circle.fillStyle = col;
	  circle.fill(); 
	}
  </script>
</body>

</html>

CSS

body{

}

运行截图

运行截图

长按扫码关注
长按扫码关注

版权声明:本文为m0_43372960原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_43372960/article/details/99607231