キャンバス中点から点までの経路運動
14221 ワード
/* ， ， ， SetInterval, */
1 DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>title>
6 head>
7 <body>
8 <canvas id="dir" width="300" height="300">canvas>
9 <script type="text/javascript">
10 var canvas = document.getElementById("dir");
11 var ctx = canvas.getContext("2d");
12 var org = {
13 x: Math.random()*canvas.width,
14 y: Math.random() * canvas.height
15 };
16 var now = {
17 x: Math.random() * canvas.width,
18 y: Math.random() * canvas.height
19 };
20 var newxy = {
21 x: 0,
22 y: 0
23 };
24 function init() {
25 ctx.beginPath();
26 ctx.moveTo(org.x, org.y);
27 ctx.lineTo(now.x, now.y);
28 ctx.stroke();
29 math();
30 }
31
32 var i = 1;
33 function math() {
34 var wid = Math.abs(now.x - org.x);//x ，
35 var hei = Math.abs(now.y - org.y);//y
36 var length = Math.pow(Math.pow(wid, 2) + Math.pow(hei, 2), 1 / 2);//（ ＋ ） ，
37 if (i < length) {
// SetInterval， Length 1px
38 if (org.x < now.x) {
39 newxy.x = org.x +wid / length * i;
40 }
41 else {
42 newxy.x = org.x - wid / length * i;
43 }
44 if (org.y < now.y) {
45 newxy.y = org.y + hei / length * i;
46 }
47 else {
48 newxy.y = org.y - hei / length * i;
49 }
50
51 i++;
52 }
53 comment();
54 }
55 function comment() {
56 ctx.beginPath();
57 ctx.arc(newxy.x, newxy.y, 3, 0, Math.PI * 2, true);
58 ctx.stroke();
59
60 }
61 function clean() {
62 ctx.clearRect(0, 0, canvas.width, canvas.height);
63 }
64 setInterval(function () {
65 clean();
66 init();
67 }, 10);
68 window.onload("load", init(), true);
69 script>
70
71 body>
72 html>転載先:https://www.cnblogs.com/lm1107/p/4788705.html