javascript 绘图

最新推荐文章于 2021-09-27 20:10:05 发布
最新推荐文章于 2021-09-27 20:10:05 发布
阅读量508 收藏
点赞数
分类专栏： 技术研究 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sffdsafsf/article/details/46357059
版权
<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>
3453535大的地方改
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript与Canvas绘图
吃不胖.
09-14 248
Canvas是HTML5中提供的绘图功能，可以实现各种图形的绘制、图像处理和动画制作等功能。使用Canvas需要先创建Canvas元素，并获取Canvas上下文，然后可以进行绘图操作。Canvas可以绘制各种图形，包括线条、矩形、圆形、弧线、文本等，还可以进行图像处理和动画制作等。Canvas可以制作动画，使用setInterval函数可以按照指定间隔调用函数，在函数中进行绘图操作，实现动画效果。其中，canvas为前面创建的Canvas元素，ctx为Canvas上下文。三、Canvas绘制图形。
JavaScript Canvas之画图
最新发布
weixin_55626132的博客
12-10 594
创建画布，绘制线、矩形、圆、圆弧等。
Javascript绘图javascript
chaoxidawang的专栏
01-09 500
javascript绘图 javascript绘图 如果需要在网页上提供图形化的资料,通常是将其制作成图片,但这样一来网络上的开销就太大了。有什么办法呢?这里向你提供一组javascript函数,来解决这一问题。虽然简单了点,但是对画点线图来说还是绰绰有余的! 绿色通道:好文要顶关注我收藏该文与我联系 posted on 2004-05-15 14:14 goodspeed 阅读(1
js绘图
热门推荐
weixin_46351593的博客
10-26 1万+
文章目录JavaScript绘图使用canvas绘制图形矩形路径圆弧直线与曲线定义样式和颜色颜色不透明度实线虚线经向渐变图案阴影填充规则图形变形保存和恢复状态清除画布移动坐标旋转坐标缩放图形变换图形图形合成合成裁切绘制文本填充文字轮廓文字文本样式测量宽度导入图像缩放图像裁切图像平铺图像 JavaScript绘图 HTML5新增了Canvas API，允许js在<canvas>标签识别的画布上绘制图形，创建动画，设置设计实时视频处理或渲染。借助一套编程接口，用户可以在页面上绘制出任何漂亮的图形。
js绘图,javascript 绘图
10-28
js绘图,javascript 绘图，web绘图
JavaScript 绘图代码
10-30
JavaScript 绘图代码 JavaScript 绘图代码是使用 JavaScript 语言来绘制各种图形的代码。该代码利用了 JavaScript 的绘图能力，可以绘制出各种复杂的图形。下面将详细介绍该代码的实现原理和技术要点。 实现原理 ...
javascript经典特效---JavaScript绘图.rar
12-25
JavaScript绘图技术是Web开发中的一个重要领域，它允许开发者在网页上动态创建和修改图形，为用户带来丰富的视觉体验。JavaScript绘图的核心是利用HTML5的Canvas元素和相关的API，这些API提供了绘制线条、形状、图像...
绘图仪：简单Javascript绘图仪的实现
02-18
"绘图仪：简单Javascript绘图仪的实现"这个项目，旨在教你如何利用JavaScript的基本特性来创建一个用户可以在网页上绘制图形的工具。 首先，你需要理解HTML5的Canvas元素。Canvas是HTML5引入的一个强大特性，它提供...
draw:Simon Sablowski 的简单 HTML5 和 JavaScript 绘图工具
06-19
《Simon Sablowski的HTML5与JavaScript绘图工具解析》 在互联网技术日新月异的今天，HTML5和JavaScript已经成为了网页开发的核心技术。它们的结合为开发者提供了丰富的功能和无限的可能性，尤其是在交互式应用方面...
JS画图各种图
09-22
js 画柱状图、饼状图、折线图 采用该脚本，并引用VML源之后，在网页上即可通过一个简单的函数在指定容器内绘制图形引用接口如下：
用JavaScript绘图 ——JS2D函数集
12-20
用JavaScript绘图 ——JS2D函数集
js绘图，绘制各种图形，纯js
05-25
js绘图，绘制各种图形，纯js，还没正式用过
js画图工具
04-10
js画图工具，支持正方形、圆形、折现、菱形画图，封装比较简单，需要用到的朋友可以自己扩展！
JS 绘图(圆形，多边形，线，矩形等等..)
02-29
JS 绘图(圆形，多边形，线，矩形等等..)
JavaScript网页绘图(一）
yzlh2009的博客
06-01 444
/**通过 rect() 方法来创建三个矩形**/ var c=document.createElement("canvas"); document.body.appendChild(c); var ctx=c.getContext("2d"); // 红色矩形 ctx.beginPath(); ctx.lineWidth="6"; ctx.strokeStyle="red"; ctx.rect(5,5,140,140); ctx.stroke(); // 绿色矩形 ctx.beginPath(
通过JavaScript实现画图功能
m0_52217128的博客
09-27 711
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #xy{ position:fixed; left:0; bottom:0; } ...
JS简易画图
sinat_38678369的博客
10-11 477
JS简易画图 用Jscript做的一个建议画图网页，想要的直接复制就好，没有额外的文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="
javascript画图
封神之路~
04-28 1202
<br />javascript画图<br /> <br /> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="t
javascript绘图
weixin_30355437的博客
03-06 56
<script Language="javascript">/****************** JS2D函数集 *******************作者：neweroica 2003-3-28CopyRight (C) 2003在引用或转载时请保留此版权信息，谢谢!!!本函数集可以单独存成一个js文件："JS2D.js"*********************...
jqPlot官方文档：纯JavaScript绘图插件
jqPlot 是一个纯JavaScript的图表绘制插件，适用于jQuery库，主要用于创建数据可视化图表。该插件版本为1.0.8，作者为Chris Leonello，并在MIT和GPL version 2.0许可下授权，允许个人和商业项目使用。 jqPlot的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值