-
- 慕侠5154442 2017-10-22
- 象棋游戏
- 0赞 · 0采集
-
- qq_歲月抹去塵封的記憶_0 2017-08-22
- 绘制水印
-
截图0赞 · 0采集
-
- qq_F_71 2017-06-08
- 五子棋大战
- 0赞 · 0采集
-
- moocer9527 2017-05-20
- 画棋子
-
截图0赞 · 0采集
-
- moocer9527 2017-05-20
- 棋盘js
-
截图0赞 · 0采集
-
- carol67351 2017-05-03
- 棋盘 水印
-
截图0赞 · 0采集
-
- carol67351 2017-05-03
- css box-shadow
-
截图0赞 · 0采集
-
- carol67351 2017-05-03
- index.html
-
截图0赞 · 0采集
-
- 慕粉1719051094 2017-04-12
- <canvas>标签需要在标签内设置宽高，不然绘制出的图形可能会变形
- 0赞 · 0采集
-
- 贝克汉姆的23号 2017-04-10
- gradient在尺寸内渐变
-
截图0赞 · 1采集
-
- 贝克汉姆的23号 2017-04-10
- beginpath开始一段路径
-
截图0赞 · 0采集
-
- 贝克汉姆的23号 2017-04-10
- enterframe是进入帧的意思
- 0赞 · 0采集
-
- Peggy7 2017-03-22
- 电脑会默认先绘制线条，后绘制图片。
- 0赞 · 0采集
-
- qq_相摸盲人_0 2017-03-05
- 下棋绑定
-
截图0赞 · 1采集
-
- qq_相摸盲人_0 2017-03-05
- 画棋子
-
截图0赞 · 0采集
-
- qq_相摸盲人_0 2017-03-05
- 间距15，共15条线，每格30像素
-
截图0赞 · 0采集
-
- qq_相摸盲人_0 2017-03-05
- 阴影效果
-
截图0赞 · 0采集
-
- 豆腐脑不放糖 2017-03-03
- 为了将点用的图片延迟之后显示出来使用，调用图片返回的函数image.onload=function()
- 0赞 · 0采集
-
- 慕粉1057417189 2017-02-27
- 五子棋（UI）
- 0赞 · 0采集
-
- Delivw 2016-12-14
- 绘制水印
-
截图0赞 · 1采集
-
- 叶来香 2016-12-08
- 看
-
截图0赞 · 0采集
-
- 卡奇 2016-11-04
- 画棋子函数
-
截图0赞 · 0采集
-
- 空白小弟 2016-10-19
- 棋盘画法通过<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();
- 1赞 · 1采集
-
- 无所畏惧小小小 2016-10-10
- 笔记字数有限制，只好分段保存（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) }
- 1赞 · 1采集
-
- 无所畏惧小小小 2016-10-10
- （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; } }
- 1赞 · 1采集
-
- 九万里风0 2016-10-05
- 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(); }
- 0赞 · 0采集
-
- 慕粉1471596266 2016-09-10
- 可以
- 0赞 · 0采集
-
- weixin_慕圣524561 2016-08-24
- 明文
-
截图0赞 · 0采集
-
- qq_该用户无昵称_0 2016-08-16
- canvans
-
截图1赞 · 1采集
-
- 慕神7509951 2016-08-13
- 这个界面使用什么快捷键出现的呀？
-
截图0赞 · 0采集
数据加载中...
开始学习
免费