Canvas绘制象棋棋盘

作者: 大师艾小伦 | 来源:发表于2019-05-09 11:55 被阅读0次

Canvas绘制象棋棋盘
海龟绘图（turtle）
小程序Canvas闪屏处理
纯JS实现五子棋游戏，兼容各浏览器(附源码)
Android象棋游戏开发之--绘制棋盘
Python开发象棋小游戏（绘制棋盘）
五子棋程序UML类图解释
浅析HTML5的Canvas——案例绘制
四、Android绘制知识总结(画布篇)
canvas

学习Canvas可以通过一些例子来增加成就感
一下是一个输出一个象棋棋盘的例子

象棋棋盘

<html>
<body>
<canvas id="canvas1" width="560" height="620"></canvas>
        <script type="text/javascript">
        
            //以要画的点为原点定义四个象限
            var pointDefine=[[-1,-1],[1,-1],[-1,1],[1,1]];
            //要绘制标记方位 全部
            var allP =[0,1,2,3];
            //要绘制标记方位 左侧
            var leftP =[1,3];
            //要绘制标记方位 右侧
            var rightP =[0,2];
            
            var cl = 70;
            /**
             * 炮和兵位置信息
             * 每一组位置信息为，横向位置，纵向位置，纵向位置上与之相对应的点的距离，要绘制标记方位（左侧还是右侧还是全部）
             */
            var points=[
                [0,3,3,leftP],
                [8,3,3,rightP],
                [2,3,3,allP],
                [4,3,3,allP],
                [6,3,3,allP],
                [1,2,5,allP],
                [7,2,5,allP]
                
            ];
            
            var pointPlace = function (ctx,x,y,pointInfo){
                var l = 10;
                var space = 3;
                for ( var i = 0; i <pointInfo.length; i++){
                    var xinfo = pointDefine[pointInfo[i]][0];
                    var yinfo = pointDefine[pointInfo[i]][1];
                    ctx.moveTo(x+xinfo*space,y+yinfo*l);
                    ctx.lineTo(x+xinfo*space,y+yinfo*space);
                    ctx.lineTo(x+xinfo*l,y+yinfo*space);
                }
            }
        
            var drawX = function (ctx,x,y){
                ctx.moveTo((x-1)*cl,(y-1)*cl); 
                ctx.lineTo((x+1)*cl,(y+1)*cl);
                ctx.moveTo((x+1)*cl,(y-1)*cl);
                ctx.lineTo((x-1)*cl,(y+1)*cl);
            }
            
            var drawProitPare = function (ctx,x,y,cl){
                pointPlace(ctx,x,y,allP);
                pointPlace(ctx,x,y +cl*5,allP);
            }
            
            var drawProitPare = function (ctx,x,y,yplus,cl,pointP){
                pointPlace(ctx,cl*x,cl*y,pointP);
                pointPlace(ctx,cl*x,cl*y +cl*yplus,pointP);
            }
            
            /**
             * 画象棋棋盘
             */
            var drawTable = function(ctx){
                for(var clo = 0;clo<8 ;clo++){
                    for(var ln = 0;ln<9 ;ln++){ 
                        if(ln!=4){
                            ctx.strokeRect(clo*cl,ln*cl,cl,cl);
                        }else{
                            ctx.strokeRect(0,ln*cl,cl*8,cl);
                        }
                    }
                    ctx.strokeRect(0,0,560,620);
                }
            }
            
            var canvas1 = document.getElementById("canvas1");
            var ctx = canvas1.getContext("2d");
            
            //设置线宽 线的颜色
            ctx.lineWidth = 1;
            ctx.strokeStyle = "dodgerblue";
            drawTable(ctx);
            
            var ctx2 = canvas1.getContext("2d");
            drawX(ctx2,4,1);
            drawX(ctx2,4,8);
            
            for(var i = 0; i <points.length; i++){
                drawProitPare(ctx2,points[i][0],points[i][1],points[i][2],cl,points[i][3]);
            }
            
            ctx2.strokeStyle = "dodgerblue";
            ctx2.font='bolder 48px 隶书';
            ctx2.rotate(90 * Math.PI/180)
            ctx2.strokeText("汉",cl*4+10,-485);
            ctx2.strokeText("界",cl*4+10,-435);
            ctx2.rotate(-180 * Math.PI/180)
            ctx2.strokeText("楚",-(cl*5-10),70);
            ctx2.strokeText("河",-(cl*5-10),120);
            ctx2.stroke();
            
        </script>
</body>
</html>