HTML5画布(绘图(矩形)不断消失)
HTML5 Canvas (Drawing (Rectangle) Keeps Disappearing)
怎么样?
最近,在这个网站的帮助下,我学会了如何通过单击按钮在 HTML5 画布上绘制一个矩形......这不是问题:)这是问题...不幸的是,每次我单击画布以创建新矩形时,旧矩形都会消失(或立即删除)。当我尝试在我的 iPod 上使用它时,它也根本不起作用......为什么:(?
这是我的代码:
JAVASCRIPT:
// "Rectangle" Button
function rect()
{
var canvas = document.getElementById('canvasSignature'),
ctx = canvas.getContext('2d'),
rect = {},
drag = false;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}
function mouseUp() {
drag = false;
}
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY ;
ctx.clearRect(0,0,canvas.width,canvas.height);
draw();
}
}
function draw() {
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();
}
HTML5:
<div id="canvasDiv">
<canvas id="canvasSignature" width="580px" height="788px" style="border:2px solid #000; background: #FFF;"></canvas>
</div>
<div id="rect">
<p><button onclick="rect();">Rectangle</button></p>
</div>
任何帮助将不胜感激:)
您有一个声明要清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
相关文章:
- facebook”;添加评论“;popup获胜'不要消失
- 为什么js事件消失了
- JS文件的路径正在消失
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- HTML画布在绘图后立即擦除矩形
- Morris.js折线图x轴标签在调整大小后消失
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- JavaScript下拉菜单-部件在Mac上消失
- 画布中绘制的矩形区域的弹出工具提示
- 将display属性更改为visible flicks,然后再次消失
- Fabric.js-更改矩形填充
- TinyMCE实例在切换角度路由选项时会消失
- 将phonegap图像发布到php/mysql-图像字段从发布请求中消失
- Jquery UI对话框不会消失
- 通过单击同一图标使菜单出现和消失
- '单击'事件在Backbone中消失.使用流沙后查看
- 鼠标点击HTML5画布绘制矩形
- HTML5画布(绘图(矩形)不断消失)
- 小叶矩形立即消失