canvas画圆清除圆html,javascript,html5_js 用canvas 画圆清除问题？，javascript,html5 - phpStudy...

js 用canvas 画圆清除问题？

我在用js写一个五子棋游戏，利用canvas画棋盘和棋子，为了实现悔棋功能，我用clearRect()清除了原来的棋子，再重新画被清除的部分棋盘，却总是出现了一个圆，请大神帮帮忙，谢谢！

Chess by sheepbao

结束游戏

悔棋

var cell, half_cell;

var chess = document.getElementById('chess');

var context = chess.getContext('2d');

var undo = document.getElementById('undo');

function layout() {

var avaih = window.innerHeight,

avaiw = window.innerWidth;

var min = Math.min(avaih, avaiw);

/* chess.style.width = (min - 5) + 'px';

chess.style.height = (min - 5) + 'px';*/

var w = min - 5;

chess.width = w;

chess.height = w;

cell = Math.floor(w / 15);

half_cell = cell / 2;

console.log(w, cell, half_cell);

// context.strokeStyle = "#BFBFBF";

for (var i = 0; i < 15; i++) {

context.moveTo(half_cell, half_cell + (cell * i));

context.lineTo(w - half_cell, half_cell + (cell * i));

context.moveTo(half_cell + cell * i, half_cell);

context.lineTo(half_cell + cell * i, w - half_cell);

context.stroke();

}

}

layout();

//chesspiece

var oneStep = function(x, y, black) {

console.log("oneStep", x, y, black);

context.beginPath();

context.arc(half_cell + cell * x, half_cell + cell * y, half_cell * 0.8, 0, 2 * Math.PI);

context.closePath();

var gradient = context.createRadialGradient(half_cell + cell * x + 2, half_cell + cell * y - 2, 13, half_cell + cell * x + 2, half_cell + cell * y - 2, 0);

if (black) {

//black

gradient.addColorStop(0, "#0A0A0A");

gradient.addColorStop(1, "#636766");

} else {

gradient.addColorStop(0, "#D1D1D1");

gradient.addColorStop(1, "#F9F9F9");

}

context.fillStyle = gradient;

context.fill();

context.stroke();

}

function undoStep(x, y) {

console.log(chess.width, chess.height);

context.clearRect((x + 0.1) * cell, (y + 0.1) * cell, 0.8 * cell, 0.8 * cell);

console.log("undoStep:", x, y,

"rect:", (x + 0.1) * cell, (y + 0.1) * cell, 0.8 * cell, 0.8 * cell);

// context.globalCompositeOperation = "source-over";

context.moveTo(cell * (x + 0.1), (0.5 + y) * cell);

context.lineTo(cell * (x + 0.9), (0.5 + y) * cell);

context.moveTo((0.5 + x) * cell, cell * (y + 0.1));

context.lineTo((0.5 + x) * cell, cell * (y + 0.9));

context.stroke();

}

chess.onclick = function(e) {

var x = e.offsetX;

var y = e.offsetY;

meX = Math.floor(x / cell);

meY = Math.floor(y / cell);

console.log("click:", meX, meY);

oneStep(meX, meY, true);

}

undo.onclick = function(e) {

undoStep(meX, meY);

}

相关阅读:

使用fstab挂载一块外置的tf卡.重启后无法显示,但是使用mount却能挂载

angularjs http请求问题

关于js引用类型赋值的问题

【求助】python 遇到采集、正则问题，一直获取不到内容！

gulp和webpack结合使用如何分工？

嵌入app的h5与普通的h5有何不同？

无法打开包括文件nan.h

javascript 获取DOM节点的困惑，谢谢大神详解

Django Template Error : Could not parse the remainder

直播贴的后台设计架构！

if (function f(){})中function f(){}为何会是true?

用 vagrant 安装laravel/homestead 按照官网的步骤一步步来的，启动的时候出现问题

通过myeclipse启动tomcat的话，在catalina中设置的参数就不起作用？

scrapy写爬虫 却返回不出东西

有哪些大型网站的移动端架构采用zepto?

PHP长时间运行的守护脚本内存溢出，来大神分析一下。

php的一个正则

IE 跨域 Cookie 失效怎么处理？

用section标签后，input会失效是什么原因

源码编译apache2.4.23无法启用selinux保护