正五边形可以随着值得变化改变图形html+css+javascript+jquery

最新推荐文章于 2022-07-14 15:16:27 发布
最新推荐文章于 2022-07-14 15:16:27 发布
阅读量561 收藏 1
点赞数
分类专栏： html图像 文章标签： html5 css 正五方图 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_ziliang/article/details/93061171
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正五边形可以随着值得变化改变图形</title>
		<style type="text/css">
		.canvasBox{
			position: relative;
			border: 1px dotted #ccc;
			padding: 2rem;
			background-color: #fff
		}
		.canvasBox .inner {
			margin: 2.5rem auto 0;
			transform: rotate(180deg);
			-ms-transform: rotate(180deg); /* Internet Explorer 9*/
			-moz-transform: rotate(180deg); /* Firefox */
			-webkit-transform: rotate(180deg); /* Safari 和 Chrome */
			-o-transform: rotate(180deg); /* Opera */
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			padding: 1rem;
			background-color: #fff;
		}
		.canvasBox canvas {
			margin: 0 auto;
		}
		.canvasBox .inner .re {
			text-align: center;
			line-height: 1.2;
			transform: rotate(180deg);
			-ms-transform: rotate(180deg); /* Internet Explorer 9*/
			-moz-transform: rotate(180deg); /* Firefox */
			-webkit-transform: rotate(180deg); /* Safari 和 Chrome */
			-o-transform: rotate(180deg); /* Opera */
		}
		.canvasBox .inner .re span {
			font-size: 1.2rem;
		}
		</style>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		 <div class="canvasBox">
                    <div class="inner" id="u103"></div>
                    <script type="text/javascript">
                        (function () {
                            var Radar = function (cfg) {
                                var pH = window.screen.height;
                                var pW = window.screen.width;
                                var container = document.getElementById('u103');
                                var cans = document.createElement("canvas");
                                str = document.getElementById("u103").innerHTML;
                                if (str.length == 0) {
                                    container.appendChild(cans);
                                }
                                var ctx = cans.getContext("2d");
                                var data = cfg.data;
                                var w = cfg.width;
                                var h = cfg.height;
                                // container.style.position = "relative";
                                container.style.width = w + "px";
                                container.style.height = h + "px";
                                cans.width = w;
                                cans.height = h;
                                var step = data.length;
                                var r = w / 2;

                                //绘制网格背景
                                var isBlue = false;
                                for (var s = 1; s > 0; s--) {
                                    ctx.beginPath();
                                    for (var i = 0; i < 10; i++) {
                                        var rad = 2 * Math.PI / step * i;
                                        var x = r + Math.sin(rad) * r * (1);
                                        var y = r + Math.cos(rad) * r * (1);
                                        ctx.lineTo(x, y);
                                    }
                                    ctx.closePath();
                                    ctx.fillStyle = (isBlue = !isBlue) ? '#F1F3F2' : '#F1F3F2';
                                    ctx.fill();
                                }

                                //绘制伞骨
                                ctx.beginPath();
                                for (var i = 0; i < step; i++) {
                                    var rad = 2 * Math.PI / step * i;
                                    var x = r + Math.sin(rad) * r;
                                    var y = r + Math.cos(rad) * r;
                                    ctx.lineTo(x, y);

                                    var text = document.createElement("div");
                                    text.innerHTML = data[i][0];
                                    text.style.position = "absolute";
                                    //text.style.font = "9px Verdana";
                                    //添加文本
                                     if (x > r) {
                                        text.style.width = '150px';
                                        if (i==1) {
                                            text.style.left = x - 35 + 'px';
                                        } else {
                                            text.style.left = x - 30 + 'px';
                                        } 
                                    } else {
                                        text.style.width = '150px';
                                        if (i == 0) {
                                            text.style.right = (w - x - 60) + 'px';
                                        } else if (i==4)
                                        {
                                            text.style.right = (w - x - 35) + 'px';
                                        }
                                        else {
                                            text.style.right = (w - x - 25) + 'px';
                                        }
                                    }

                                    if (y > r) {
                                        if (i == 0) {
                                            text.style.top = (y+12) + 'px';
                                        } else {
                                            text.style.top = y + 'px';
                                        }
                                    } else {
                                        if (i == 2 || i == 3) {
                                            text.style.bottom = (h - y+10) + 'px';
                                        } else {
                                            text.style.bottom = (h - y) + 'px';
                                        }
                                    }
                                    container.appendChild(text);
                                }
                                ctx.strokeStyle = "#F1F3F2"
                                ctx.stroke();

                                //绘制折线
                                ctx.beginPath();
                                for (var i = 0; i < step; i++) {
                                    var rad = 2 * Math.PI / step * i;
                                    var x = r + Math.sin(rad) * r * data[i][1];
                                    var y = r + Math.cos(rad) * r * data[i][1];
                                    ctx.lineTo(x, y);
                                }
                                ctx.closePath();
                                ctx.fillStyle = '#90EFEC';
                                ctx.fill();
                            }
                            window["Radar"] = Radar;
                        })();
                        function covertnum(num) {

                            if (num >= 1) {
                                num = num / 10;
                            }
                            if (num == 0) {
                                return 0.1;
                            } else {
                                return num;
                            }
                        }
                        var radar = new Radar({
                            el: "#u103",
                            width: $('.canvasBox').width() - 100,
                            height: $('.canvasBox').width() - 100,
                            data:
							[["<div  class=\"re\"><span>第一个边</span><br><span>" + 10 + "分</span></div>", covertnum(10)],
							["<div class=\"re\"><span>第二个边</span><br><span>" + 9.9 + "分</sapn></div>", covertnum(9.9)], //
                            ["<div class=\"re\"><span>第三个边</span> <br><span>" + 8.2 + "分</span></div > ", covertnum(8.2)],
                            ["<div class=\"re\"><span>第四个边</span><br><span>" + 8.5 + "分</span></div>", covertnum(4.5)],
                            ["<div class=\"re\"><span>第五个边</span><br><span>" + 8.0 + "分</span></div>", covertnum(5.0)]]
                        });
                    </script>
            </div>
	</body>
