js画图，线等数学应用。

撰写文前的念想：

本人学渣，关键时刻还是不能不做笔记。

主题：

今天主要讲的是，用js画画。

原理分析：

用js画画，原理是我们要先在页面几像素的点，然后根据不同的规则将点连接起来，比如 圆圈，需要绕地球一圈的角度。从而输出到浏览器。这样就是一副完整的画。完美~~

实施过程：

实现的方法有很多，因本人知识有限，下面是目前能想到的招式，欢迎补充！拜谢。

1）用原生js来实现

//画点【下面的方法会依照画点来延伸】

function makedot(){

var oDiv=document.createElement('div');  //生成一个div节点

  oDiv.style.position='absolute'; //设置absolute属性，用top，left定位

   oDiv.style.height='2px'; //设置点宽高

  oDiv.style.width='2px'; 

  oDiv.style.backgroundColor='red'; //颜色

   oDiv.style.left='100px'; //x坐标 

  oDiv.style.top='200px'; //y坐标

   document.body.appendChild(oDiv); //输出

}

//画线，需要记住两点坐标。

function line(x1,y1,x2,y2){

var slope=(y2-y1)/(x2-x1); //斜率

var diff=x2-x1; //根据两个点的x坐标差，以x1来比较，如果在右边则向左画，否则向右画，x左边一样则垂直。

if(x1<x2){

  for(var i=0;i<diff;i++){

   makedot(x1+i,y1+slope*i);

  }

 }else if(x1>x2){

  for(var i=0;i>diff;i--){

   makedot(x1+i,y1+slope*i);

  }

 }else{ //画垂直线

  var temp=y2-y1;

  if(temp>0){

   for(var i=0;i<temp;i++){

    makedot(x1,y1+i);

   }

  }else{

   for(var i=0;i>temp;i--){

    makedot(x1,y1+i);

   }

  }

 }

}

//画圆， 圆的参数方程 x=a+r cosθ y=b+r sinθ (a,b)为圆心坐标 r为圆半径 θ为参数

function circle(x,y,r){ //(x,y)圆心，r半径

var dotx,doty,radio;

var Pi=Math.PI;

makedot(x,y);

for(var i=0;i<360;i+=0.5){

  radio=i*Pi/180;

  dotx=r*Math.cos(radio)+x;

  doty=r*Math.sin(radio)+y

  makedot(dotx,doty);

 }

}

2）html5 canvas

如果不考虑低版本的兼容性的话，canvas应该是首选。

//获取Canvas对象(画布)

var canvas = document.getElementById("myCanvas");

//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误

if(canvas.getContext){  

    //获取对应的CanvasRenderingContext2D对象(画笔)

    var ctx = canvas.getContext("2d");     

    //开始一个新的绘制路径

    ctx.beginPath();

    //设置弧线的颜色为蓝色

    ctx.strokeStyle = "blue";

    var circle = {

        x : 100,    //圆心的x轴坐标值

        y : 100,    //圆心的y轴坐标值

        r : 50      //圆的半径

    };

    //以canvas中的坐标点(100,100)为圆心，绘制一个半径为50px的圆形

    ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);    

    //按照指定的路径绘制弧线

    ctx.stroke();

}

3）svg 【待补充】