矩形一直出现在context.clearRect();之后;
A Rectangle keeps appearing after context.clearRect();
我的.rect()
有问题。我已经使用.drawImage(canvas...)
创建了一个网格,每当我使用.stroke()
时,它就会再次出现。如何完全删除该矩形?
问候
工作jsFiddle
var canvas = document.getElementById('board');
var context = canvas.getContext('2d'),
wt = canvas.width,
ht = canvas.height;
canvas.onmousedown = function (e) {
e.preventDefault(); // disabling selecting
context.strokeStyle = "red";
context.lineWidth = 1;
context.rect(wt / 2 - 50, ht / 2 - 100, 100, 200);
context.fillText("<- why is it here? didn't '"clearRect()'" delete it?", 8, 8);
context.stroke();
};
function grid() {
var h = 2.5,
p = 2.5;
context.rect(0.5, 0.5, 5, 5);
context.strokeStyle = "#f0f0f0";
context.stroke(); // creating a 5x5 small rectangle in top left corner
for (i = 0; i < wt; i += p) {
p *= 2;
context.drawImage(canvas, p, 0); // replicating it horizontally...
}
for (i = 0; i < ht; i += h) {
h *= 2;
context.drawImage(canvas, 0, h); // ... and vertically
}
context.clearRect(0, 0, 5, 5); // here I am deleting that stroke, because I don't need it anymore
context.drawImage(canvas, 0, 55, 5.5, 5.5, 0, 0, 5.5, 5.5); // drawing it with drawImage();
}
grid();
clearRect
清除画布的一部分,而不是使用rect
绘制的路径的一部分。调用beginPath()
以清除在应用笔划时包含的前一个rect
。
请参阅此更新示例。
相关文章:
- jquery.proxy in the bootstrap-typeahead.js context
- 在画布外使用clearRect
- context.arc(x,y,r,S角度,E角度,逆时针);我可以在画布上做z方向的移动吗
- 使用 clearRect() 覆盖画布上的文本输出
- 为什么 context.restore() 不会将上下文的比例设置回 (1, 1)
- 如何从 $(this).context 获取输入值
- context参数在underscore.js中做什么
- Kinectjs在画布上鼠标向下位置的准确性和clearRect未按预期工作
- HTML5画布上下文没有't使用clearRect()清除
- 将上下文菜单(context.js)附加到cytoscape.js中的节点
- KineticJS clearRect equivalent
- Firefox-Javascript-window.event无法存活传递到context.apply()
- 错误:[$injector:模块rr] 与角度 JS [GULP CONTEXT]
- 在 requestAnimationFrame 中使用 clearRect 不会显示动画
- context.textAlign 不起作用
- JavaScript/jQuery context - proxy?
- 如何在javascript中使用context.executeQueryAsync委托时形成回调
- 矩形一直出现在context.clearRect();之后;
- HTML5 canvas中最简单的幻灯片显示,canvas.context. clearrect不能与setTimeou
- context.clearRect()真的那么昂贵吗?