Canvas画先天八卦代码,Css代码库,德仔网

代码语言
代码分类
【Css】 Canvas画先天八卦
作者:炎峙 / 发布于2016/5/10/ 751
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>先天八卦</title>
</head>
 
<body>
<canvas id="myCanvas" width="800" height="800">
    Your browser does not support the canvas element
</canvas>
 
<script type="text/javascript">
(function () {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
     
    context.font = "18px \"Microsoft YaHei\"";
     
    var rotate45d = function () {
        context.translate(400, 400);
        context.rotate(Math.PI / 4);
        context.translate(-400, -400);
    }
     
    var drawGua = function (first, second, third, text, text2) {
        var widthCanvas = canvas.width, heightCanvas = canvas.height;
        var widthGua = 100, heightGua = 10, marginX = 10, marginY = 15;
        var firstX = (widthCanvas - widthGua) / 2,
            secondX = (widthCanvas + marginX) / 2;
        var firstY = heightCanvas / 16,
            secondY = firstY + heightGua + marginY,
            thirdY = secondY + heightGua + marginY,
            fourthY = thirdY + heightGua + marginY;
 
        context.fillStyle = "black";
        if (first) {
            context.fillRect(firstX, firstY, widthGua, heightGua);
        } else {
            context.fillRect(firstX, firstY, (widthGua - marginX) / 2, heightGua);
            context.fillRect(secondX, firstY, (widthGua - marginX) / 2, heightGua);
        }
         
        if (second) {
            context.fillRect(firstX, secondY, widthGua, heightGua);
        } else {
            context.fillRect(firstX, secondY, (widthGua - marginX) / 2, heightGua);
            context.fillRect(secondX, secondY, (widthGua - marginX) / 2, heightGua);
        }
         
        if (third) {
            context.fillRect(firstX, thirdY, widthGua, heightGua);
        } else {
            context.fillRect(firstX, thirdY, (widthGua - marginX) / 2, heightGua);
            context.fillRect(secondX, thirdY, (widthGua - marginX) / 2, heightGua);
        }
         
        context.fillStyle = "red";
        context.fillText(text, firstX + 20, fourthY + 12);
        context.fillStyle = "blue";
        context.fillText(text2, firstX + 20, fourthY + 36);
    }
     
    drawGua(true, true, true, "乾 天 1", "父  南");
 
    rotate45d();
    drawGua(true, true, false, "巽 风 5", " 少女");
     
    rotate45d();
    drawGua(false, true, false, "坎 水 6", "中女 西");
     
    rotate45d();
    drawGua(true, false, false, "艮 山 7", " 长女");
     
    rotate45d();
    drawGua(false, false, false, "坤 地 8", "母  北");
     
    rotate45d();
    drawGua(false, false, true, "震 雷 4", " 少男");
     
    rotate45d();
    drawGua(true, false, true, "离 火 3", "中男 东");
     
    rotate45d();
    drawGua(false, true, true, "兑 泽 2", " 长男");
})();
</script>
</body>
</html>
试试其它关键字
　八卦　　 Canvas　
同语言下
可能有用的
炎峙贡献的其它代码(12)