为了账号安全,请及时绑定邮箱和手机立即绑定
  • 方便不想打字的同学: 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 } }
    查看全部
    2 采集 收起 来源:落子实现

    2018-03-22

  • 方便一下不想打字的同学: 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(); }
    查看全部
    2 采集 收起 来源:画棋子

    2018-03-22

  • /*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(); } }
    查看全部
    1 采集 收起 来源:画棋盘

    2018-03-22

  • 棋盘画法通过<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 采集 收起 来源:案例总结

    2018-03-22

  • 笔记字数有限制,只好分段保存(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 采集 收起 来源:案例总结

    2018-03-22

  • (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 采集 收起 来源:案例总结

    2018-03-22

  • canvans
    查看全部
    1 采集 收起 来源:画棋子

    2016-08-16

  • strokeStyle 设置画笔颜色 stroke()方法,需要在moveTo和lineTo调用之后,显式调用一下,才能实际地绘制出来效果
    查看全部
    1 采集 收起 来源:画棋盘

    2016-05-19

  • canvas
    查看全部
    0 采集 收起 来源:页面结构搭建

    2016-05-06

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

    2016-04-26

  • 图片加载需要使用loade
    查看全部
    0 采集 收起 来源:画水印

    2016-04-26

  • 8888
    查看全部
    0 采集 收起 来源:课程介绍

    2016-04-13

  • sdafsd
    查看全部
    0 采集 收起 来源:课程介绍

    2016-04-13

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

    2016-04-12

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

    2016-04-12

首页上一页123456下一页尾页

举报

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

微信扫码,参与3人拼团

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

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