-
棋盤(pán)畫(huà)法通過(guò)<canvas>畫(huà)網(wǎng)格， 畫(huà)一條橫線(xiàn)：js代碼： #id.lineTo(0,200);#id.moveTo(200,200);#id.stroke(); 兩點(diǎn)確定一條線(xiàn)段。 網(wǎng)格通過(guò)for循環(huán)實(shí)現(xiàn)。 線(xiàn)的顏色：#id.strokeStyle="#bfbfbf"; 棋子是通過(guò)canvas畫(huà)圓實(shí)現(xiàn)： #id.beginPath(); #id.arc(0,0,13,0,2*Math.PI); #id.closePath();查看全部
-
筆記字?jǐn)?shù)有限制，只好分段保存（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篇第二段） //畫(huà)棋盤(pán) 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){ //通過(guò)鼠標(biāo)點(diǎn)擊坐標(biāo)確定落子坐標(biāo) var x=e.offsetX; var y=e.offsetY; i=Math.floor(x/30); j=Math.floor(y/30); //判斷落子的位置是否已經(jīng)落子 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) { context.beginPath(); context.arc(15 + i*30, 15 + j*30, 13, 0, 2 * Math.PI); context.closePath(); var gradient = context.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"); } context.fillStyle = gradient; context.fill(); }查看全部
-
可以查看全部
-
明文查看全部
-
canvans查看全部
-
這個(gè)界面使用什么快捷鍵出現(xiàn)的呀？查看全部
-
不錯(cuò)，要自己學(xué)習(xí)查看全部
-
五子棋ui篇查看全部
-
stroke 描邊查看全部
-
內(nèi)容不錯(cuò)，學(xué)到了東西查看全部
-
strokeStyle 設(shè)置畫(huà)筆顏色 stroke()方法，需要在moveTo和lineTo調(diào)用之后，顯式調(diào)用一下，才能實(shí)際地繪制出來(lái)效果查看全部
-
box-shadow設(shè)置控件下的陰影效果，支持多個(gè)參數(shù)，參數(shù)間以逗號(hào)分隔，負(fù)值表示向反方向移動(dòng)；正x和正y表示向右向下移動(dòng)陰影；-5px -5px 5px #efefef 表示向左，向上移動(dòng)，blur5個(gè)px，顏色是efefef查看全部
-
//畫(huà)棋子 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+2,15+i*30-2,13,15+i*30+2,15+i*30-2,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; 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; } }查看全部
舉報(bào)
0/150
提交
取消