绘制六芒星战斗力属性图 —— h5 canvas 初体验

最新推荐文章于 2024-07-17 08:00:00 发布

薛定谔的死猫

最新推荐文章于 2024-07-17 08:00:00 发布

阅读量1.4w

点赞数 5

分类专栏： h5 文章标签： canvas html5 战斗力属性图

本文链接：https://blog.csdn.net/emptyset110/article/details/48153237

版权

本文介绍了如何使用HTML5的canvas元素来创建一个六芒星形状的战斗力属性图。通过canvas实现了一个功能，可以根据输入的属性值和名称动态绘制图形，为Web应用增加视觉吸引力。

摘要由CSDN通过智能技术生成

在黄金的沙滩上
安息着远古的悲剧

在深绿的波涌中
停着灵魂的船
——《眼睛》，顾城

这里写图片描述
最近用MUI做Web app时想实现一个六芒星战斗力图的（类似LPL赛前战队实力分析图）效果，由于正多边形是十分规则的，所以感觉很轻易就可以用h5 canvas来实现，首先在<body>里画一个canvas，id="polygon"。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
</