原生JS利用HTML5 CANVAS画布布局点状连线图

HTML代码
<canvas id=“myCanvas” width=“1920px” height=“1080px”></canvas>

js代码

<script>// ctx.arc(x轴,y轴,圆圈大小,0默认0,2*Math.PI);var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var color = "rgba(76,175,80,0.5)";// text数字，x轴，y轴，color颜色 string需要连线的坐标0X轴 1Y轴function vasTan(text, x, y, color,string=false) {// 文字size=text/2+20;ctx.fillStyle = '#000000' //字体颜色ctx.textAlign = 'center' //文字居中ctx.font = "bold "+size+"px Arial"ctx.fillText(text, x, y + size/2.5); // 文字大小除以2.5使文字居中// 画圆ctx.strokeStyle = color; // 边框线颜色ctx.beginPath(); // 开始画图ctx.arc(x, y, size, 0, 360);//图形位置与形状ctx.fillStyle = color; //图形填充颜色ctx.fill();//画实心圆ctx.closePath();if (string) // 判断是否需要连线{ctx.moveTo(string[0],string[1]); //线开始坐标ctx.lineTo(x,y); // 线结束坐标ctx.lineWidth = 2;//线条的宽度ctx.strokeStyle = color;//线条的颜色}ctx.stroke();//结束}arr=false;len=20;while (len--) {// color="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.5)"var point = [Math.floor(Math.random()*1920),Math.floor(Math.random()*1080)];vasTan(len*3, point[0], point[1], color,arr);arr=point;}</script>

效果图

原生JS利用HTML5 CANVAS画布布局点状连线图相关推荐

打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏
这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和 ...
php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法，本文实例讲述了html5 canvas画布 - phpStudy...
JavaScript html5 canvas画布中删除一个块区域的方法本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图 ...
根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
html5画布添加输入框,JS，HTML5 - 在画布上添加文本输入值作为fillText
我试图用HTML5 canvas来玩弄一点,而我只是在制作一个有趣的小型web应用程序,但我已经陷入困境.JS,HTML5 - 在画布上添加文本输入值作为fillText 我希望用户输入文本到文本框, ...
bubble html5,利用HTML5 Canvas创建交互式Bubble Chart
Josh Marinacci也在其博客中详细地介绍了"如何利用HTML5 Canvas创建可以在移动桌面上运行的交互式图表以及如何利用真实数据填充图表."下面让我们跟随作者学习如何 ...

原生JS利用HTML5 CANVAS画布布局点状连线图

原生JS利用HTML5 CANVAS画布布局点状连线图相关推荐

最新文章

热门文章