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

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

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

绘制六芒星战斗力属性图 —— h5 canvas 初体验_第1张图片
最近用MUI做Web app时想实现一个六芒星战斗力图的(类似LPL赛前战队实力分析图)效果,由于正多边形是十分规则的,所以感觉很轻易就可以用h5 canvas来实现,首先在里画一个canvas,id="polygon"


<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"/>
head>
<body>
<canvas id="polygon">不支持canvascanvas>
body>

等待页面加载完毕后开始绘制。函数polygon传入几个参数:canvas对象,多边形边数,颜色渐变层数,各项能力值(数组),各项能力的名称(数组),调用polygon就能绘制出想要的能力属性图啦。

    
                    
                    

你可能感兴趣的:(h5)