js绘制菱形(空心和实心)

js绘制菱形，其实很简单，只要发现其中的规律，就可以了，代码如下，首先是空心

var n=window.prompt("请输入n");n=2*n-1;var temp = parseInt(n/2+1);for(var i=0;i<n;i++){for(var j=1;j<=n;j++){if(temp<=i){if(j==(i-temp)+2||j==2*temp-i+parseInt(n/2-1)){document.writeln("*");}else{document.writeln("&nbsp;");}}else{if(j==temp-i||j==temp+i){document.writeln("*");}else{document.writeln("&nbsp;");}}}document.writeln("<br/>");}

实心

var n=window.prompt("请输入n");n=2*n-1;
for(var i=0;i<n;i++){for(var j=1;j<=n;j++){if(temp<=i){if(j>=(i-temp)+2&&j<=2*temp-i+parseInt(n/2-1)){document.writeln("*");}else{document.writeln("&nbsp;");}}else{if(j>=temp-i&&j<=temp+i){document.writeln("*");}else{document.writeln("&nbsp;");}}}document.writeln("<br/>");}

效果图

值得一提的是，由于浏览器的兼容性不同，所以显示的菱形回由于空格的不同，导致图线变样，可以自定义样式来避免，目前我只知道360浏览器是正常的。

js绘制菱形(空心和实心)相关推荐

html 绘制体温单,使用zrender.js绘制体温单效果
今天我们来画折线图效果图以下为模拟数据 [{"time":19,"text":"入\n院\n19\n时\n11\n分","po ...
html 绘制体温单,使用zrender.js绘制体温单(2)
今天我们来画折线图效果图以下为模拟数据 [{"time":19,"text":"入\n院\n19\n时\n11\n分","po ...
mermaid与flowchart.js绘制流程图分支结构试验
mermaid与flowchart.js绘制流程图分支结构试验近日绘制流程图时对不断修改调整流程图中节点位置感到很厌烦,想要改用代码方式来写流程图.以下试验均基于CSDN编辑器的的mermaid和f ...
python绘制若干颜色的菱形_Python turtle库绘制菱形的3种方式小结
Python turtle库绘制菱形的3种方式小结绘制一个菱形四边形,边长为 200 像素.方法1和2绘制了内角为60和120度的菱形,方法3绘制了内角为90度的菱形. 方法1‪‬‪‬‪‬‪‬‪‬‮ ...
打造自己的树莓派监控系统3--canvas.js绘制数据
系列文章: 文章1:打造自己的树莓派监控系统1–CPU监控-matplotlib显示数据文章2:打造自己的树莓派监控系统2–内存监控-matplotlib显示数据文章3:打造自己的树莓派监控系统3 ...
jquery.dataTable.js 绘制表格使用详解
dataTable.js绘制表格真的是很不错,下面看看如何应用吧. 先导入dataTable.js的库吧! 定义html页面. <div><div id="result&q ...
PHP3d地球,three.js绘制地球、飞机与轨迹的效果示例
对于three.js不太熟悉的朋友们可以参考这篇文章,threejs官网:https://threejs.org/ 首先我们来看下要实现的效果这个缩小后的图片,下面我们来看下近距离的动态效果.. 效 ...
使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
Unity-Graphic绘制菱形Rhombus
游戏开发中经常用到属性图绘制,恰巧最近又一次用到.上传一下供大家使用绘制菱形还是需要回归到绘制三角形,以下是六菱形基于Graphic的绘制.上代码 using System.Collections; ...

js绘制菱形(空心和实心)

js绘制菱形(空心和实心)相关推荐

最新文章

热门文章