| 网站首页 | 业界新闻 | 群组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
共有 143 人关注过本帖
标题:发个例子
只看楼主 加入收藏
leeqihero
Rank: 3Rank: 3
等 级:论坛游民
威 望:7
帖 子:101
专家分:95
注 册:2016-3-24
结帖率:25%
  问题点数:0  回复次数:0   
发个例子
程序代码:
<html>
<head>
<meta charset=utf-8>
<script>
$=function(b){return document.getElementById(b)};

setCanvas={
    id:0,
    R:250,
    run:function(){
        var cnv=$(this.id);
        cnv.width=2*this.R;
        cnv.height=2*this.R;
        var cxt=cnv.getContext('2d');
        cxt.clearRect(0,0,cnv.width,cnv.height);
        return cnv;
    }
};

circle={
    diff:0,
    data:'木,火,土,金,水',
    size:40,
    color:'black',
    R:800,
    circle:true,
    circleColor:'black',
    run:function(cnv){
        var data=this.data.split(',');
        var cxt=cnv.getContext('2d');
        cxt.fillStyle=this.color;
        cxt.textAlign='center';    
        cxt.translate(cnv.width/2,cnv.height/2);
        var r=this.R;
        var f=this.size;
        if(this.circle){
            cxt.strokeStyle=this.circleColor;
            cxt.beginPath();
            cxt.arc(0,0,r-f/4,0,360,false);
            cxt.stroke();
        }
        cxt.font=f+'px Arial';
        var len=data.length;
        cxt.rotate(this.diff);
        for(var i=0;i<len;i++){
            cxt.fillText(data[i],0,-r);
            cxt.rotate(2*Math.PI/len);
        };
        cxt.rotate(-this.diff);
        cxt.translate(-cnv.width/2,-cnv.height/2);
    }
};

</script>
</head>
<body>
<canvas id=0></canvas>
</div>
<div>
</body>
<script>
mycanvas=({__proto__:setCanvas}).run();
({data:'手太阴,手阳明,足阳明,足太阴,手少阴,手太阳,足太阳,足少阴,手厥阴,手少阳,足少阳,足厥阴',circle:false,R:220,size:30,__proto__:circle}).run(mycanvas);

({data:'肺,大肠,胃,脾,心,小肠,膀胱,肾,心包,三焦,胆,肝',circle:false,R:202,size:17,__proto__:circle}).run(mycanvas);
({data:'中府-少商,商阳-迎香,承泣-历兑,隐白-大包,极泉-少冲,少泽-听宫,睛明-至阴,涌泉-俞府,天池-中冲,关冲-丝竹空,瞳子髎-足窍阴,大敦-期门',R:185,size:17,__proto__:circle}).run(mycanvas);

({data:'寅,卯,辰,巳,午,未,申,酉,戌,亥,子,丑',circle:false,circle:false,R:150,size:25,__proto__:circle}).run(mycanvas);
({data:'辛,庚,戊,己,丁,丙,壬,癸,阴,阳,甲,乙',circle:false,circle:false,R:125,size:25,__proto__:circle}).run(mycanvas);

</script>
</html>


附件: 您没有浏览附件的权限,请 登录注册
2019-03-16 16:41







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.079659 second(s), 8 queries.
Copyright©2004-2019, BCCN.NET, All Rights Reserved