-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhard2.html
130 lines (120 loc) · 4.75 KB
/
hard2.html
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<title>Draw Heart</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
background-color:white;
}
#canvasZone {
width: 100%;
height: 100%;
text-align: center;
}
#myCanvas {
height:100%;
display: block;
/*background-color:aqua;*/
}
</style>
<script type="text/javascript">
var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。
var r = 4;
var radian;//弧度
var i;
var radianDecrement;//弧度增量
var time = 1;//每个点之间的时间间隔
var intervalId;
var num = 360;//分割为 360 个点
var startRadian = Math.PI;
var canvas;
var ctx;
window.onload = function () {
startAnimation();
}
function startAnimation() {
canvas=document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
//让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。
WINDOW_HEIGHT=document.documentElement.clientHeight-20;
WINDOW_WIDTH=document.documentElement.clientWidth-20;
ctx.width = WINDOW_WIDTH*3;
ctx.heigh = WINDOW_HEIGHT*3;
drawHeart();
}
function drawHeart() {
ctx.strokeStyle = "pink";
ctx.lineWidth = 1;//设置线的宽度
radian = startRadian;//弧度设为初始弧度
radianDecrement = Math.PI / num * 2;
ctx.moveTo(getX(radian), getY(radian));//移动到初始点
i = 0;
intervalId = setInterval(function () {
// var width = canvas.width,height=canvas.height;
// if (window.devicePixelRatio) {
// canvas.style.width = width + "px";
// canvas.style.height = height + "px";
// canvas.height = height * window.devicePixelRatio;
// canvas.width = width * window.devicePixelRatio;
//// ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
// }
radian += radianDecrement;
ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线
arr.push("X:" + getX(getX(radian)) + " Y:" + getY(radian) + "<br/>");
i++;
ctx.stroke();//画线
if (i >= num) {
clearInterval(intervalId);
document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。
}
}
, time);
}
//x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)
function printHeart() {
radian += radianDecrement;
// polyfill 提供了这个方法用来获取设备的 pixel ratio
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
var ratio = getPixelRatio(ctx);
ctx.lineTo(getX(radian)*ratio, getY(radian)*ratio);//在旧点和新点之间连线
// arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>");
i++;
ctx.stroke();//画线
if (i >= num) {
// document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。
clearInterval(intervalId);
}
}
function getX(t) {//由弧度得到 X 坐标
return 100 + r * (16 * Math.pow(Math.sin(t), 3))+0.5;
}
function getY(t) {//由弧度得到 Y 坐标
return 80 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
}
</script>
</head>
<body>
<div id="canvasZone">
<canvas id="myCanvas"></canvas>
</div>
<div id="bs">
</div>
</body>
</html>