JavaScript繪制矢量圖

在直角坐標系下旋轉的矢量圖效果

/**創建異步訪問對象*/var beishu=[1,2,3,4,5,6,7,8,9,10];var refreshtime=2000;var temp=10;var pi=3.1415926;// setInterval("vector_load()",1000);function refresh_time() {refreshtime=beishu[document.getElementById("refresh").value-1]*1000;}function stop() {if(document.getElementById("paus").value=="暫停")document.getElementById("paus").value="繼續";elsedocument.getElementById("paus").value="暫停"; }//輔助函數 function $(id){return document.getElementById(id)}; /** * 繪圖對象 * 包含各個繪圖函數，比如畫點，線段，多邊形，圓等 * 和一些繪圖參數，比如背景顏色，畫筆顏色 **/ var Plot = { //畫布，所有被畫出來的元素都append到這個container container: null, //原點x ox: 500, //原點y oy: 300, //坐標顏色 baseLineColor: 'black', //畫筆顏色 brushColor: 'red', //畫筆粗細 brushWeight: 1, //baseLineX，baseLineY保存坐標線，用于坐標移位 baseLineX: null, baseLineY: null, //初始化方法，設置畫布，原點位置，坐標線顏色，畫筆顏色，畫筆粗細 init: function(containerId, ox, oy, baseLineColor,brushColor,brushWeight){ if($(containerId)){ Plot.container = $(containerId); } else{ alert('You should specify an element in which you can draw plot!'); return; } if((typeof ox)=='number'){ Plot.ox = ox; } if((typeof oy)=='number'){ Plot.oy = oy; } Plot.baseLineColor = baseLineColor; Plot.brushColor = brushColor; Plot.brushWeight = brushWeight; Plot.drawCoordinate(); }, //設置原點函數 setOPoint: function(ox,oy){ Plot.ox = ox; Plot.oy = oy; Plot.container.removeChild(Plot.baseLineX); Plot.container.removeChild(Plot.baseLineY); Plot.drawCoordinate(); }, //設置畫筆粗細函數 setBrushWeight: function(weight){ Plot.brushWeight = weight; }, setBrushColor: function(color){ Plot.brushColor = color; }, //畫坐標線 drawCoordinate: function(){ var baseLineX = document.createElement('div'); baseLineX.style.position = "absolute"; baseLineX.style.left = 0; baseLineX.style.top = Plot.oy; baseLineX.style.fontSize = '1px'; baseLineX.style.height = '1px'; baseLineX.style.width = '100%'; baseLineX.style.overflow = 'hidden' baseLineX.style.backgroundColor = Plot.baseLineColor; Plot.container.appendChild(baseLineX); Plot.baseLineX = baseLineX; var baseLineY = document.createElement('div'); baseLineY.style.position = "absolute"; baseLineY.style.left = Plot.ox; baseLineY.style.top = 0; baseLineY.style.fontSize = '1px'; baseLineY.style.height = '100%'; baseLineY.style.width = '1px'; baseLineY.style.overflow = 'hidden' baseLineY.style.backgroundColor = Plot.baseLineColor; Plot.baseLineY = baseLineY; Plot.container.appendChild(baseLineY); }, //清理畫布，移走所有對象 clean: function(){ Plot.container.innerHTML =""; Plot.drawCoordinate(); }, //畫點，相對原點 drawDot: function(x,y){ var dot = document.createElement('div'); dot.style.left = Plot.ox + x + 'px'; dot.style.top = Plot.oy - y + 'px'; dot.style.height = Plot.brushWeight; dot.style.width = Plot.brushWeight; dot.style.position = 'absolute'; dot.style.fontSize = '1px'; dot.style.backgroundColor = Plot.brushColor; dot.style.overflow = "hidden"; Plot.container.appendChild(dot); dot = null; }, //sin函數曲線，傳入角度，比如90，180，360 sin: function(angle){ for(var i=0; i<angle; i++){ Plot.drawDot(i,Math.sin(i/180*Math.PI)*100); } }, //tan函數曲線 tan: function(){ for(var i=0; i<720; i++){ if(Math.tan(i/180*Math.PI)*100>Plot.oy){ continue; } Plot.drawDot( i, Math.tan(i/180*Math.PI)*50 ); } }, //cos函數曲線，傳入角度，比如90，180，360 cos: function(angle){ for(var i=0; i<angle; i++){ Plot.drawDot(i,Math.cos(i/180*Math.PI)*100); } }, //畫線從(x0,y0)到(x1,y1) line: function(x0,y0,x1,y1){ //豎線 if((x1-x0)==0){ for( var i=((y1>y0)?y0:y1); i<((y1>y0)?y1:y0); i++ ){ Plot.drawDot(x1, i); } return; } //橫線 if((y1-y0)==0){ for( var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++ ){ Plot.drawDot(i, y1); } return; } //斜線 //k=斜率，直線方程為y=kx + b var k = (y1-y0)/(x1-x0); if(k<=1){ for(var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++){ Plot.drawDot(i, k*i+y1-k*x1 ); } } else{ for(var i=((y1>y0)?y0:y1); i<((y1>y0)?y1:y0); i++){ Plot.drawDot((i-y1+k*x1)/k,i); } } return; }, //畫圓，radius是半徑，(xi,yi)為圓心 circle: function(radius,xi, yi){ if((typeof xi)=='undefined'){ xi = 0; } if((typeof yi)=='undefined'){ yi = 0; } //i為角度，從0到360 var i=0; while(i<360){ var _x0 = Math.sin(i/180*Math.PI)*radius; var _y0 = Math.cos(i/180*Math.PI)*radius; var step = radius/100; //隨著半徑的增大，劃出來的圓周斷斷續續,下面的做法 //使畫圓周的點數隨著半徑的增大而增大，使畫出來的圓周更圓潤. if(1/step>1){ step = 1; } else if(1/step<0.2){ step = 0.2; } else{ step = 1/step; } Plot.drawDot(_x0+xi, _y0+yi); i = i+ step; } }, //畫多邊形，傳入一個點列 polygon: function(dots){ if(typeof dots=='undefined'){ alert('you should specify some dots to draw!'); return; } if(dots.constructor!=Array){ alert('you should specify some dots to draw!'); return; } for(var i=0; i<dots.length-1; i++){ Plot.line(dots[i].x,dots[i].y, dots[i+1].x,dots[i+1].y); if(i==1&&dots.length==2){ break; } } Plot.line(dots[0].x, dots[0].y, dots[dots.length-1].x, dots[dots.length-1].y); } }; function createXHR() {var xhr;try{xhr = new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xhr = new ActiveXObject("Microsoft.XMLHTTP");}catch(E){xhr = false;}}if (!xhr && typeof XMLHttpRequest != 'undefined'){xhr = new XMLHttpRequest();}return xhr; }/**異步訪問提交處理*/ function vector_load() { //測試代碼 Plot.init('container',150,150, 'green','red',1); //Plot.setBrushWeight(3); //Plot.setBrushWeight(2);if(document.getElementById("paus").value=="暫停"){xhr = createXHR();if(xhr){var get_str="cur_time=";get_str = get_str + new Date().getTime();// get_str = get_str + Math.random();xhr.open("GET", "/test/cgi-bin/vector.cgi?" + get_str);xhr.send(null);xhr.onreadystatechange = callbackFunction;}else{alert("瀏覽器不支持，請更換瀏覽器！");}}else{document.getElementById("status").innerHTML="<span style='color:red;'>暫停中...</span>";//setTimeout("vector_load()",1000);} }//異步回調函數處理function callbackFunction() { if (xhr.readyState == 4){if (xhr.status == 200){var returnValue = xhr.responseText;if(returnValue != null && returnValue.length > 0){var response = xhr.responseText.split("|");document.getElementById("vector1").value = response[0];document.getElementById("vector2").value = response[1];document.getElementById("vector3").value = response[2];document.getElementById("vector4").value = response[3];document.getElementById("vector5").value = response[4];var vol_ax,vol_ay,vol_bx,vol_by,vol_cx,vol_cy;var cur_ax,cur_ay,cur_bx,cur_by,cur_cx,cur_cy; if(response[0]>=360){vol_ax=100*Math.sin((response[0]-360)*pi/180);vol_ay=100*Math.cos((response[0]-360)*pi/180);}else{vol_ax=100*Math.sin(Math.abs(response[0])*pi/180);vol_ay=100*Math.cos(Math.abs(response[0])*pi/180);}if(response[1]>=360){vol_bx=100*Math.sin((response[1]-360)*pi/180);vol_by=100*Math.cos((response[1]-360)*pi/180);}else{vol_bx=100*Math.sin(response[1]*pi/180);vol_by=100*Math.cos(response[1]*pi/180);}if(response[2]>=360){ vol_cx=100*Math.sin((response[2]-360)*pi/180);vol_cy=100*Math.cos((response[2]-360)*pi/180);}else{vol_cx=100*Math.sin(response[2]*pi/180);vol_cy=100*Math.cos(response[2]*pi/180);}if(response[3]>=360){cur_bx=100*Math.sin((response[3]-360)*pi/180);cur_by=100*Math.cos((response[3]-360)*pi/180);}else{ cur_bx=Math.sin(response[3]/180*Math.PI)*100; cur_by=Math.cos(response[3]/180*Math.PI)*100; }if(response[4]>=360){cur_cx=100*Math.sin((response[4]-360)*pi/180);cur_cy=100*Math.cos((response[4]-360)*pi/180);}else{cur_cx=Math.sin(response[4]/180*Math.PI)*100; cur_cy=Math.cos(response[4]/180*Math.PI)*100; }Plot.container.innerHTML =""; Plot.drawCoordinate(); Plot.init('container', 150, 150, 'green','red',1); Plot.setBrushWeight(2); Plot.setBrushColor('blue');Plot.circle(100,0,0); //Plot.circle(100*Math.sqrt(2),0,0);Plot.setBrushColor('yellow'); Plot.line(0,0,vol_ax,vol_ay);// alert("7");Plot.setBrushColor('green'); Plot.line(0,0,vol_bx,vol_by);// alert("8");Plot.setBrushColor('red'); Plot.line(0,0,vol_cx,vol_cy);Plot.setBrushColor('black'); Plot.line(0,0,cur_bx,cur_by);// alert("8");Plot.setBrushColor('white'); Plot.line(0,0,cur_cx,cur_cy);//alert("9");// alert("333");// document.getElementById("status").innerHTML="<span style='color:yellow;text-align:center;'>正常</span>";setTimeout("vector_load()",1000);// alert("10");}else{alert("訪問數據為空！");}}else{alert("頁面數據交互異常！");}} }

總結

以上是生活随笔為你收集整理的JavaScript绘制矢量图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。