今天写了一个canvas画图的象棋 。js基础不行，只画了个图，以后补充。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chess</title> <style> canvas{ display: block; margin:50px auto; border:1px solid #EAC591; border-radius: 20px; box-shadow:2px 2px 30px #080808; } </style> </head> <body> <canvas id="canvas" width="460" height="510"></canvas> <script> var chess = {} chess.init = function () { //获取上下文 var canvas = document.getElementById("canvas"); this.ctx = canvas.getContext("2d"); //初始化 this.padding= 30; //预留外边框的空隙 this.cell= 50; //棋盘空隙 this.chessRadius= 20; //棋子半径 this.fontSize= 36; //棋子文字大小 this.width=400; //棋盘的宽度 50*8 this.height= 450; //棋盘高度 50*9 this.offsetWidth = 460; this.offsetHeight = 510; this.array = [ ["车","马","相","士","将","士","相","马","车"], [" "," "," "," "," "," "," "," "," "], [" ","炮"," "," "," "," "," ","炮"," "], ["兵"," ","兵"," ","兵"," ","兵"," ","兵"], [" "," "," "," "," "," "," "," "," "], [" "," "," "," "," "," "," "," "," "], ["卒"," ","卒"," ","卒"," ","卒"," ","卒"], [" ","炮"," "," "," "," "," ","炮"," "], [" "," "," "," "," "," "," "," "," "], ["車","馬","象","仕","帅","仕","象","馬","車"] ] this.init_back(); this.init_piece(); this.addEvent(); } //棋盘初始化 chess.init_back =function () { var p = this.padding; var c = this.cell; var w = this.width; var h = this.height; var ow =this.offsetWidth; var oh = this.offsetHeight; this.drawBg(0,0,ow,oh); //画横线 for(var i=0;i<=9;i++){ this.drawLine(p,p+c*i,p+w,p+c*i) } //画上半部分竖线 for(var i =0;i<=8;i++){ this.drawLine(p+c*i,p,p+c*i,p+c*4) } //画下半部分竖线 for(var i =0;i<=8;i++){ this.drawLine(p+c*i,p +c*5,p+c*i,p+c*9) } //画上部分X this.drawLine(p+c*3,p,p+c*5,p+c*2); this.drawLine(p+c*5,p,p+c*3,p+c*2); //画下部分X this.drawLine(p+c*3,p+h,p+c*5,p+c*7); this.drawLine(p+c*5,p+h,p+c*3,p+c*7); //画#标记点 this.drawRound(p+c,p+c*2); this.drawRound(p+c*7,p+c*2); this.drawRound(p+c,p+c*7); this.drawRound(p+c*7,p+c*7); for(var i =0;i<=9;i++){ if(i%2!=1){ this.drawRound(p+c*i,p+c*3); this.drawRound(p+c*i,p+c*6); } } //画楚河汉界 this.drawText(p+c*2,p+c*4.5,"楚 河"); this.drawText(p+c*6,p+c*4.5,"汉 界"); } //棋子初始化 chess.init_piece = function () { var p =this.padding; var r = this.chessRadius; var c = this.cell; var a = this.array; for(var i =0;i<a.length;i++){ for(var j=0;j<a[i].length;j++){ if(a[i][j] !=" "){ var t = a[i][j]; this.drawPiece(p+c*j,p+c*i,r,t); } } } } //画背景 chess.drawBg =function (x,y,endX,endY) { this.ctx.beginPath(); this.ctx.fillStyle = "#f9f9f9"; this.ctx.rect(x,y,endX,endY); this.ctx.fill(); this.ctx.closePath(); } //画直线 chess.drawLine =function (x,y,endX,endY) { this.ctx.beginPath(); this.ctx.lineWidth = 2; this.ctx.strokeStyle = "#ff0000"; this.ctx.moveTo(x,y); this.ctx.lineTo(endX,endY); this.ctx.stroke(); this.ctx.closePath(); } //画标记点 chess.drawRound = function (x,y) { var w = this.width; var p = this.padding; this.ctx.beginPath(); this.ctx.lineWidth = 2; this.ctx.strokeStyle = "#ff0000"; if(x!=p){ //左上 this.ctx.moveTo(x-5,y-10); this.ctx.lineTo(x-5,y-5); this.ctx.lineTo(x-10,y-5); //左下 this.ctx.moveTo(x-5,y+10); this.ctx.lineTo(x-5,y+5); this.ctx.lineTo(x-10,y+5); } if(x!=p+w){ //右上 this.ctx.moveTo(x+5,y-10); this.ctx.lineTo(x+5,y-5); this.ctx.lineTo(x+10,y-5); //右下 this.ctx.moveTo(x+5,y+10); this.ctx.lineTo(x+5,y+5); this.ctx.lineTo(x+10,y+5); } this.ctx.stroke(); this.ctx.closePath(); } //写字 chess.drawText = function (x,y,name) { this.ctx.font="28px 隶书" this.ctx.fillStyle="#000"; this.ctx.textAlign="center"; this.ctx.textBaseline="middle"; this.ctx.fillText(name, x, y); } //画单个棋子 chess.drawPiece =function (x,y,r,t) { this.ctx.beginPath(); this.ctx.fillStyle = "#fff"; this.ctx.strokeStyle = "#ccc"; this.ctx.lineWidth =2; this.ctx.arc(x,y,r,0,Math.PI*2,true); this.ctx.fillText(t,x,y) this.ctx.closePath(); this.ctx.fill(); this.ctx.stroke(); chess.drawText(x,y,t); } //画棋子的选中状态 chess.onPiece = function (x,y,r,t) { this.ctx.beginPath(); this.ctx.strokeStyle ="#ff0000"; this.ctx.lineWidth =1; this.ctx.moveTo(x-8,y-23); this.ctx.lineTo(x-23,y-23); this.ctx.lineTo(x-23,y-8); this.ctx.moveTo(x+8,y-23); this.ctx.lineTo(x+23,y-23); this.ctx.lineTo(x+23,y-8); this.ctx.moveTo(x-8,y+23); this.ctx.lineTo(x-23,y+23); this.ctx.lineTo(x-23,y+8); this.ctx.moveTo(x+8,y+23); this.ctx.lineTo(x+23,y+23); this.ctx.lineTo(x+23,y+8); this.ctx.stroke(); this.ctx.closePath(); this.ctx.beginPath(); this.ctx.fillStyle = "#fff"; this.ctx.strokeStyle = "#ccc"; this.ctx.lineWidth =2; this.ctx.arc(x,y,r,0,Math.PI*2,true); this.ctx.shadowOffsetX = 1; // 阴影Y轴偏移 this.ctx.shadowOffsetY = 1; // 阴影X轴偏移 this.ctx.shadowBlur = 4; // 模糊尺寸 this.ctx.shadowColor = 'rgba(0, 0, 0, 1)'; // 颜色 this.ctx.fillText(t,x,y) this.ctx.closePath(); this.ctx.fill(); this.ctx.stroke(); chess.drawText(x,y,t); } //增加点击事件 chess.addEvent = function () { var _this = this; canvas.addEventListener("click",function (event) { var k = _this.getMousePos(event); console.log(Math.round(k.x)) }); } //获取鼠标点击坐标 chess.getMousePos = function(event) { var dx = canvas.getBoundingClientRect().left; var dy = canvas.getBoundingClientRect().top; var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; //alert('x: ' + x + '\ny: ' + y); return { 'x': x-dx, 'y': y-dy }; } chess.init(); </script> </body> </html>
