그리기 개체 Plot에는 점을 그리는 JS, 선을 그리는 JS, 사인 사인을 그리는 JS, 코사인 cos, 황갈색, 원 및 다각형을 그리는 JS가 포함됩니다.
원점 위치, 브러시 색상, 브러시 굵기, 좌표선 색상을 설정할 수 있습니다.
사실 원리는 매우 간단합니다. 길이가 1px이고 너비가 1px인 div를 사용하여 점에서 선으로, 선에서 표면으로 시뮬레이션합니다.
JS 초보자들이 JS 그림이 그렇게 신비스러운 것이라고 생각하지 않도록 서로에게서 배우기 위해 여기에 게시하세요.
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script>
//辅助函数
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);
}
};
</script>]<script>
//测试代码
Plot.init('main', 500, 500, 'green','red',1);
Plot.sin(720);
Plot.setBrushWeight(3);
Plot.cos(720);
Plot.setBrushWeight(2);
Plot.circle(200,100,100);
Plot.setBrushColor('purple');
Plot.circle(100,100,100);
Plot.setBrushColor('blue');
Plot.circle(50,100,100);
var t = new Array();
var dots = new Array();
dots[0] = {x:-10,y:-10};
dots[1] = {x:400,y:10};
dots[2] = {x:400,y:300};
dots[3] = {x:10,y:300};
Plot.polygon(dots);
</script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
