代码改变世界

HTML5生成玫瑰线图案

  音乐让我说  阅读(429)  评论(0编辑  收藏  举报

一个HTML5的效果。

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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>

 

 

 

点击右上角即可分享
微信分享提示