利用Jxcex在Canvas中绘制动态时钟 | 第十日

第十日

利用Jxcex在Canvas中绘制动态时钟

在上次 Canvas中随机绘制圆形之后，看了cnblog中张磊大神的文章《旋转重力场粒子系统》受到启发，就用Jscex在Canvas中做了一个时钟，很多代码都是用的张磊的，而且有些啰嗦，很多可以写成函数，本人比较懒，暂且先这么着吧。

源码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Canvas Test</title>
		<script language="javascript" type="text/javascript" src="./src/uglifyjs-parser.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-jit.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-builderbase.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async-powerpack.js"></script>
	</head>
	<body style="margin:0;padding:0">

		<canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" onmousemove="get_location(event)" ></canvas>

		<script type="text/javascript">
		//Your browser does not support the canvas element.
		var c = document.querySelector('#myCanvas');
		var cxt = c.getContext('2d');

		function get_location(e){

			//cxt.clearRect(0,0,800,600);
			x = e.clientX;
			y = e.clientY;

			var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
			var color = '#';
			var brush = Math.random()*30;
			for (var i = 0; i < 6; i++) {
				//取得0-15之间的随机整数
				index = Math.round(Math.random() * 15);
				color += colors[index];
			}
			cxt.fillStyle=color;
			cxt.beginPath();
			cxt.arc(x,y,brush,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
		}

		var canvas = document.getElementById("myCanvas");
		var cxt = canvas.getContext("2d");
		var line = {
		x: 400,
		y: 300,
		length: 200,
		angle: 0
		};
		var PER = Math.PI/30;

		var roundAsync = eval(Jscex.compile("async", function () {
		while (true) {
		cxt.fillStyle = "rgba(0, 0, 0, .3)";
		cxt.fillRect(0, 0, canvas.width, canvas.height);
		//绘制时钟上的点
		for(var j=0;j<=60;j++){
			var r = 2;
			if(j%5 == 0){r = 5;}
			var sec = PER*j;
			var xsec = line.x + line.length * Math.cos(sec);
			var ysec = line.y + line.length * Math.sin(sec);
			cxt.fillStyle = "#fff";
			cxt.beginPath();
			cxt.arc(xsec, ysec, r, 0, Math.PI * 2, true);
			cxt.closePath();
			cxt.fill();
		}
		try {
		//获取时间
		var date = new Date();
		var h = date.getHours();
		var m = date.getMinutes();
		var s = date.getSeconds();

		line.angle += (Math.PI * 2) / 300;
		var x = line.x + line.length * Math.cos(line.angle);
		var y = line.y + line.length * Math.sin(line.angle);

		var TWO_PI = Math.PI*2;
		var HALF_PI = Math.PI/2;
		//时针
		var xh = line.x + Math.cos(TWO_PI*(h%12)/12- HALF_PI)*150 ;
		var yh = line.y + Math.sin(TWO_PI*(h%12)/12- HALF_PI)*150 ;

		cxt.strokeStyle = "#fff";
		cxt.lineWidth = 6;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xh, yh);
		cxt.closePath();
		cxt.stroke();

		//分针
		var xm = line.x + Math.cos(TWO_PI*m/60- HALF_PI)*170 ;
		var ym = line.y + Math.sin(TWO_PI*m/60- HALF_PI)*170;

		cxt.strokeStyle = "#f00";
		cxt.lineWidth = 4;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xm, ym);
		cxt.closePath();
		cxt.stroke();
		//秒针
		var xs = line.x + Math.cos(TWO_PI*s/60- HALF_PI)*190 ;
		var ys = line.y + Math.sin(TWO_PI*s/60- HALF_PI)*190;

		cxt.strokeStyle = "#ff0";
		cxt.lineWidth = 2;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xs, ys);
		cxt.closePath();
		cxt.stroke();

		//画表的中心
		cxt.fillStyle = "#000";
		cxt.beginPath();
		cxt.arc(line.x, line.y, 6, 0, Math.PI * 2, true);
		cxt.closePath();
		cxt.fill();
		//这个还是上次文章那个，鼠标滑过显示随机圆型
		var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
			var color = '#';
			var brush = Math.random()*10;
			for (var i = 0; i < 6; i++) {
				//取得0-15之间的随机整数
				index = Math.round(Math.random() * 15);
				color += colors[index];
			}
			cxt.fillStyle=color;
			cxt.beginPath();

			cxt.arc(x,y,brush,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
			cxt.save();

		$await(Jscex.Async.sleep(100));
		}
		catch (e) {
		alert(e)
		}
		}
		}))
		roundAsync().start();
	</script>
	</body>
</html>

原创文章，转载请注明： 转载自第十日

本文链接地址: 利用Jxcex在Canvas中绘制动态时钟

Tags: Canvas, HTML5, JavaScript, Jscex

发表评论取消回复

近期文章

近期评论

Barbara 发表在《用HTML5的Canvas画简单图形》
我发表在《在Canvas里画随机圆形》

文章归档

分类目录

标签云