當前位置：
首頁 >
canvas象棋 画图
發布時間：2025/3/15
37
豆豆
生活随笔
收集整理的這篇文章主要介紹了
canvas象棋 画图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
canvas象棋 畫圖
今天寫了一個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*8this.height= 450; //棋盤高度 50*9this.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)}//畫上部分Xthis.drawLine(p+c*3,p,p+c*5,p+c*2);this.drawLine(p+c*5,p,p+c*3,p+c*2);//畫下部分Xthis.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>?
posted on 2017-02-19 22:40 Viven張 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/vivenZ/p/6417642.html
總結
以上是生活随笔為你收集整理的canvas象棋 画图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java--GC Root有哪些
- 下一篇： windbg 常用查看锁以及互斥量