このサイトはWordPressで作っていて、Javascript をテキストに書き込んでも普通は動かない。しかし、な、なんと、
１．＜script＞…＜/script＞ を＜div＞…＜/div＞ で囲むこと、
２．＜script＞…＜/script＞内の空白行を消すこと、
この二つを守れば動くみたい！！やった！
こちらを参考にしました。ありがとうございます。
以下は、円が動くプログラム。RUNを押してみてくれ。
ちなみにプログラムはこんな感じ。
以下をまるっとコピペしているだけ。
|
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 |
<center> <form name="f1"><input name="b1" type="button" value="RUN" onclick="Start()"/></form> <canvas id="canvas1" width="320" height="320" style="background-color:gray;"></canvas> </center> <div><script type="text/javascript"> var canvas1 = document.getElementById("canvas1"); var ctx1 = canvas1.getContext("2d"); var Timer; var w=320; var h=320; var r=20; var maxV=3; var dx=new Array(); var dy=new Array(); var x=new Array(); var y=new Array(); var N=20; for(i=1;i<N;i++){ dx[i]=(Math.random()-0.5)*2*maxV; dy[i]=(Math.random()-0.5)*2*maxV; x[i]=Math.random()*(w-2*r)+r; y[i]=Math.random()*(h-2*r)+r; } function Start() { if (document.f1.b1.value == "RUN") { console.log('RUNが押された'); document.f1.b1.value="STOP"; Timer = setInterval("Main()",30); } else { document.f1.b1.value="RUN"; clearInterval(Timer); } } function Main(){ ctx1.beginPath(); ctx1.shadowOffsetX=0; ctx1.shadowOffsetY=0; ctx1.shadowBlur=0; ctx1.shadowColor="rgba(0,0,0,0)"; ctx1.fillStyle="white"; ctx1.rect(0,0,w,h); ctx1.fill(); ctx1.stroke(); for(i=0;i<N;i++){ ctx1.beginPath(); ctx1.strokeStyle="rgba(0,100,0,0.5)"; ctx1.lineWidth=3; ctx1.fillStyle="rgba(0,255,0,0.3)"; ctx1.arc(x[i],y[i],r,0,2*Math.PI,false); ctx1.shadowOffsetX=5; ctx1.shadowOffsetY=5; ctx1.shadowBlur=10; ctx1.shadowColor="rgba(0,0,0,0.8)"; ctx1.fill(); ctx1.stroke(); if(x[i]+dx[i]>w-r){ dx[i]=-dx[i]; } if(x[i]+dx[i]<r){ dx[i]=-dx[i]; } if(y[i]+dy[i]>h-r){ dy[i]=-dy[i]; } if(y[i]+dy[i]<r){ dy[i]=-dy[i]; } x[i]=x[i]+dx[i]; y[i]=y[i]+dy[i]; } } Main(); </script></div> |
で、上記のように、html のコードを WordPress で表示させるのもなかなかうまくいかなかったんだけど、
Crayon Syntax Highlighter というプラグインでうまくいった。
[ｃrayon] ～ [/ｃrayon] でHTMLのコードを囲むだけ。やった。