HTML5生成玫瑰线图案

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30681121

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Music/archive/2010/07/26/1785528.html

一个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>