用js绘制圆和矩形的方法

本文的例子讲述了JS画圆和矩形的方法，供大家参考：

这是利用js绘制一个圆和矩形，选择背景色的图形支持，并设置圆角矩形、圆、矩形、正方形、半径的几种选项。也许你不需要这些图形，但重要的是让你学习Javaｓｃｒｉｐｔ是如何绘制图形的，这是表达式的核心。

运行效果如下图所示：
具体代码如下：
js绘制圆和矩形

*边距：0；填充：0；}
# div {位置：绝对；背景：# CCC；}
。选择{ margin: 30px汽车；宽度：960px；溢出：隐藏}
李{列表样式：无；浮动：左；宽度：60px；高度：20px；}
#颜色{宽度：500px；浮动：左}
selcolor { }：左浮动。
#半径{宽度：40px；高度：20px；}
红色背景：红色；}
黄色背景：黄色；}
蓝色背景：蓝色；}
粉红色背景：粉红色；}
黑色背景：黑色；}
橙色背景：橙色；}
绿色{背景：绿色；}
。XZ {宽度：340px；浮动权；}
#帆布{宽度：960px；身高：500px；边框1px solid # CCC；保证金：0汽车}
函数$ id（id）
{
返回document.getelementbyid（ID）；
}
窗口。指针函数（）{
无功ocanvas =美元（'canvas ID）；
无功oroud =美元（'roud ID）；
无功oradius =美元（'radius ID）；
Var oCir=$Id ('circle');
无功osqu =美元（'squ ID）；
无功ocolors =美元（'colors ID）；
无功acolors = ocolors.getelementsbytagname（李的）；
VaR的颜色'；
无功ainputs = document.getelementsbytagname（输入的）；
VaR XZ = 'roud；
var arr = { }；
对于（var i = 0；i < ainputs.length；i++）
{
如果（ainputs {我}。型= = 'checkbox）
{
Arr.push（ainputs {我}）；
}
}
对于（var i = 0；i < arr.length；i++）
{
ARR {我} onclick=函数（）。
{
如果（！这个，检查过）
{
这个，检查= false；
}
其他的
{
对于（var j = 0；J < arr.length；j++）
{
ARR { J }。检查=假；
}
这个，检查=真的；
XZ = this.value；
}
}
}
颜色
对于（var i = 0；i < acolors.length；i++）
{
acolors {我} onclick=函数（）。
{
颜色= this.classname；
}
}
OCanvas。onmousedown =功能（EV）
{
If (oCanvas.setCapture)
{
OCanvas.setCapture（）；
}
对于（var i = 0；i < arr.length；i++）
{
如果（ARR {我}。检查）
{
ARR {我}检查=真；
XZ = ARR {我}的价值；
}
}
VaR OEV = EV | | window.event；
VaR disx = oev.clientx；
VaR Disy = oev.clienty；
VaR或= document.createelement（'div）；
或div；
或风格。= Disy + 'px；
或风格。左= disx + 'px；
背景颜色＝颜色或风格；
document.body.appendchild（或）；
文件移动鼠标=功能（EV）。
{
VaR OEV = EV | | window.event；
var x = oev.clientx；
var y = oev.clienty；
如果（x＜ocanvas。offsetleft）
{
x = ocanvas.offsetleft；
}
如果（x > ocanvas。offsetleft + ocanvas。offsetwidth）
{
x = ocanvas offsetleft + ocanvas.offsetwidth。
}
如果（y＜ocanvas。offsettop）
{
Y = ocanvas.offsettop；
}
如果（y > ocanvas。offsettop + ocanvas。offsetheight）
{
Y = ocanvas offsettop + ocanvas.offsetheight。
}
或风格。宽度= math.abs（x-disx）+ 'px；
或风格。= Math.min（Disy，Y）+ 'px；
或风格。左= Math.min（disx，x）+ 'px；
开关（XZ）
{
case'roud：
或风格。高度= math.abs（y-disy）+ 'px；
或风格。borderradius = oradius价值+ 'px；
打破；
case'circle：
或风格。高度= math.min（math.abs（x-disx）、Math.abs（y-disy））+ 'px；
或风格。宽度= math.min（math.abs（x-disx）、Math.abs（y-disy））+ 'px；
或风格。borderradius =（math.min（math.abs（x-disx）、Math.abs（y-disy）））/ 2 + 'px；
打破；
case'squ：
或风格。高度= math.abs（y-disy）+ 'px；
打破；
case'square：
或风格。高度= math.min（math.abs（x-disx）、Math.abs（y-disy））+ 'px；
或风格。宽度= math.min（math.abs（x-disx）、Math.abs（y-disy））+ 'px；
}
}
文件。onmouseup =功能（）
{
移动鼠标=空文件；
onmouseout=空文件；
如果（ocanvas。捕获释放）
{
OCanvas.releaseCapture（）；
}
}
返回false；
}
}

请选择颜色


圆角矩形
半径
完美的圆
矩形
广场


希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。