为了账号安全,请及时绑定邮箱和手机立即绑定
  • 五子棋ui篇
    查看全部
    0 采集 收起 来源:案例总结

    2016-07-22

  • stroke 描边
    查看全部
    0 采集 收起 来源:画棋子

    2016-07-09

  • 内容不错,学到了东西
    查看全部
    0 采集 收起 来源:案例总结

    2016-05-19

  • box-shadow设置控件下的阴影效果,支持多个参数,参数间以逗号分隔,负值表示向反方向移动;正x和正y表示向右向下移动阴影;-5px -5px 5px #efefef 表示向左,向上移动,blur5个px,颜色是efefef
    查看全部
    0 采集 收起 来源:页面结构搭建

    2016-05-18

  • //画棋子 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; } }
    查看全部
    0 采集 收起 来源:案例总结

    2018-03-22

  • 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="images/logo.png"; logo.onload=function(){ context.drawImage(logo,0,0,450,450); drawChessBoard(); //oneStep(0,0,true); //oneStep(1,1,false); } //画棋盘 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(); }  }
    查看全部
    0 采集 收起 来源:案例总结

    2018-03-22

首页上一页123456下一页尾页

举报

0/150
提交
取消
课程须知
本课程是前端中级课程 1、JS基础知识 2、Canvas基础知识
老师告诉你能学到什么?
1、canvas绘制五子棋棋盘 2、canvas绘制黑白棋子 3、五子棋交互逻辑处理

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!