javascript 绘图

最新推荐文章于 2022-12-10 23:37:43 发布

原创最新推荐文章于 2022-12-10 23:37:43 发布 · 582 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

技术研究专栏收录该内容

9 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用HTML5中的JavaScript来绘制一系列的形状，包括线条、圆形和矩形等，并介绍了基本的绘图技巧。

<html>
<head>

<script type="text/javascript">

var lineH = 3; //线条高度
var cirSize = 2;
var color = "#2E2E2E"; //颜色

function drawHLine(sx,sy,width,height,c)
{
var body = document.body;
var d_div = document.createElement('div');

d_div.style.left = sx + 'px';
d_div.style.top = sy + 'px';
d_div.style.width= width + 'px';
d_div.style.height = height + 'px';

d_div.style.position = 'absolute';

d_div.style.backgroundColor = c;

body.appendChild(d_div);
}

function drawCircle(left,top,width,height,c,isBold)
{
var body = document.body;
var e_div = document.createElement('div');

var r;

r = width / 2;

e_div.style.left = (left - r) + 'px';
e_div.style.top = (top - r) + 'px';
e_div.style.width= width + 'px';
e_div.style.height = height + 'px';

e_div.style.position = 'absolute';

if(1 == isBold)
{
e_div.style.backgroundColor = c;
}
else
{
e_div.style.border = cirSize+'px solid ' + c;
}

e_div.style.borderRadius = Math.round(width / 2) + 10 + 'px';

body.appendChild(e_div);
}

function drawRect(left,top,width,height,c)
{
var body = document.body;
var r_div = document.createElement('div');

r_div.style.left = (left - (width / 2)) + 'px';
r_div.style.top = (top - (height / 2)) + 'px';
r_div.style.width= width + 'px';
r_div.style.height = height + 'px';

r_div.style.position = 'absolute';
r_div.style.backgroundColor = c;
body.appendChild(r_div);
}

</script>

</head>
<body>

</body>
<script>

var baseX = 100;
var baseY = 100;

function drawPicture()
{
var lastPos = 0;

drawHLine(baseX,baseY,38,lineH,color);
lastPos = baseX + 38;

drawCircle(lastPos + 27,baseY,54,54,color,0);
drawCircle(lastPos + 29,baseY + 2,48,48,color,1);
lastPos = lastPos + 54 + 4;

drawHLine(lastPos,baseY,18,lineH,color);
lastPos = lastPos + 18;

drawCircle(lastPos + 27,baseY,54,54,color,0);
drawRect(lastPos + 27,baseY + 30,65,54,'#FFF');
drawCircle(lastPos + 29,baseY + 2,48,48,color,1);
lastPos = lastPos + 54 + 4;

drawHLine(lastPos,baseY,18,lineH,color);
lastPos = lastPos + 18;

drawCircle(lastPos + 27,baseY,54,54,color,0);
drawRect(lastPos + 27,baseY - 27,65,54,'#FFF');
drawCircle(lastPos + 29,baseY + 2,48,48,color,1);
lastPos = lastPos + 54 + 4;

drawHLine(lastPos,baseY,18,lineH,color);
lastPos = lastPos + 18;

drawCircle(lastPos + 21,baseY + 2,36,36,color,1);
lastPos = lastPos + 42;

drawHLine(lastPos,baseY,38,lineH,color);
lastPos = lastPos + 35;

drawCircle(lastPos + 29,baseY + 2,48,48,color,1);
lastPos = lastPos + 55;

drawHLine(lastPos,baseY,18,lineH,color);
lastPos = lastPos + 18;

drawCircle(lastPos + 27,baseY,54,54,color,0);
drawRect(lastPos + 45,baseY - 15,30,30,'#FFF');
drawRect(lastPos + 45 - 27 - 5,baseY - 15 + 27 + 6,30,30,'#FFF');
drawCircle(lastPos + 29,baseY + 2,48,48,color,1);

lastPos = lastPos + 56;
drawHLine(lastPos,baseY,38,lineH,color);
}

drawPicture();

</script>
</html>