快速编程JS初级教程4-2 画矩形，画函数图像

函数图像，就是游戏元素的运动轨迹。超级玛丽，跳一跳，是抛物线。还有折线，波浪线。王者荣耀里，有大量的扇形攻击范围。

还有六边形的攻击范围，等等各式各样。

一、鼠标点击两下，画一个矩形

代码如下：用一个整数数组存放左上角、右下角的坐标[x1,y1,x2,y2]，四个整数。

<script type="text/javascript">
<!--
var dot=new Array();
document.onmousedown =function(a) 
{ 

 //按下时创建一个事件
 if(!a) a=window.event;
 //获取x轴、y轴坐标
 var x=a.clientX;
 var y=a.clientY;
 //当数组长度大于等于4时，清空数组
 if(dot.length>=4) dot.splice(0,4);
 //将x、y添加到数组中,数组中保存了两组坐标值，相当于页面上的A(x1,y1)、B(x2,y2)两点
 dot.push(x,y);
 //当数组长度为4时，画线。
 if(dot.length==4){
 //计算div的长和宽
 var width=Math.abs(dot[0]-dot[2]);
 var height=Math.abs(dot[1]-dot[3]);
 //在页面上定位div左上角的具体位置
 var left=dot[0]<dot[2]?dot[0]:dot[2];
 var top=dot[1]<dot[3]?dot[1]:dot[3];
 //创建div
 var div=document.createElement("div");
 div.innerHTML=' <div id="line_div" style="width:'+width+'px;height:'+height+'px;position:absolute;visibility:visible;left:'+left+'px;top:'+top+'px;border:1px solid #ff0000"></div>';
 document.body.appendChild(div);
 }
} 
-->
</script>

二、画抛物线、正弦线

效果如下：

代码如下：

<script type="text/javascript">
function draw(x,y,color)
{
//创建div
 var div=document.createElement("div");
 var cssstr='left:'+x+'px;top:'+y+'px;border:1px solid '+color;
 div.innerHTML='<div id="line_div" style="width:10px;height:10px;position:absolute;visibility:visible;'+cssstr+'"></div>';
 document.body.appendChild(div); 
}

///
var startx=200;
var starty=200;
var x;
var y1,y2;
var i;
for(i=0;i<60;i++)
	draw(i*10,starty,"#005500");

for(i=0;i<40;i++)
	draw(startx,i*10,"#005500");

for(i=-10;i<30;i++)
{
	y1=0.5*(i-10)*(i-10)+50;
	y2=Math.sin(i/10)*100+starty;
	draw(startx+i*10,parseInt(y1),"#ff0000");
	draw(startx+i*10,y2,"#0000ff");
	}
</script>

画矩形的程序，转载脚本之家的程序，然后改写。

JS画两点之间的折线 https://www.jb51.net/article/65971.htm

这是一个重要的学习方法。改写网上的学习资源，不是从零写起，不是从头再写。

有了抛物线，这样的程序，超级玛丽等动作类游戏，就可以做了。