热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

html5使用canvas绘制n角星

效果图:动态变换:五角星分析函数调用:drawNStar(ctx,{num:26,多少角星

效果图:

image

动态变换:

image

五角星分析

image

函数调用:

drawNStar(ctx, {
            "num": 26,//多少角星
            "R": 150,//中心到顶点距离
            "r": 50,//中心到凹点距离
            "x": 50,//左上角X坐标
            "y": 50,//左上角Y坐标
            "rot": 45// 旋转角度
        }, {
            "fs": "#F5E322",//填充色
            "lj": "round",//接头圆滑
            "lw": 2,//线宽
            "b": true,//有边线
            "f": true,//有填充
        });

函数体:

        /** * 绘制n角星 * @param ctx * @param num 星星数量 * @param R 中心到顶点距离 * @param r 中心到凹点距离 * @param x 左上角X坐标Y * @param y 左上角坐标 * @param rot 旋转角度 * @param configJson 配置信息 */
        function _drawNStar(ctx, num, R, r, x, y, rot, configJson) {
            b2c(ctx, function () {
                var border = configJson["lw"];
                for (var i = 0; i var perDeg = 360 / num;
                    var degA = perDeg / 2 / 2;
                    var degB = 360 / (num - 1) / 2 - degA / 2 + degA;
                    ctx.lineTo(Math.cos((degA + perDeg * i - rot) / 180 * Math.PI) * R + x + border + R * Math.cos(degA / 180 * Math.PI),
                        -Math.sin((degA + perDeg * i - rot) / 180 * Math.PI) * R + y + border + R);
                    ctx.lineTo(Math.cos((degB + perDeg * i - rot) / 180 * Math.PI) * r + x + border + R * Math.cos(degA / 180 * Math.PI),
                        -Math.sin((degB + perDeg * i - rot) / 180 * Math.PI) * r + y + border + R);
                }

            }, configJson);
        },
        //使用json格式传参
       function drawNStar(ctx, infoJson, configJson) {
            var num, R, r, x, y, rot;
            num = infoJson["num"];
            R = infoJson["R"];
            r = infoJson["r"];
            x = infoJson["x"];
            y = infoJson["y"];
            rot = infoJson["rot"];
            _drawNStar(ctx, num, R, r, x, y, rot, configJson)
        }

                /** * beginPath到closePath * @param ctx 上下文 * @param callback 回调函数 * @param configJson 配置信息 */
        function b2c(ctx, callback, configJson) {
            ctx.beginPath();
            if (callback && typeof(callback) === "function") {
                callback();
            }
            ctx.closePath();//会封闭图形

            ctx.lineWidth = configJson["lw"];
            ctx.strokeStyle = configJson["ss"];
            ctx.fillStyle = configJson["fs"];
            ctx.lineJoin = configJson["lj"];
            ctx.lineCap = configJson["lc"];

            if (configJson["f"]) {
                ctx.fill();
            }
            if (configJson["b"]) {
                ctx.stroke();//绘制
            }
        }

动态变换角数

        var count = 3;
        var timer = null;
        timer = setInterval(function () {
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            myCanvas.drawNStar(ctx, {
                "num": count,//多少角星f
                "R": 100,//中心到顶点距离
                "r": 50,//中心到凹点距离
                "x": 50,//左上角X坐标
                "y": 50,//左上角Y坐标
                "rot": 45// 旋转角度
            }, {
                "fs": "#FCFA31",//填充色
                "lj": "round",//接头圆滑
                "lw": 2,//线宽
                // "b": true,//有边线
                "f": true,//有填充
            });
            count++;
            console.log("{count}--{" + count + "}");
            if (count > 150) {
                clearInterval(timer);
            }
        }, 50);

推荐阅读
  • 原文网址:https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么?2、需求3、解决办法1:使用静态代理4 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • PHP预处理常量详解:如何定义与使用常量 ... [详细]
  • 本文将继续探讨 JavaScript 函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例,我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中,节点之间的连线代表路径,连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。 ... [详细]
  • 本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用,本文提供了实用的代码示例和最佳实践,帮助开发者解决跨域请求中的常见问题。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 在Python编程中,探讨了并发与并行的概念及其区别。并发指的是系统同时处理多个任务的能力,而并行则指在同一时间点上并行执行多个任务。文章详细解析了阻塞与非阻塞操作、同步与异步编程模型,以及IO多路复用技术的应用。通过模拟socket发送HTTP请求的过程,展示了如何创建连接、发送数据和接收响应,并强调了默认情况下socket的阻塞特性。此外,还介绍了如何利用这些技术优化网络通信性能和提高程序效率。 ... [详细]
  • ZTree工具类全面汇总:实现节点的增删改及后台提交功能
    本文全面总结了ZTree工具类的使用方法,详细介绍了如何实现节点的增加、删除、修改以及后台数据提交等功能。通过实例代码和具体操作步骤,帮助开发者高效地掌握ZTree的各类操作,提升开发效率。此外,还提供了常见问题的解决方案,如在SpringBoot集成X-admin2.2时遇到的Layui字体图标显示问题。 ... [详细]
  • 本文介绍了如何利用摄像头捕捉图像,并将捕获的图像数据保存为文件。通过详细的代码示例,展示了摄像头调用的具体实现方法,适用于多种应用场景,如安全监控、图像处理等。 ... [详细]
  • 本文是Java并发编程系列的开篇之作,将详细解析Java 1.5及以上版本中提供的并发工具。文章假设读者已经具备同步和易失性关键字的基本知识,重点介绍信号量机制的内部工作原理及其在实际开发中的应用。 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
    在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
  • 在处理大规模并发请求时,传统的多线程或多进程模型往往无法有效解决性能瓶颈问题。尽管它们在处理小规模任务时能提升效率,但在高并发场景下,系统资源的过度消耗和上下文切换的开销会显著降低整体性能。相比之下,Python 的 `asyncio` 模块通过协程提供了一种轻量级且高效的并发解决方案。本文将深入解析 `asyncio` 模块的原理及其在实际应用中的优化技巧,帮助开发者更好地利用协程技术提升程序性能。 ... [详细]
author-avatar
手机用户2502929925
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有