canvas绘制中国象棋棋盘

棋盘

board.html

<!doctype html>
<html><head><meta charset="gb2312"/></head><body><div class="board"><canvas id="board" width="450px" height="500px"></canvas></div></body></html>
<script type="text/javascript" src="js/board.js"></script>

board.js

//棋盘类
var chessBoard=function(){//获取棋盘画布 var board=document.getElementById("board");//初始化画布board.style.border="1px solid gray";board.style.backgroundColor="rgba(100,180,170,0.6)";//得到绘图对象 this.context=board.getContext('2d');//棋盘大小this.row=10;this.col=9; //画直线函数 this.line=function(x1,y1,x2,y2){this.context.beginPath();this.context.lineWidth=2;this.context.moveTo(x1,y1);this.context.lineTo(x2,y2);this.context.strokeStyle="black";this.context.stroke();this.context.closePath();};//重载画直线函数this.line=function(x1,y1,x2,y2,color){this.context.beginPath();this.context.lineWidth=2;this.context.moveTo(x1,y1);this.context.lineTo(x2,y2);this.context.strokeStyle=color;this.context.stroke();this.context.closePath();};//画横线函数 this.drawRows=function(){for(var i=0;i<this.row;i++){this.line(25,25+50*i,425,25+50*i);}}; //画竖线函数 this.drawCols=function(){for(var i=0;i<this.col;i++){this.line(25+i*50,25,25+i*50,475);}//清除多画的部分this.context.clearRect(26,226,398,48); };//画斜线函数this.drawBias=function(){this.line(175,25,275,125);this.line(175,125,275,25);this.line(175,375,275,475);this.line(175,475,275,375);}; //画中心点this.center=function(x,y){if(x<this.col-1){this.line(x*50+25+5,y*50+25-15,x*50+25+5,y*50+25-5);this.line(x*50+25+5,y*50+25-5,x*50+25+15,y*50+25-5);this.line(x*50+25+5,y*50+25+5,x*50+25+15,y*50+25+5);this.line(x*50+25+5,y*50+25+5,x*50+25+5,y*50+25+15);}if(x>0){this.line(x*50+25-5,y*50+25-15,x*50+25-5,y*50+25-5);this.line(x*50+25-5,y*50+25+5,x*50+25-5,y*50+25+15);this.line(x*50+25-15,y*50+25-5,x*50+25-5,y*50+25-5);this.line(x*50+25-15,y*50+25+5,x*50+25-5,y*50+25+5);                  }}; //画兵卒炮的起始位置中心点函数 this.drawCenter=function(){this.center(1,2);this.center(7,2);this.center(0,3);this.center(2,3);this.center(4,3);this.center(6,3);this.center(8,3);this.center(1,7);this.center(7,7);this.center(0,6);this.center(2,6);this.center(4,6);this.center(6,6);this.center(8,6);};//画边框函数this.drawBorder=function(){this.context.beginPath();this.context.lineWidth=4;this.context.rect(18,18,414,464);this.context.stroke();this.context.closePath();}; //画楚河汉界函数 this.writeChuRiverAndHanBorder=function(){this.context.beginPath();this.context.font="28px bold 黑体";this.context.fillStyle="black";this.context.textAlign="center";this.context.textBaseline="middle";//绘制文字this.context.fillText("楚 河",125,252); this.context.fillText("汉 界",325,252); this.context.closePath();this.context.beginPath();this.context.font="15px bold 宋体";this.context.fillStyle="rgba(100,100,100,0.8)";this.context.textAlign="center";this.context.textBaseline="middle";this.context.fillText("冰凌象棋网",225,242);this.context.fillText("bingling.com",223,258);this.context.closePath();};//画棋盘综合函数this.draw=function(){//行 this.drawRows();//列 this.drawCols();//九宫斜线 this.drawBias();//外边框 this.drawBorder();//兵卒炮初始位置中心点 this.drawCenter();//楚河汉界 this.writeChuRiverAndHanBorder();}; //画棋子选中框this.drawSelectBorder=function(x,y){this.line(x*50+25-22,y*50+25-22,x*50+25-22,y*50+25-12,"blue");this.line(x*50+25-22,y*50+25-22,x*50+25-12,y*50+25-22,"blue");this.line(x*50+25-22,y*50+25+22,x*50+25-22,y*50+25+12,"blue");this.line(x*50+25-22,y*50+25+22,x*50+25-12,y*50+25+22,"blue");this.line(x*50+25+22,y*50+25-22,x*50+25+22,y*50+25-12,"blue");this.line(x*50+25+22,y*50+25-22,x*50+25+12,y*50+25-22,"blue");this.line(x*50+25+22,y*50+25+22,x*50+25+22,y*50+25+12,"blue");this.line(x*50+25+22,y*50+25+22,x*50+25+12,y*50+25+22,"blue");}; //画棋子函数 this.drawPiece=function(x,y,pieceName,pieceType){this.context.beginPath();this.context.arc(x*50+25,y*50+25,21,0,2*Math.PI);this.context.fillStyle=pieceType;this.context.fill();this.context.font="26px bold 宋体";if(pieceType=="red")this.context.fillStyle="yellow";else if(pieceType=="black"){this.context.fillStyle="white";}this.context.textAlign="center";this.context.textBaseline="middle";this.context.fillText(pieceName,x*50+25,y*50+26);this.context.closePath();}; //刷新棋盘函数（根据玩家） this.flashChessBoard=function(pieces){//每当画布的高度被赋值时画布就会清空 this.context.height=this.context.height;this.draw();for(var i=0;i<pieces.length;i++){this.drawPiece(pieces[i].x,pieces[i].y,pieces[i].name,pieces[i].type);} };
};var pieces=[{x:0,y:0,name:"車",type:"black"},{x:1,y:0,name:"馬",type:"black"},{x:2,y:0,name:"象",type:"black"},{x:3,y:0,name:"士",type:"black"},{x:8,y:0,name:"車",type:"black"},{x:7,y:0,name:"馬",type:"black"},{x:6,y:0,name:"象",type:"black"},{x:5,y:0,name:"士",type:"black"},{x:4,y:0,name:"將",type:"black"},{x:0,y:3,name:"卒",type:"black"},{x:2,y:3,name:"卒",type:"black"},{x:4,y:3,name:"卒",type:"black"},{x:6,y:3,name:"卒",type:"black"},{x:8,y:3,name:"卒",type:"black"},{x:1,y:2,name:"炮",type:"black"},{x:7,y:2,name:"炮",type:"black"},{x:0,y:9,name:"車",type:"red"},{x:1,y:9,name:"馬",type:"red"},{x:2,y:9,name:"相",type:"red"},{x:3,y:9,name:"仕",type:"red"},{x:8,y:9,name:"車",type:"red"},{x:7,y:9,name:"馬",type:"red"},{x:6,y:9,name:"相",type:"red"},{x:5,y:9,name:"仕",type:"red"},{x:4,y:9,name:"帥",type:"red"},{x:0,y:6,name:"兵",type:"red"},{x:2,y:6,name:"兵",type:"red"},{x:4,y:6,name:"兵",type:"red"},{x:6,y:6,name:"兵",type:"red"},{x:8,y:6,name:"兵",type:"red"},{x:1,y:7,name:"炮",type:"red"},{x:7,y:7,name:"炮",type:"red"}
];var board=new chessBoard();
board.flashChessBoard(pieces);

