Use javascript to implement the canvas code _ javascript skills

Use javascript to input the canvas code in the console
Db. drawCircle ([50, 50], 20, "black ");
Db. drawLine ([5, 5], [36, 44], "red ");
You can see the effect

The Code is as follows:

Script
Function DrawingBoard (width, height, size)
{
Size = size | 3
Var container = document. createElement ("p ");
This. container = container;

Container. runtimeStyle. width = (width) * size + "px ";
Container. runtimeStyle. height = (height) * size + "px ";
Container. runtimeStyle. margin = "0px ";
// Container. style. border = "solid 1px blue ";
Var count = 0;
For (var y = 0; y {
For (var x = 0; x {
Var curr = document. createElement ("p ");
Curr. runtimeStyle. height = size + "px ";
Curr. runtimeStyle. width = size + "px ";
Curr. runtimeStyle. display = "inline ";
Curr. runtimeStyle. overflow = "hidden ";
Curr. style. backgroundColor = "green ";
Curr. src = "";
Container. appendChild (curr );
}
}
// Alert (curr. currentStyle. display );
// Document. body. appendChild (container );

This. drawLine = function (start, end, color)
{
Var dx = start [0]-end [0];
Var dy = start [1]-end [1];
Var x, y;

If (Math. abs (dx)> Math. abs (dy ))
{
For (var x = start [0]; x! = End [0] + (end [0]-start [0])/Math. abs (end [0]-start [0]); x + = (end [0]-start [0])/Math. abs (end [0]-start [0])
{
Y = Math. round (x-start [0])/dx * dy + start [1]);
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
}
}
Else
{
For (var y = start [1]; y! = End [1] + (end [1]-start [1])/Math. abs (end [1]-start [1]); y + = (end [1]-start [1])/Math. abs (end [1]-start [1])
{
X = Math. round (y-start [1])/dy * dx + start [0]);
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
}
}
}
This. drawCircle = function (m, R, color)
{

For (var r = 0; r <= Math. floor (Math. sqrt (R * R-r * r); r ++)
{

X = m [0] + r; y = m [1] + Math. floor (Math. sqrt (R * R-r * r ));
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
X = m [0]-r; y = m [1] + Math. floor (Math. sqrt (R * R-r * r ));
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
X = m [0] + r; y = m [1]-Math. floor (Math. sqrt (R * R-r * r ));
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
X = m [0]-r; y = m [1]-Math. floor (Math. sqrt (R * R-r * r ));
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
Y = m [1] + r; x = m [0] + Math. floor (Math. sqrt (R * R-r * r ));
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
Y = m [1]-r; x = m [0] + Math. floor (Math. sqrt (R * R-r * r ));
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
Y = m [1] + r; x = m [0]-Math. floor (Math. sqrt (R * R-r * r ));
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;
Y = m [1]-r; x = m [0]-Math. floor (Math. sqrt (R * R-r * r ));
This. container. childNodes [this. trans ([x, y])]. style. backgroundColor = color;

}


}
This. appendto = function (parent)
{
Parent. appendChild (this. container );
}

This. drawPoint = function (p, color)
{
This. container. childNodes [this. trans (p)]. style. backgroundColor = color;
}
This. trans = function (p)
{
Return p [0] + p [1] * width;
}

Container = null;
}
Function Console (width, height, command)
{
Var container = document. createElement ("p ");
This. container = container;

Container. runtimeStyle. width = (width );
Container. runtimeStyle. height = (height );
Container. runtimeStyle. margin = "0px ";
Container. runtimeStyle. backgroundColor = "black ";
Container. runtimeStyle. fontFamily = "Terminal ";
Container. runtimeStyle. color = "white ";
Container. runtimeStyle. fontSize = "16px ";
This. output = document. createElement ("p ");
Container. appendChild (this. output );
Container. innerHTML + = "js>"
This. input = document. createElement ("input ");
Container. appendChild (this. input );
This. input. runtimeStyle. backgroundColor = "black ";
This. input. runtimeStyle. borderWidth = "0px ";
This. input. runtimeStyle. color = "white ";
This. input. runtimeStyle. fontFamily = "Terminal ";
This. input. runtimeStyle. width = "90%"
This. input. runtimeStyle. fontSize = "16px"
This. input. runtimeStyle. position = "relative ";
This. input. runtimeStyle. top = "2px ";
Command = command | function (str)
{

Var e;
Try {
Var r = eval (str );
} Catch (e ){
Return "Bad command ";
}
Return r;

}
This. run = function (str)
{

This. input. parentNode. childNodes [0]. innerHTML ++ = str +'
'
This. input. parentNode. childNodes [0]. innerHTML + = (command (str) +"
")

}
This. input. command = function ()
{
This. parentNode. childNodes [0]. innerHTML + = this. value +'
'
This. parentNode. childNodes [0]. innerHTML + = (command (this. value) +"
")
}
This. input. onkeyup = new Function ("e", "e = e | event; if (e. keyCode! = 13) return; this. command (); this. value = '';");
This. appendto = function (parent)
{
Parent. appendChild (this. container );
}
Container = null;
}

Var c = new Console ("100%", "50% ");
C. appendto (document. body );
C. run ("window. db = new DrawingBoard (100,100); document. body. appendChild (db. container );");
Script