<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
div{ overflow:hidden;}
</style>
<script type="text/javascript">
/* 珠峰培訓 2011年12月9日課堂示例
以下畫點，畫線，畫圓的方法，都不是用HTML5的canvas，而是用的純js
用到了一些數學的三角函數方法
以下代碼是課堂隨機寫出，沒有做更多優化
*/
function point(x,y){//畫點
var oDiv=document.createElement('div');
oDiv.style.position='absolute';
oDiv.style.height='2px';
oDiv.style.width='2px';
oDiv.style.backgroundColor='red';
oDiv.style.left=x+'px';
oDiv.style.top=y+'px';
//document.body.appendChild(oDiv);
return oDiv;//注意：返回的值是一個dom節點，但並未追加到文檔中
}
function drawLine(x1,y1,x2,y2){//畫一條直線的方法
var x=x2-x1;//寬
var y=y2-y1;//高
var frag=document.createDocumentFragment();
if(Math.abs(y)>Math.abs(x)){//那個邊更長，用那邊來做畫點的依據（就是下面那個循環），如果不這樣，
if(y>0)//正着畫線是這樣的
- for(var i=0;i<y;i++){
- var width=x/y*i //x/y是直角兩個邊長的比，根據這個比例，求出新坐標的位置
- {
- frag.appendChild(point(width+x1,i+y1));
- }
- }
- if(y<0){//有時候是倒着畫線的
- for(var i=0;i>y;i--){
- var width=x/y*i
- {
- frag.appendChild( point(width+x1,i+y1));
- }
- }
- }
- }//end if
- else {
- if(x>0)//正着畫線是這樣的
- for(var i=0;i<x;i++){
- var height=y/x*i
- {
- frag.appendChild(point(i+x1,height+y1));
- }
- }
- if(x<0){//有時候是倒着畫線的
- for(var i=0;i>x;i--){
- var height=y/x*i
- {
- frag.appendChild( point(i+x1,height+y1));
- }
- }
- }//end if
- }
- //document.body.appendChild(frag);
- document.getElementById('div1').appendChild(frag);
- //var oDiv=document.createElement('div')
- //oDiv.appendChild(frag);
- //document.body.appendChild(oDiv);
- }
- function drawCircle(){//畫個圓
- var r=200;
- var x1=300;
- var y1=300;
- var frag=document.createDocumentFragment();
- for(var degree=0;degree<360;degree+=2){
- var x2=r*Math.sin(degree*Math.PI/180);
- var y2=r*Math.cos(degree*Math.PI/180);
- frag.appendChild(point(x1+x2,y1+y2));
- }
- document.body.appendChild(frag);
- }
- function dragCircle(x1,y1,x2,y2){//拖出一個圓來
- var r=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));//求出半徑的長 直角三角形中 斜邊的平方=兩個直邊的平方之和
- var frag=document.createDocumentFragment();
- for(var degree=0;degree<360;degree+=2){//每隔2度畫一個點
- var x2=r*Math.sin(degree*Math.PI/180);
- var y2=r*Math.cos(degree*Math.PI/180);
- frag.appendChild(point(x1+x2,y1+y2));
- }
- document.getElementById('div1').appendChild(frag);
- }
- window.onload=function(){
- drawCircle()
- drawLine(500,30,0,30);
- drawLine(300,20,300,500);
- drawLine(50,20,700,500);
- var x1=0;
- var y1=0;
- //以下是處理拖拽 拖拽的時候，出現一條直線和一個圓
- //注意：由於這些操作都是由DOM來完成的，所以性能開銷比較大，尤其是在IE里，明顯的會卡一些。
- function down(e){
- var e=e||window.event;
- x1=e.clientX;
- y1=e.clientY;
- document.onmousemove=move;
- document.onmouseup=up;
- }
- function move(e){
- document.getElementById('div1').innerHTML='';
- var e=e||window.event;
- var x2=e.clientX;
- var y2=e.clientY;
- drawLine(x1,y1,x2,y2);//用這個方法就可以在瀏覽器上拖出一條直線來
- dragCircle(x1,y1,x2,y2);//用這個方法就可以在瀏覽器上拖出一個圓來
- }
- function up(){
- document.onmousemove=null;
- document.onmouseup=null;
- }
- document.onmousedown=down;
- }
- </script>
- </head>
- <body>
- <div id="div1">在瀏覽器上拖動鼠標試試</div>
- </body>
- </html>
更多內容請點擊