</html>

源码下载地址：https://download.csdn.net/download/it_ziliang/11250859

IT_ziliang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html把图片设为5边形,用div+css轻松绘制正3、4、5、6、7、8边形
weixin_40007548的博客
06-04 992
给你一个div，你能用CSS绘制一个正三角形、正方形、正五边形、正六边形、正七边形、正八边形吗？今天我们来玩一个有趣的CSS实验，想象下，只用一个div，你能用CSS绘制一个正三角形、正方形、正五边形、正六边形、正七边形、正八边形吗？今天笔者带着大家一起动手实践下这个有趣的联系，由于正多边形用到不少三角函数计算，为了方便计算，这里正多边形统一设定为100px，为啥只做到正八边形？因为就一个div最...
Canvas绘制正多边形及五角星
weixin_42679187的博客
10-19 776
一般常用的绘图技术有三种：Svg,Canvas和WebGL 在正式使用Canvas绘制多边形及五角星之前，请允许我向大家简单的介绍下Canvas绘图之路径的基本语法结构 ctx.beginPath() -------- 开始一条新路径 ctx.closePath() -------- 闭合当前路径 ctx.lineWidth = 1 ------ 描边宽度 ctx.fillStyle =...
Canvas绘制正五边形雷达图
12-28
Canvas绘制正五边形雷达图，代码简单，需要的朋友可以下载后自己修改。
CSS 实现五边形
weixin_41983443的博客
07-14 1285
css实现五边形
html5绘制渐变五边形,js点阵绘制5边形
weixin_34276402的博客
06-18 493
写了一段生成象素点来绘制5边形的代码。用到了Bresenham斜线画法、三角函数等知识。代码如下：JS绘制五边形.paper {width: 600px;height: 300px;border-color: #E0E0E0;border: 1px solid #DDD;position: relative;}.point {width: 1px;height: 1px;position: ab...
正五边形可以随着值得变化改变图形
06-20
正五边形可以随着值得变化改变图形,网上找了好久没有找到。
Scratch绘制十个正五边形 青少年编程 蓝桥杯Scratch编程选拔赛STEMA比赛真题源码
05-04
scratch绘制十个正五边形 蓝桥杯scratch比赛 青少组选拔赛STEMA真题解析 考点：此案例难度系数2；综合考查初始位置、移动步数、方向、旋转角度、大小、造型切换、有限循环、嵌套循环、画笔模块相关操作等积木的使用...
一种正五边形的尺规作图法.docx
11-20
此外，正五边形的每个内角可以分为两个36度的小角。这样的划分有助于我们构建正五边形，因为36度角可以通过直尺和圆规容易地构造出来。 接着，我们探讨了等腰三角形ABD的性质。在这个等腰三角形中，我们可以找到角...
CSS_shape.zip_CSS 绘制图形
09-21
本压缩包“CSS_shape.zip”聚焦于利用CSS来绘制各种有趣的图形，使得网页设计更加丰富多彩。通过直接复制和使用提供的代码，你可以快速地在自己的项目中实现这些图形。 首先，`css_shape.html`是主示例文件，它可能...
html代码设置五边形,javascript怎么画正五边形？
weixin_39611506的博客
06-07 811
javascript怎么画正五边形？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。如何用程序来绘制正多边形？在一般情况下，会使用 x = radius * Math.cos(angle), y = radius * Math.sin(angle) 来进行绘制，但这是关于x轴对称的，如果遇到正多边形的边数为奇数，而你又希望它是以y轴对称时，可按照下面的方...
【绘制】HTML5 Canvas正多边形的绘制（三角形、矩形、五边形、六边形等等）
苏一恒
09-11 4254
介绍 在Canvas教程中，我们已经实现全部的基本图形，包括线段、矩形、圆弧、圆形、贝塞尔曲线等等。但是我们肯定要再canvas中绘制除此之外的其他图形，比如三角形、六边形、八边形等等。 其实配合moveTo()与lineTo()方法，再结合一些简单的三角函数，就能绘制任意边数的多边形。下面演示了如何利用三角函数绘制多边形的某个部分。 如图展示了如何利用多边形外接圆圆心和半径，计算多边形...
HTML5心得：Canvas KineticJS正多边形教程
zhaomiyy努力学html5的故事
10-30 725
创建一个正多边形与KineticJS,我们可以实例化一个Kinetic.Polygon()对象。普通多边形的例子三角形、正方形、五边形、六边形等。列出了完整的属性和方法,看看动能。RegularPolygon文档。 body { margin: 0px; padding: 0px; }
canvas手绘正五边形
大树之殇的博客
09-22 2698
一、基本用法：alertShow(param: any, $index: any) { let $log = this.$log; let $scope = this.$scope; if (param !== $scope.lastObj) { param.show = true; if ($scope
用css画五边形（代码）
小马过河
05-21 8568
Pentagon(五边形)   #pentagon {     position: relative;     width: 54px;     border-width: 50px 18px 0;     border-style: solid;     border-color: red transparent; } #pentagon:before {     content: ""; ...
canvas——js画多边形方法
MOONCOM的博客
10-13 6552
代码如下： var aa=document.getElementById("aa").getContext("2d"); aa.shadowBlur=6; aa.shadowColor="gray"; aa.shadowOffsetX=7; aa.shadowOffsetY=5; function createStar(cont
svg动画
网站前端/PHP/Android/其他
02-22 1184
一、CSS3动画交互的局限 CSS3也能实现很多精彩的动画效果，配合transform新增的多个变换，以及animation的延时、重复次数、前后端状态控制等，可以实现很多精彩的效果。 然而，也是有局限的。很明显，CSS3对图形所做的变化效果，往往都是基于图形整体的动画。什么意思呢？比方说，一个四边矩形，可以让他捏成足球(border-radius，圆角矩形)、然后再旋转、拉伸或者缩放
html代码设置五边形,css实现五边形旋转效果代码
weixin_34347959的博客
06-07 571
css实现五边形旋转效果代码时间：2019-08-05 12:02:02来源：作者：3D旋转5边型.container {perspective: 500px;width: 200px;height: 200px;margin: 200px auto 0;}.face-box {position: relative;width: 200px;height: 200px;transform-...
Css3之五边形跟六边形
Allen-Ye博客
08-22 1373
今天我们来讨论下如果做五边形跟六边形，五边形可以拆成梯形跟三角形组合起来（还有个思路就是三个三角形，两个钝角的，然后通过transform旋转得到五边形，这个大家自己去试试），六边形可以拆成两个三角形和一个长方形 我们先来了解下梯形如何做 梯形 .trapezoid{ width:50px; border-top: 50px solid red; border-bottom: 0px so...
opencvc++五边形水印
最新发布
11-01
五边形水印是一种在图像中嵌入水印的技术，它可以用于版权保护和身份验证等方面。在OpenCV中，可以使用C++语言实现五边形水印技术。 实现五边形水印的步骤如下： 1. 读取原始图像和五边形水印图像。 2. 对五边形...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值