canvas画布实现钟表的绘制,并时刻显示时间,canvas画圆,

最新推荐文章于 2024-09-14 22:43:29 发布

七上八下的爆米花

最新推荐文章于 2024-09-14 22:43:29 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript html5

本文链接：https://blog.csdn.net/lanseguhui/article/details/82024939

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#cv{
			box-shadow:5px 5px 5px gray;
			border:1px solid #ccc;
		}
	</style>
</head>
<body>
	<canvas  width="500" height="500"  id="cv">
		当浏览器版本太低,不支持canvas绘图功能,请换个浏览器试试
	</canvas>
</body>
<script>
	// ctx.beginPath();
	// ctx.moveTo(250,250);
	//第四个参数:0度的位置就是x轴正方向,顺正逆负:true表示逆时针,false表示顺时针
	// ctx.arc(250,250,200,0,Math.PI/3,false);
	// ctx.stroke();
	// ctx.fill();
	//

	setInterval(time,1000);
	time();
	//事件函数
	function time(){
		//获取元素
		var cv = document.getElementById("cv");
		var ctx = cv.getContext('2d');
		//Math.PI是180度,du定义为6度的角度
		var du = Math.PI/180*6;
		//通过画弧将所有的弧线链接就是圆的外形
		for(var i=0;i<60;i++){
			ctx.beginPath();
			ctx.moveTo(250,250);
			ctx.arc(250,250,20