学了一晚上终于有点成绩啦，加油呀冰凌小可爱，嘻嘻嘻！

canvas绘制中国象棋棋盘相关推荐

JAVA中用程序绘制国际象棋与中国象棋棋盘
JAVA API 中的绘制图形类的paint()方法,我们可以轻松绘制中国象棋与国际象棋的棋盘.详见代码: 一.中国象棋棋盘代码 import java.awt.Font; import java.a ...
中国象棋棋盘java_java绘制国际象棋与中国象棋棋盘
JAVA API 中的绘制图形类的paint()方法,我们可以轻松绘制中国象棋与国际象棋的棋盘.详见代码: 一.中国象棋棋盘代码 import java.awt.Font; import java.a ...
用turtle画中国象棋棋盘
刚刚学习了<Python入门教程(一)--Python语言基础视频课程>(http://edu.51cto.com/course/12194.html) 中间有道作业就是用turtle画中 ...
html5的canvas实现中国象棋
html5的canvas实现中国象棋最近有了一个写中国象棋程序的想法,就根据canvas实现了一下.下面是最终效果: 首先,分析页面布局.主要的是有一个显示图像的区域,左下角是显示当前选中的棋子的& ...
如何用Python画一个中国象棋棋盘？
今天试着画了一个中国象棋棋盘! #绘制象棋盘 import turtle t=turtle.Pen() t.speed(100) def angle(x,y): t.penup() ...
matlab识别中国象棋棋盘,一种基于图像处理的中国象棋识别系统及方法与流程
本发明涉及计算机图像识别技术,具体涉及一种基于图像处理的中国象棋识别系统及方法. 背景技术: 数字图像处理技术在机器感知领域应用十分广泛,主要目标是通过一些图像处理技术从图像中提取信息,该信息类似于人 ...
canvas绘制中国国旗！
绘制中国国旗 1.题目今天刚学了H5中的画布canvas元素,课堂上的案例挺有意思,就心血来潮想利用canvas绘制中国国旗: 2.思路第一步,创建画布元素,在画布内作好辅助线和网格线来确定圆的位 ...
中国象棋程序的设计与实现(十)--棋盘的定义和绘制中国象棋程序的设计与实现(八)-如何构造一个棋子(車馬炮等) 中国象棋程序的设计与实现(九)–棋子点，棋子的小窝...
本篇简要介绍棋盘类的定义.棋盘的关键属性.棋盘绘制算法的骨架. 棋盘的详细绘制算法等内容,我们将在接下来的几篇进行详细介绍. 棋盘类的定义 public abstract class ChessBoa ...
java中国象棋棋盘放置棋子,JAVA简易文字版中国象棋
大二时制作的JAVA简易文字版中国象棋,现在放出,希望大家喜欢! // Java core packages import java.awt.*; import java.awt.event.*; / ...

canvas绘制中国象棋棋盘

棋盘

board.html

board.js

canvas绘制中国象棋棋盘相关推荐

最新文章

热门文章