Javascript clearRect不';不要删除最后一行
我画了两幅图。一个说“1x10”,另一个说“10x10”。基本上,当用户点击图片时,我只画一个被9条垂直线分割的正方形,或者同样的正方形被9条水平线和9条垂直线分割。代码如下:Javascript clearRect不';不要删除最后一行,javascript,html5-canvas,drawing,Javascript,Html5 Canvas,Drawing,我画了两幅图。一个说“1x10”,另一个说“10x10”。基本上,当用户点击图片时,我只画一个被9条垂直线分割的正方形,或者同样的正方形被9条水平线和9条垂直线分割。代码如下: canvas.addEventListener('click',ProcessClick,false); function ProcessClick(toi){ var posx = toi.layerX; var posy = toi.layerY; if(toi.layerX == undef
canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(toi){
var posx = toi.layerX;
var posy = toi.layerY;
if(toi.layerX == undefined || toi.layerY == undefined){
posx = toi.offsetX;
posy = toi.offsetY;
}
if(posx>170 && posx<320 && posy>320 && posy<370){
rect1x10();
}
if(posx>470 && posx<620 && posy>320 && posy<370){
rect10x10();
}
}//ProcessClick
rect1x10 = function(){
ctx.strokeStyle = "blue";
ctx.fillStyle = "white";
ctx.clearRect(200, 375, 355, 325);
ctx.rect(240, 390, 300, 300);
ctx.fill();
ctx.lineWidth = 2;
ctx.stroke();
ctx.lineWidth = 1;
var lineX = 270.5;
for (i = 0; i <= 8; i++){
ctx.beginPath();
ctx.moveTo(lineX, 390);
ctx.lineTo(lineX, 690);
ctx.stroke();
lineX += 30;
}
}//rect1x10
rect10x10 = function(){
ctx.strokeStyle = "blue";
ctx.fillStyle = "white";
ctx.clearRect(200, 375, 355, 325);
ctx.rect(240, 390, 300, 300);
ctx.fill();
ctx.lineWidth = 2;
ctx.stroke();
ctx.lineWidth = 1;
var lineX = 270.5;
for (i = 0; i <= 8; i++){
ctx.beginPath();
ctx.moveTo(lineX, 390);
ctx.lineTo(lineX, 690);
ctx.stroke();
lineX += 30;
}
var lineY = 420.5;
for (i = 0; i <= 8; i++){
ctx.beginPath();
ctx.moveTo(240, lineY);
ctx.lineTo(540, lineY);
ctx.stroke();
lineY += 30;
}
}//rect10x10
canvas.addEventListener('click',ProcessClick,false);
函数进程单击(toi){
var posx=toi.layerX;
var posy=toi.layerY;
if(toi.layerX==未定义| | toi.layerY==未定义){
posx=toi.offsetX;
posy=toi.offsetY;
}
如果(posx>170&&posx320&&posy470&&posx320&&posy当你划过矩形时,你会得到一条路径的剩余部分
调用ctx.beginPath();
后再调用rect
或者,也可以跳过所有这些,使用strokeRect
ctx.beginPath();
ctx.rect(240, 390, 300, 300);
ctx.lineWidth = 2;
ctx.stroke();
ctx.lineWidth = 1;
或
谢谢!因为我需要矩形有一个白色背景,所以我把ctx.beginPath()放在rect之前。现在一切都正常了。
ctx.clearRect(200, 375, 355, 325);
ctx.lineWidth = 2;
ctx.strokeRect(240, 390, 300, 300);
ctx.lineWidth = 1;