如何在带按钮的画布上绘制正方形

我知道如何绘制正方形，但我怎样才能使它只在我点击“绘制正方形”按钮时绘制？另外，我知道要制作一个按钮（<p><button onclick="rect();">Rectangle</button></p>），但是如何将其链接到JavaScript？任何帮助都将不胜感激......如何在带按钮的画布上绘制正方形

HTML5：

<canvas id="canvas" width="500" height="500"></canvas>

JAVASCRIPT：

<script type="text/javascript"> 
var canvas = document.getElementById('canvas'), 
    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(); 
</script>

来源

2012-06-03 Wardenclyffe

嗯，你实际上已经联系您按钮指定其'onclick'属性的JavaScript函数。

现在你只需要添加一个rect()函数给你的js，它将绘制一个矩形。

来源

2012-06-03 22:23:55 YemSalat

请...你能告诉我该怎么做:)？我只是添加.........函数rect（） {**代码上面**}这就是我所做的，它仍然不工作:( – Wardenclyffe

好吧，它的作品！我做了rect你说，现在我可以通过点击按钮绘制一个矩形:)不幸的是，仍然存在问题。每当我点击画布创建一个新的矩形（或者只是做其他事情），旧的矩形就会消失。当我尝试在我的iPod上使用它时，它也不起作用...为什么？ – Wardenclyffe

如何在带按钮的画布上绘制正方形

回答

相关问题