使用HTML5 Canvas实现的玫瑰线,仅chrome和Firefox可见.
<!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>title</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>
<input type="text" id="nums"/>
<input type="button" value="请输入数字" οnclick="start();"><br>
<canvas id="can" width="500" height="500"></canvas>
<script type="text/javascript"><!--
function start() {
var nums = document.getElementById('nums');
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.clearRect(1,1,500,500);
showCanvas(nums.value, ctx);
}
function showCanvas(nums, ctx) {
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(nums, i - 1);
var point = getPoint(nums, i);
ctx.moveTo(_x + point0[0], _y + point0[1]);
ctx.lineTo(_x + point[0], _y + point[1]);
}
ctx.stroke();
}
function getPoint(nums, i){
var len = 200 * Math.sin(nums * i );
return [parseInt(len * Math.cos(i)), parseInt(len * Math.sin(i))];
}
// --></script>
</body>
</html>
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
