在此與大家分享一下^^
其中有使用到矩陣的觀念，若不懂這部分的話麻煩請自學謝謝^^" (我不敢想像由我來教這恐怖的東西 Orz)
而下列程式碼的結果是顯示一張座標系並以圓形環繞，其中有個寬度2pixels的直線會在上頭以距離座標系中心50pixels處繞著座標系的中心旋轉
[hr]
建立檔案 imgtest.htm
- 代碼: 選擇全部
<head>
<meta http-equiv="content-type" content="text/html;charset=big5">
<script language="Javascript">
var pic=new Image();
pic.src="test.gif";
function m_multi22(m1,m2)
{
if(m1.length !=2 || m1[0].length!=2 || m2.length!=2 || m2[0].length!=2)return false;
var new_m=[[0,0],[0,0]];
new_m[0][0]=m1[0][0]*m2[0][0]+m1[0][1]*m2[1][0];
new_m[0][1]=m1[0][0]*m2[0][1]+m1[0][1]*m2[1][1];
new_m[1][0]=m1[1][0]*m2[0][0]+m1[1][1]*m2[1][0];
new_m[1][1]=m1[1][0]*m2[0][1]+m1[1][1]*m2[1][1];
return new_m;
}
function m_multi21(m1,m2)
{
if(m1.length !=2 || m1[0].length!=2 || m2.length!=2)return false;
var new_m=[0,0];
new_m[0]=m1[0][0]*m2[0]+m1[0][1]*m2[1];
new_m[1]=m1[1][0]*m2[0]+m1[1][1]*m2[1];
return new_m;
}
function m_plus(m1,m2)
{
if(m1.length !=2 || m1[0].length!=2 || m2.length!=2 || m2[0].length!=2)return false;
return [[m1[0][0]+m2[0][0],m1[0][1]+m2[0][1]],[m1[1][0]+m2[1][0],m1[1][1]+m2[1][1]]];
}
function m_subtract(m1,m2)
{
if(m1.length !=2 || m1[0].length!=2 || m2.length!=2 || m2[0].length!=2)return false;
return [[m1[0][0]-m2[0][0],m1[0][1]-m2[0][1]],[m1[1][0]-m2[1][0],m1[1][1]-m2[1][1]]];
}
function m_inverse(m)
{
if(m.length!=2 || m[0].length!=2)return false; //two dimesions only
var det=m[0][0]*m[1][1]-m[0][1]*m[1][0];
if(det == 0)return false;
return [[(m[1][1]/det),(m[0][1]*(-1)/det)],[(m[1][0]*(-1)/det),(m[0][0]/det)]];
}
function run()
{
sec=m_multi21(turn_m,sec);
p.style.left=cx+sec[0];
p.style.top=cy+sec[1];
setTimeout('run()',10);
}
</script>
</head>
<body>
<img src="bg.png" name="bg" id="bg">
<img name="p" id="p" src="./test.gif" style="position:absolute;left:0px;top:0px">
</body>
<script language="javascript">
var bg=document.bg;
var p=document.p;
var deg1=Math.PI/180,deg=deg1*5;
var cx=p.style.left=bg.offsetLeft+Math.floor(bg.width/2);
var cy=p.style.top=bg.offsetTop+Math.floor(bg.height/2);
var sec=[50,0];
var turn_m=[[Math.cos(deg),-Math.sin(deg)],[Math.sin(deg),Math.cos(deg)]];
setTimeout("run()",10);
</script>
請下載此圖片檔後放在與imgtest.htm同一目錄下
●點我下載test.gif與bg.png(rar格式)
以上，有問題歡迎指教^^