热门标签 | 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);

推荐阅读
  • Python3爬虫入门:pyspider的基本使用[python爬虫入门]
    Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • Bootstrap Paginator 分页插件详解与应用
    本文深入探讨了Bootstrap Paginator这款流行的JavaScript分页插件,提供了详细的使用指南和示例代码,旨在帮助开发者更好地理解和利用该工具进行高效的数据展示。 ... [详细]
  • Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]
  • 利用 Calcurse 在 Linux 终端高效管理日程与任务
    对于喜爱使用 Linux 终端进行日常操作的系统管理员来说,Calcurse 提供了一种强大的方式来管理日程安排、待办事项及会议。本文将详细介绍如何在 Linux 上安装和使用 Calcurse,帮助用户更有效地组织工作。 ... [详细]
  • Beetl是一款先进的Java模板引擎,以其丰富的功能、直观的语法、卓越的性能和易于维护的特点著称。它不仅适用于高响应需求的大型网站,也适合功能复杂的CMS管理系统,提供了一种全新的模板开发体验。 ... [详细]
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 不BB,直接正题一.将大众要领绑定到Page上单个绑定constoldPagePagePagefunction(app){注重大众函数的名字不要反复,不然掩盖app.utilfun ... [详细]
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社区 版权所有