如何在Canvas中製作藥丸形狀？ （基本上是圓角矩形）

Question

玩一個突破克隆，並希望做出圓角的通電。

有人能指出我正確的方向嗎？

謝謝！

Answer 1

你可以做什麼的顯示on this article by Juan Mendes：

HTML：

<canvas id="rounded-rect" width="600" height="600"> 
    <!-- Insert fallback content here --> 
</canvas>​ 

的JavaScript：

CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) { 
    if (typeof stroke == "undefined") { 
     stroke = true; 
    } 
    if (typeof radius === "undefined") { 
     radius = 5; 
    } 
    this.beginPath(); 
    this.moveTo(x + radius, y); 
    this.lineTo(x + width - radius, y); 
    this.quadraticCurveTo(x + width, y, x + width, y + radius); 
    this.lineTo(x + width, y + height - radius); 
    this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); 
    this.lineTo(x + radius, y + height); 
    this.quadraticCurveTo(x, y + height, x, y + height - radius); 
    this.lineTo(x, y + radius); 
    this.quadraticCurveTo(x, y, x + radius, y); 
    this.closePath(); 
    if (stroke) { 
     this.stroke(stroke); 
    } 
    if (fill) { 
     this.fill(fill); 
    } 
}; 

// Now you can just call 
var ctx = document.getElementById("rounded-rect").getContext("2d"); 
// Manipulate it again 
ctx.strokeStyle = "#2d6"; 
ctx.fillStyle = "#abc"; 
ctx.roundRect(100, 200, 200, 100, 50, true); 

正如你可以在此JsFiddle

Answer 2

一個簡單的方法就是用看quadraticCurveTo平滑角落

function roundRect(x0, y0, x1, y1, r, color) 
{ 
    var w = x1 - x0; 
    var h = y1 - y0; 
    if (r > w/2) r = w/2; 
    if (r > h/2) r = h/2; 
    ctx.beginPath(); 
    ctx.moveTo(x1 - r, y0); 
    ctx.quadraticCurveTo(x1, y0, x1, y0 + r); 
    ctx.lineTo(x1, y1-r); 
    ctx.quadraticCurveTo(x1, y1, x1 - r, y1); 
    ctx.lineTo(x0 + r, y1); 
    ctx.quadraticCurveTo(x0, y1, x0, y1 - r); 
    ctx.lineTo(x0, y0 + r); 
    ctx.quadraticCurveTo(x0, y0, x0 + r, y0); 
    ctx.closePath(); 
    ctx.fillStyle = color; 
    ctx.fill(); 
}