代码改变世界

HTML5生成玫瑰线图案

2010-07-26 20:19  音乐让我说  阅读(427)  评论(0)  编辑  收藏  举报

一个HTML5的效果。

PS：IE8不能看出效果，新版火狐和谷歌浏览器可以看出。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5生成玫瑰线图案</title>
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#can {background-color:#ece9d8;}
-->
</style>
<style type="text/css" mce_bogus="1">
#can {background-color:#ece9d8;}
</style>
</head>
<body>
<canvas id="can" width="500" height="500"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var _x = 250, _y = 200;
ctx.beginPath();
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur    = 4;
ctx.shadowColor   = 'rgba(255, 255, 255, 1)';
ctx.strokeStyle = "#000";
ctx.lineWidth = 1;
for (i = 0; i <= 360; i++)
{
	var point0 = getPoint(i - 1);
	var point = getPoint(i);
	ctx.moveTo(_x + point0[0], _y + point0[1]);
    ctx.lineTo(_x + point[0], _y + point[1]);
}
ctx.stroke();
function getPoint(i)
{
	var len = 200 * Math.sin(5 * i );
	return [parseInt(len * Math.cos(i)), parseInt(len * Math.sin(i))];
}

</script>
</body>
</html>