-
方便不想打字的同学: var chessBoard = []; var me = true; for (var i = 0; i < 15; i++) { chessBoard[i] = []; for (var j = 0; j < 15; j++) { chessBoard[i][j] = 0; } } chess.onclick = function(e) { var x = e.offsetX; var y = e.offsetY; var i = Math.floor(x / 30); var j = Math.floor(y / 30); if (chessBoard[i][j] == 0) { onestep(i, j, me); if(me){ chessBoard[i][j] = 1; } else { chessBoard[i][j] = 2; } me = !me } }查看全部
-
方便一下不想打字的同学: var onestep = function(i, j, me) { ctx.beginPath(); ctx.arc(15 + i*30, 15 + j*30, 13, 0, 2 * Math.PI); ctx.closePath(); var gradient = ctx.createRadialGradient(15 + i*30 + 2, 15 + j*30 - 2, 13, 15 + i*30 + 2, 15 + j*30 - 2, 0); if(me) { gradient.addColorStop(0,"#0a0a0a"); gradient.addColorStop(1,"#636766"); } else { gradient.addColorStop(0,"#d1d1d1"); gradient.addColorStop(1,"#f9f9f9"); } ctx.fillStyle = gradient; ctx.fill(); }查看全部
-
/*js代码*/ window.onload = function () { var chess=document.getElementById('chess'); var context=chess.getContext('2d'); context.strokeStyle="#BFBFBF"; for(var i=0; i<15; i++){ context.moveTo(15+i*30,15); context.lineTo(15+i*30,430); context.stroke(); context.moveTo(15,15+i*30); context.lineTo(435,15+i*30); context.stroke(); } }查看全部
-
棋盘画法通过<canvas>画网格, 画一条横线:js代码: #id.lineTo(0,200);#id.moveTo(200,200);#id.stroke(); 两点确定一条线段。 网格通过for循环实现。 线的颜色:#id.strokeStyle="#bfbfbf"; 棋子是通过canvas画圆实现: #id.beginPath(); #id.arc(0,0,13,0,2*Math.PI); #id.closePath();查看全部
-
笔记字数有限制,只好分段保存(UI篇第一段) var chessBoard=[]; var me=true; for(var i=0;i<15;i++){ chessBoard[i]=[]; for(var j=0;j<15;j++){ chessBoard[i][j]=0; } } var chess=document.getElementById('chess'); var context=chess.getContext('2d'); context.strokeStyle="#BFBFBF"; //加水印 var logo=new Image(); logo.src='img/lg.jpg'; logo.onload=function (){ context.drawImage(logo,0,0,450,450); drawchessBoard(); // oneStep(0,0,true) // oneStep(1,1,false) }查看全部
-
(UI篇第二段) //画棋盘 var drawchessBoard=function(){ for(var i=0;i<15;i++){ context.moveTo(15+i*30,15); context.lineTo(15+i*30,435); context.stroke(); context.moveTo(15,15+i*30); context.lineTo(435,15+i*30); context.stroke(); } } var oneStep=function(i,j,me){ context.beginPath(); context.arc(15+i*30,15+j*30,13,0,2*Math.PI); context.closePath(); var gradient=context.createRadialGradient(15+i*30,15+j*30,15,15+i*30,15+j*30,0); if(me){ gradient.addColorStop(0,'#0A0A0A'); gradient.addColorStop(1,'#636766'); }else{ gradient.addColorStop(0,'#D1D1D1'); gradient.addColorStop(1,'#F9F9F9'); } context.fillStyle=gradient; context.fill();//填充图形 } chess.onclick = function(e){ //通过鼠标点击坐标确定落子坐标 var x=e.offsetX; var y=e.offsetY; i=Math.floor(x/30); j=Math.floor(y/30); //判断落子的位置是否已经落子 if(chessBoard[i][j]==0){ oneStep(i,j,me); //记录落下子的颜色 if(me){ chessBoard[i][j]=1; }else{ chessBoard[i][j]=2; } //轮流下棋 落下一种颜色棋子后换一种颜色 me=!me; } }查看全部
-
canvans查看全部
-
strokeStyle 设置画笔颜色 stroke()方法,需要在moveTo和lineTo调用之后,显式调用一下,才能实际地绘制出来效果查看全部
-
canvas查看全部
-
stroke 描边 fill 填充查看全部
-
图片加载需要使用loade查看全部
-
8888查看全部
-
sdafsd查看全部
-
画棋子儿查看全部
-
画棋子儿查看全部
举报
0/150
提交
取消