井井客

搜索

Canvas五彩光盘

Canvas五彩光盘

Canvas五彩光盘

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas五彩光盘</title>
</head>
<body>
<canvas id="gradient" width="500" height="500" tabindex="1">你的浏览器不支持HTML5</canvas>
<script type="text/javascript">
	// Get angle color function
	function getAngleColor(angle) {
		var color, d;
		if (angle < Math.PI * 2 / 5) { // angle: 0-72
			d = 255 / (Math.PI * 2 / 5) * angle;
			color = '255,' + Math.round(d) + ',0'; // color: 255,0,0 - 255,255,0
		} else if (angle < Math.PI * 4 / 5) { // angle: 72-144
			d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5);
			color = (255 - Math.round(d)) + ',255,0'; // color: 255,255,0 - 0,255,0
		} else if (angle < Math.PI * 6 / 5) { // angle: 144-216
			d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5);
			color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255
		} else if (angle < Math.PI * 8 / 5) { // angle: 216-288
			d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5);
			color = '0,'+(255 - Math.round(d)) + ',255'; // color: 0,255,255 - 0,0,255
		} else { // angle: 288-360
			d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5);
			color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0
		}
		return color;
	}
	
	var iSectors = 360;
	var iSectorAngle = (360/iSectors)/180 * Math.PI; // in radians
	
	function drawGradient(){
		var canvas = document.getElementById('gradient');
		var ctx = canvas.getContext('2d');
		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
		ctx.save();
		ctx.translate(canvas.width/2, canvas.height/2);
		
		for (var i = 0; i< iSectors; i++) {
			var startAngle = 0;
			var endAngle = startAngle + iSectorAngle;
			var radius = (canvas.width/2) - 1;
			var color = getAngleColor(iSectorAngle * i);
			ctx.beginPath();
			ctx.moveTo(0, 0);
			ctx.arc(0, 0, radius, startAngle, endAngle, false);
			ctx.closePath();
			ctx.strokeStyle = 'rgb('+color+')';
			ctx.stroke();
			ctx.fillStyle = 'rgb('+color+')';
			ctx.fill();
			ctx.rotate(iSectorAngle);
		}
			ctx.restore();
	}
	
	if(window.attachEvent) {
		window.attachEvent('onload', drawGradient);
	} else {
		if(window.onload) {
			var curronload = window.onload;
			var newonload = function() {
				curronload();
				drawGradient();
			};
			window.onload = newonload;
		} else {
			window.onload = drawGradient;
		}
	}
</script>
</body>
</html>

文章TAG:canvas

作者:井井客整理来源:互联网
本文标题:Canvas五彩光盘
本文链接:http://www.jingjingke.com/c/22241.html

上一篇:canvas马尾图案
下一篇:Canvas 气泡漂浮动画

文章分类

相关阅读

随便看看