井井客

搜索

canvas马尾图案

canvas马尾图案

canvas马尾图案

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas马尾图案</title>
</head>
<body>
<canvas id=myCanvas01 width=500px height=500px></canvas>
<canvas id=myCanvas02 width=500px height=500px></canvas> 
<script type="text/javascript">
//第一种马尾图案
	var myCanvas01 = document.getElementById("myCanvas01"); 
	var ctx = myCanvas01.getContext("2d"); 
	ctx.translate(250,100); 
	ctx.fillStyle = "rgba(0,0,255,0.25)"; 
	
	for(var i=0;i<45;i++){ 
		ctx.scale(0.93,0.93); 
		ctx.rotate(Math.PI/9); 
		ctx.translate(35,12); 
		ctx.fillRect(0,0,100,50); 
	}

//第二种马尾图案(随机变色)
	var myCanvas02 = document.getElementById("myCanvas02");  
	var context = myCanvas02.getContext("2d");  
	//创建五角星  
	var shape = {};  
	shape.star = function(l){
		var rad1 = Math.sin(0.4*Math.PI);     //sin(72)  
		var rad2 = Math.cos(0.4*Math.PI);     //cos(72)  
		var rad3 = Math.sin(0.2*Math.PI);     //sin(36)  
		var rad4 = Math.cos(0.2*Math.PI);     //cos(36)  
		
		with(context){ 
			moveTo(0,-l*rad1);  
			lineTo(l*rad2,0);  
			lineTo(l+l*rad2,0);  
			lineTo(l*rad2+2*l*rad2*rad2,l*rad3);  
			lineTo(l*rad4,2*l*rad1*rad1-l*rad1+l*rad3);  
			lineTo(0,2*l*rad1*rad1-l*rad1);  
			lineTo(-l*rad4,2*l*rad1*rad1-l*rad1+l*rad3);  
			lineTo(-l*rad2-2*l*rad2*rad2,l*rad3);  
			lineTo(-l-l*rad2,0);  
			lineTo(-l*rad2,0);  
			lineTo(0,-l*rad1);  
		}  
	}  
	
	function addZero(string){return string.length == 2 ? string : '0' + string;}  
	
	//随机颜色  
	function toRGB(redValue, greenValue, blueValue){  
		rgbR = addZero(redValue.toString(16)),  
		rgbG = addZero(greenValue.toString(16)),  
		rgbB = addZero(blueValue.toString(16));  
		var rgb = "#" + rgbR + rgbG + rgbB;  
		return rgb;  
	}  
	context.translate(250,100);  
	
	for(var i=0;i< 50;i++){  
		context.beginPath();  
		context.scale(0.95,0.95);    
		context.rotate(Math.PI/8);    
		context.translate(70,-25);  
		shape.star(50);  
		//Math.random()返回的是0~~~1之间的数 所以乘以256  
		context.fillStyle = toRGB(parseInt(Math.random()*256),  
		parseInt(Math.random()*256),parseInt(Math.random()*256));  
		context.fill();  
	}  
</script>
</body>
</html>

文章TAG:canvas

作者:井井客整理来源:互联网
本文标题:canvas马尾图案
本文链接:http://www.jingjingke.com/c/22240.html

上一篇:canvas英国国旗
下一篇:Canvas五彩光盘

文章分类

相关阅读

随便看看