Question

我可以使用以下代码绘制带圆角的矩形。我正在寻找的是我想将其形成为一个动画 - 从一个点开始并画出在开始点结束的线。（比如用铅笔画）任何想法？

ctx.beginPath(); 
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius); 

  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);  
  ctx.lineTo(x+width-radius,y+height);  
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);  
  ctx.lineTo(x+width,y+radius);  
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);  
  ctx.lineTo(x+radius,y);  
  ctx.quadraticCurveTo(x,y,x,y+radius);  
  ctx.stroke();

Answer 1

画布是双缓冲的。您需要使用setTimeout()推迟动画的每个步骤，以使画布有机会绘制您的更改。更新：请requestAnimationFrame替代setTimeout()。

我为您创建了一个示例，通过调用上下文方法并暂停来绘制每个矩形的段。我想我知道你正在寻找的特定动画，这不是它，但希望它能给你一个良好的开端。

下面的代码和演示在这里：http://jsfiddle.net/q8GcR/

function animateRoundRect(ctx, x, y, width, height, radius, delay) {
    commands = [
        ['moveTo', x,y+radius],
        ['lineTo', x,y+height-radius], 
        ['quadraticCurveTo', x,y+height,x+radius,y+height],  
        ['lineTo', x+width-radius,y+height],  
        ['quadraticCurveTo', x+width,y+height,x+width,y+height-radius],  
        ['lineTo', x+width,y+radius],  
        ['quadraticCurveTo', x+width,y,x+width-radius,y],  
        ['lineTo', x+radius,y],  
        ['quadraticCurveTo', x,y,x,y+radius]
    ];  

    function draw() {
        var args = commands.shift();
        var method = args.shift();
        ctx[method].apply(ctx, args);
        ctx.stroke();
        if (commands.length) {
            setTimeout(draw, delay);
        }
    }

    ctx.beginPath();
    draw();
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 3;
ctx.strokeStyle = '#f00';
animateRoundRect(ctx, 20, 20, 250, 100, 10, 500);

Answer 2

一些缺点如 - 轮廓粗糙，代码可能没有达到标记，最后一个清除使画布变得白色。有人可以增强这段代码吗？请运行firefox或chrome中的代码。

代码：http://jsfiddle.net/XnzhQ/1/

HTML5：将圆角矩形绘制为动画

2 个答案: