blocks|key|1267126|text|HTML5画布不提供绘制圆角矩形的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267127|使用lineTo()和arc()方法怎么样？|offset|length|style|CODE|1267128|您还可以使用quadraticCurveTo()方法而不是arc()方法。|1267129|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo|1|https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc|2|https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo|3^0|0|2|8|B|5|2|8|0|B|5|1|0|6|I|T|5|6|I|2|T|5|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@$D|12|E|13|1|14]|$D|15|E|16|1|17]]|A|$]]|$1|H|3|I|5|6|7|18|8|@$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]]|9|@$D|1D|E|1E|1|1F]|$D|1G|E|1H|1|1I]]|A|$]]|$1|J|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]|T|$5|M|N|O|A|$P|U]]|V|$5|M|N|O|A|$P|S]]]]

<p>The HTML5 canvas doesn't provide a method to draw a rectangle with rounded corners.</p>

<p>How about using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo" rel="noreferrer"><code>lineTo()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc" rel="noreferrer"><code>arc()</code></a> methods?</p>

<p>You can also use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo" rel="noreferrer"><code>quadraticCurveTo()</code></a> method instead of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc" rel="noreferrer"><code>arc()</code></a> method.</p>


blocks|key|1481817|text|这是我写的..。使用圆弧而不是二次曲线来更好地控制半径。而且，它把划水和填塞留给了你|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481818|++++/*+Canvas+2d+context+-+roundRect
+*
+*+Accepts+5+parameters,+the+start_x+and+start_y+points,+the+end_x+and+end_y+points,+and+the+radius+of+the+corners
+*+
+*+No+return+value
+*/

CanvasRenderingContext2D.prototype.roundRect+=+function(sx,sy,ex,ey,r)+{
++++var+r2d+=+Math.PI/180;
++++if(+(+ex+-+sx+)+-+(+2+*+r+)+<+0+)+{+r+=+(+(+ex+-+sx+)+/+2+);+}+//ensure+that+the+radius+isn't+too+large+for+x
++++if(+(+ey+-+sy+)+-+(+2+*+r+)+<+0+)+{+r+=+(+(+ey+-+sy+)+/+2+);+}+//ensure+that+the+radius+isn't+too+large+for+y
++++this.beginPath();
++++this.moveTo(sx%2Br,sy);
++++this.lineTo(ex-r,sy);
++++this.arc(ex-r,sy%2Br,r,r2d*270,r2d*360,false);
++++this.lineTo(ex,ey-r);
++++this.arc(ex-r,ey-r,r,r2d*0,r2d*90,false);
++++this.lineTo(sx%2Br,ey);
++++this.arc(sx%2Br,ey-r,r,r2d*90,r2d*180,false);
++++this.lineTo(sx,sy%2Br);
++++this.arc(sx%2Br,sy%2Br,r,r2d*180,r2d*270,false);
++++this.closePath();
}|code-block|syntax|javascript|1481819|下面是一个示例：|1481820|var+_e+=+document.getElementById('#my_canvas');
var+_cxt+=+_e.getContext("2d");
_cxt.roundRect(35,10,260,120,20);
_cxt.strokeStyle+=+"#000";
_cxt.stroke();|1481821|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Here's one I wrote... uses arcs instead of quadratic curves for better control over radius. Also, it leaves the stroking and filling up to you</p>

<pre><code>    /* Canvas 2d context - roundRect
 *
 * Accepts 5 parameters, the start_x and start_y points, the end_x and end_y points, and the radius of the corners
 * 
 * No return value
 */

CanvasRenderingContext2D.prototype.roundRect = function(sx,sy,ex,ey,r) {
    var r2d = Math.PI/180;
    if( ( ex - sx ) - ( 2 * r ) &lt; 0 ) { r = ( ( ex - sx ) / 2 ); } //ensure that the radius isn't too large for x
    if( ( ey - sy ) - ( 2 * r ) &lt; 0 ) { r = ( ( ey - sy ) / 2 ); } //ensure that the radius isn't too large for y
    this.beginPath();
    this.moveTo(sx+r,sy);
    this.lineTo(ex-r,sy);
    this.arc(ex-r,sy+r,r,r2d*270,r2d*360,false);
    this.lineTo(ex,ey-r);
    this.arc(ex-r,ey-r,r,r2d*0,r2d*90,false);
    this.lineTo(sx+r,ey);
    this.arc(sx+r,ey-r,r,r2d*90,r2d*180,false);
    this.lineTo(sx,sy+r);
    this.arc(sx+r,sy+r,r,r2d*180,r2d*270,false);
    this.closePath();
}
</code></pre>

<p>Here is an example:</p>

<pre><code>var _e = document.getElementById('#my_canvas');
var _cxt = _e.getContext("2d");
_cxt.roundRect(35,10,260,120,20);
_cxt.strokeStyle = "#000";
_cxt.stroke();
</code></pre>


blocks|key|1267246|text|Juan，我对你的方法做了一点改进，允许单独改变每个矩形的圆角半径：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267247|/**+
+*+Draws+a+rounded+rectangle+using+the+current+state+of+the+canvas.++
+*+If+you+omit+the+last+three+params,+it+will+draw+a+rectangle++
+*+outline+with+a+5+pixel+border+radius++
+*+@param+{Number}+x+The+top+left+x+coordinate+
+*+@param+{Number}+y+The+top+left+y+coordinate++
+*+@param+{Number}+width+The+width+of+the+rectangle++
+*+@param+{Number}+height+The+height+of+the+rectangle+
+*+@param+{Object}+radius+All+corner+radii.+Defaults+to+0,0,0,0;+
+*+@param+{Boolean}+fill+Whether+to+fill+the+rectangle.+Defaults+to+false.+
+*+@param+{Boolean}+stroke+Whether+to+stroke+the+rectangle.+Defaults+to+true.+
+*/
CanvasRenderingContext2D.prototype.roundRect+=+function+(x,+y,+width,+height,+radius,+fill,+stroke)+{
++++var+cornerRadius+=+{+upperLeft:+0,+upperRight:+0,+lowerLeft:+0,+lowerRight:+0+};
++++if+(typeof+stroke+==+"undefined")+{
++++++++stroke+=+true;
++++}
++++if+(typeof+radius+===+"object")+{
++++++++for+(var+side+in+radius)+{
++++++++++++cornerRadius[side]+=+radius[side];
++++++++}
++++}

++++this.beginPath();
++++this.moveTo(x+%2B+cornerRadius.upperLeft,+y);
++++this.lineTo(x+%2B+width+-+cornerRadius.upperRight,+y);
++++this.quadraticCurveTo(x+%2B+width,+y,+x+%2B+width,+y+%2B+cornerRadius.upperRight);
++++this.lineTo(x+%2B+width,+y+%2B+height+-+cornerRadius.lowerRight);
++++this.quadraticCurveTo(x+%2B+width,+y+%2B+height,+x+%2B+width+-+cornerRadius.lowerRight,+y+%2B+height);
++++this.lineTo(x+%2B+cornerRadius.lowerLeft,+y+%2B+height);
++++this.quadraticCurveTo(x,+y+%2B+height,+x,+y+%2B+height+-+cornerRadius.lowerLeft);
++++this.lineTo(x,+y+%2B+cornerRadius.upperLeft);
++++this.quadraticCurveTo(x,+y,+x+%2B+cornerRadius.upperLeft,+y);
++++this.closePath();
++++if+(stroke)+{
++++++++this.stroke();
++++}
++++if+(fill)+{
++++++++this.fill();
++++}
}+|code-block|syntax|javascript|1267248|像这样使用它：|1267249|var+canvas+=+document.getElementById("canvas");
var+c+=+canvas.getContext("2d");
c.fillStyle+=+"blue";
c.roundRect(50,+100,+50,+100,+{upperLeft:10,upperRight:10},+true,+true);|1267250|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Juan, I made a slight improvement to your method to allow for changing each rectangle corner radius individually:</p>

<pre><code>/** 
 * Draws a rounded rectangle using the current state of the canvas.  
 * If you omit the last three params, it will draw a rectangle  
 * outline with a 5 pixel border radius  
 * @param {Number} x The top left x coordinate 
 * @param {Number} y The top left y coordinate  
 * @param {Number} width The width of the rectangle  
 * @param {Number} height The height of the rectangle 
 * @param {Object} radius All corner radii. Defaults to 0,0,0,0; 
 * @param {Boolean} fill Whether to fill the rectangle. Defaults to false. 
 * @param {Boolean} stroke Whether to stroke the rectangle. Defaults to true. 
 */
CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, fill, stroke) {
    var cornerRadius = { upperLeft: 0, upperRight: 0, lowerLeft: 0, lowerRight: 0 };
    if (typeof stroke == "undefined") {
        stroke = true;
    }
    if (typeof radius === "object") {
        for (var side in radius) {
            cornerRadius[side] = radius[side];
        }
    }

    this.beginPath();
    this.moveTo(x + cornerRadius.upperLeft, y);
    this.lineTo(x + width - cornerRadius.upperRight, y);
    this.quadraticCurveTo(x + width, y, x + width, y + cornerRadius.upperRight);
    this.lineTo(x + width, y + height - cornerRadius.lowerRight);
    this.quadraticCurveTo(x + width, y + height, x + width - cornerRadius.lowerRight, y + height);
    this.lineTo(x + cornerRadius.lowerLeft, y + height);
    this.quadraticCurveTo(x, y + height, x, y + height - cornerRadius.lowerLeft);
    this.lineTo(x, y + cornerRadius.upperLeft);
    this.quadraticCurveTo(x, y, x + cornerRadius.upperLeft, y);
    this.closePath();
    if (stroke) {
        this.stroke();
    }
    if (fill) {
        this.fill();
    }
} 
</code></pre>

<p>Use it like this:</p>

<pre><code>var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
c.fillStyle = "blue";
c.roundRect(50, 100, 50, 100, {upperLeft:10,upperRight:10}, true, true);
</code></pre>


blocks|key|1267313|text|我从@jhoff的解决方案开始，但将其重写为使用宽度/高度参数，并且使用arcTo使其更加简洁：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1267314|CanvasRenderingContext2D.prototype.roundRect+=+function+(x,+y,+w,+h,+r)+{
++if+(w+<+2+*+r)+r+=+w+/+2;
++if+(h+<+2+*+r)+r+=+h+/+2;
++this.beginPath();
++this.moveTo(x%2Br,+y);
++this.arcTo(x%2Bw,+y,+++x%2Bw,+y%2Bh,+r);
++this.arcTo(x%2Bw,+y%2Bh,+x,+++y%2Bh,+r);
++this.arcTo(x,+++y%2Bh,+x,+++y,+++r);
++this.arcTo(x,+++y,+++x%2Bw,+y,+++r);
++this.closePath();
++return+this;
}|code-block|syntax|javascript|1267315|同时返回上下文，这样你就可以稍微链接一下。例如：|1267316|ctx.roundRect(35,+10,+225,+110,+20).stroke();+//or+.fill()+for+a+filled+rect|1267317|entityMap^0|10|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>I started with @jhoff's solution, but rewrote it to use width/height parameters, and using <code>arcTo</code> makes it quite a bit more terse:</p>

<pre><code>CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
  if (w &lt; 2 * r) r = w / 2;
  if (h &lt; 2 * r) r = h / 2;
  this.beginPath();
  this.moveTo(x+r, y);
  this.arcTo(x+w, y,   x+w, y+h, r);
  this.arcTo(x+w, y+h, x,   y+h, r);
  this.arcTo(x,   y+h, x,   y,   r);
  this.arcTo(x,   y,   x+w, y,   r);
  this.closePath();
  return this;
}
</code></pre>

<p>Also returning the context so you can chain a little. E.g.:</p>

<pre><code>ctx.roundRect(35, 10, 225, 110, 20).stroke(); //or .fill() for a filled rect
</code></pre>


blocks|key|1482021|text|为了使该函数与使用canvas+context的常规方法更一致，canvas+context类可以扩展为包含一个“fillRoundedRect”方法--该方法的调用方式与调用fillRect的方式相同：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1482022|var+canv+=+document.createElement("canvas");
var+cctx+=+canv.getContext("2d");

//+If+thie+canvasContext+class+doesn't+have++a+fillRoundedRect,+extend+it+now
if+(!cctx.constructor.prototype.fillRoundedRect)+{
++//+Extend+the+canvaseContext+class+with+a+fillRoundedRect+method
++cctx.constructor.prototype.fillRoundedRect+=+
++++function+(xx,yy,+ww,hh,+rad,+fill,+stroke)+{
++++++if+(typeof(rad)+==+"undefined")+rad+=+5;
++++++this.beginPath();
++++++this.moveTo(xx%2Brad,+yy);
++++++this.arcTo(xx%2Bww,+yy,++++xx%2Bww,+yy%2Bhh,+rad);
++++++this.arcTo(xx%2Bww,+yy%2Bhh,+xx,++++yy%2Bhh,+rad);
++++++this.arcTo(xx,++++yy%2Bhh,+xx,++++yy,++++rad);
++++++this.arcTo(xx,++++yy,++++xx%2Bww,+yy,++++rad);
++++++if+(stroke)+this.stroke();++//+Default+to+no+stroke
++++++if+(fill+%7C%7C+typeof(fill)=="undefined")+this.fill();++//+Default+to+fill
++};+//+end+of+fillRoundedRect+method
}+|code-block|syntax|javascript|1482023|代码检查canvas上下文对象的构造函数的原型是否包含'fillRoundedRect‘属性，并在第一次添加一个属性。它的调用方式与fillRect方法相同：|1482024|++ctx.fillStyle+=+"#eef";++ctx.strokeStyle+=+"#ddf";
++//+ctx.fillRect(10,10,+200,100);
++ctx.fillRoundedRect(10,10,+200,100,+5);|1482025|该方法像Grumdring一样使用arcTo方法。在该方法中，this是对ctx对象的引用。如果未定义笔划参数，则默认设置为false。默认情况下，如果未定义填充参数，则填充矩形。|1482026|(在Firefox上测试，我不知道是否所有实现都允许以这种方式进行扩展。)|1482027|entityMap^0|1L|F|2G|8|0|0|S|F|1U|8|0|0|H|5|V|4|11|3|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1D|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|T|$]]

<p>To make the function more consistent with the normal means of using a canvas context, the canvas context class can be extended to include a '<code>fillRoundedRect</code>' method -- that can be called in the same way <code>fillRect</code> is called:</p>

<pre><code>var canv = document.createElement("canvas");
var cctx = canv.getContext("2d");

// If thie canvasContext class doesn't have  a fillRoundedRect, extend it now
if (!cctx.constructor.prototype.fillRoundedRect) {
  // Extend the canvaseContext class with a fillRoundedRect method
  cctx.constructor.prototype.fillRoundedRect = 
    function (xx,yy, ww,hh, rad, fill, stroke) {
      if (typeof(rad) == "undefined") rad = 5;
      this.beginPath();
      this.moveTo(xx+rad, yy);
      this.arcTo(xx+ww, yy,    xx+ww, yy+hh, rad);
      this.arcTo(xx+ww, yy+hh, xx,    yy+hh, rad);
      this.arcTo(xx,    yy+hh, xx,    yy,    rad);
      this.arcTo(xx,    yy,    xx+ww, yy,    rad);
      if (stroke) this.stroke();  // Default to no stroke
      if (fill || typeof(fill)=="undefined") this.fill();  // Default to fill
  }; // end of fillRoundedRect method
} 
</code></pre>

<p>The code checks to see if the prototype for the constructor for the canvas context object contains a '<code>fillRoundedRect</code>' property and adds one -- the first time around.  It is invoked in the same manner as the <code>fillRect</code> method:</p>

<pre><code>  ctx.fillStyle = "#eef";  ctx.strokeStyle = "#ddf";
  // ctx.fillRect(10,10, 200,100);
  ctx.fillRoundedRect(10,10, 200,100, 5);
</code></pre>

<p>The method uses the <code>arcTo</code> method as Grumdring did.  In the method, <code>this</code> is a reference to the <code>ctx</code> object.  The stroke argument defaults to false if undefined.  The fill argument defaults to fill the rectangle if undefined.</p>

<p>(Tested on Firefox, I don't know if all implementations permit extension in this manner.)</p>


blocks|key|1267422|text|歌剧，老天。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267423|if+(window["CanvasRenderingContext2D"])+{
++++/**+@expose+*/
++++CanvasRenderingContext2D.prototype.roundRect+=+function(x,+y,+w,+h,+r)+{
++++++++if+(w+<+2*r)+r+=+w/2;
++++++++if+(h+<+2*r)+r+=+h/2;
++++++++this.beginPath();
++++++++if+(r+<+1)+{
++++++++++++this.rect(x,+y,+w,+h);
++++++++}+else+{
++++++++++++if+(window["opera"])+{
++++++++++++++++this.moveTo(x%2Br,+y);
++++++++++++++++this.arcTo(x%2Br,+y,+x,+y%2Br,+r);
++++++++++++++++this.lineTo(x,+y%2Bh-r);
++++++++++++++++this.arcTo(x,+y%2Bh-r,+x%2Br,+y%2Bh,+r);
++++++++++++++++this.lineTo(x%2Bw-r,+y%2Bh);
++++++++++++++++this.arcTo(x%2Bw-r,+y%2Bh,+x%2Bw,+y%2Bh-r,+r);
++++++++++++++++this.lineTo(x%2Bw,+y%2Br);
++++++++++++++++this.arcTo(x%2Bw,+y%2Br,+x%2Bw-r,+y,+r);
++++++++++++}+else+{
++++++++++++++++this.moveTo(x%2Br,+y);
++++++++++++++++this.arcTo(x%2Bw,+y,+x%2Bw,+y%2Bh,+r);
++++++++++++++++this.arcTo(x%2Bw,+y%2Bh,+x,+y%2Bh,+r);
++++++++++++++++this.arcTo(x,+y%2Bh,+x,+y,+r);
++++++++++++++++this.arcTo(x,+y,+x%2Bw,+y,+r);
++++++++++++}
++++++++}
++++++++this.closePath();
++++};
++++/**+@expose+*/
++++CanvasRenderingContext2D.prototype.fillRoundRect+=+function(x,+y,+w,+h,+r)+{
++++++++this.roundRect(x,+y,+w,+h,+r);
++++++++this.fill();
++++};
++++/**+@expose+*/
++++CanvasRenderingContext2D.prototype.strokeRoundRect+=+function(x,+y,+w,+h,+r)+{
++++++++this.roundRect(x,+y,+w,+h,+r);
++++++++this.stroke();
++++};
}|code-block|syntax|javascript|1267424|由于Opera是WebKit，这在遗留情况下也应该是有效的。|1267425|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Opera, ffs.</p>

<pre><code>if (window["CanvasRenderingContext2D"]) {
    /** @expose */
    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
        if (w &lt; 2*r) r = w/2;
        if (h &lt; 2*r) r = h/2;
        this.beginPath();
        if (r &lt; 1) {
            this.rect(x, y, w, h);
        } else {
            if (window["opera"]) {
                this.moveTo(x+r, y);
                this.arcTo(x+r, y, x, y+r, r);
                this.lineTo(x, y+h-r);
                this.arcTo(x, y+h-r, x+r, y+h, r);
                this.lineTo(x+w-r, y+h);
                this.arcTo(x+w-r, y+h, x+w, y+h-r, r);
                this.lineTo(x+w, y+r);
                this.arcTo(x+w, y+r, x+w-r, y, r);
            } else {
                this.moveTo(x+r, y);
                this.arcTo(x+w, y, x+w, y+h, r);
                this.arcTo(x+w, y+h, x, y+h, r);
                this.arcTo(x, y+h, x, y, r);
                this.arcTo(x, y, x+w, y, r);
            }
        }
        this.closePath();
    };
    /** @expose */
    CanvasRenderingContext2D.prototype.fillRoundRect = function(x, y, w, h, r) {
        this.roundRect(x, y, w, h, r);
        this.fill();
    };
    /** @expose */
    CanvasRenderingContext2D.prototype.strokeRoundRect = function(x, y, w, h, r) {
        this.roundRect(x, y, w, h, r);
        this.stroke();
    };
}
</code></pre>

<p>Since Opera is going WebKit, this should also remain valid in the legacy case.</p>


blocks|key|1267466|text|此代码创建一个100像素的正方形，圆角为30像素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267467|​|1267468|var+canvas+=+document.createElement("canvas");
document.body.appendChild(canvas);
var+ctx+=+canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.arcTo(0,100,0,0,30);
ctx.arcTo(0,0,100,0,30);
ctx.arcTo(100,0,100,100,30);
ctx.arcTo(100,100,0,100,30);
ctx.fill();|code-block|syntax|javascript|1267469|1267470|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This code creates a 100-pixel square, with rounded corners of 30 pixels.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.arcTo(0,100,0,0,30);
ctx.arcTo(0,0,100,0,30);
ctx.arcTo(100,0,100,100,30);
ctx.arcTo(100,100,0,100,30);
ctx.fill();</code></pre>
</div>
</div>
</p>


blocks|key|1267532|text|这是一个使用lineJoin属性来圆角的解决方案。如果你只需要一个实心的形状就行了，但是如果你需要一个比边框半径小的细边框就没那么好用了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1267533|​|1267534|function+roundedRect(ctx,+options)+{
++++ctx.strokeStyle+=+options.color;
++++ctx.fillStyle+=+options.color;
++++ctx.lineJoin+=+"round";
++++ctx.lineWidth+=+options.radius;

++++ctx.strokeRect(
++++++++options.x%2B(options.radius*.5),
++++++++options.y%2B(options.radius*.5),
++++++++options.width-options.radius,
++++++++options.height-options.radius
++++);

++++ctx.fillRect(
++++++++options.x%2B(options.radius*.5),
++++++++options.y%2B(options.radius*.5),
++++++++options.width-options.radius,
++++++++options.height-options.radius
++++);

++++ctx.stroke();
++++ctx.fill();
}

const+canvas+=+document.getElementsByTagName("canvas")[0];
const+ctx+=+canvas.getContext("2d");

roundedRect(ctx,+{
++++x:+10,
++++y:+10,
++++width:+200,
++++height:+100,
++++radius:+35,
++++color:+"red"
});|code-block|syntax|javascript|1267535|<canvas></canvas>|1267536|1267537|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin^0|6|8|6|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>Here's a solution using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin" rel="nofollow noreferrer"><code>lineJoin</code></a> property to round the corners. It works if you just need a solid shape, but not so much if you need a thin border that's smaller than the border radius.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function roundedRect(ctx, options) {
    ctx.strokeStyle = options.color;
    ctx.fillStyle = options.color;
    ctx.lineJoin = "round";
    ctx.lineWidth = options.radius;

    ctx.strokeRect(
        options.x+(options.radius*.5),
        options.y+(options.radius*.5),
        options.width-options.radius,
        options.height-options.radius
    );

    ctx.fillRect(
        options.x+(options.radius*.5),
        options.y+(options.radius*.5),
        options.width-options.radius,
        options.height-options.radius
    );

    ctx.stroke();
    ctx.fill();
}

const canvas = document.getElementsByTagName("canvas")[0];
const ctx = canvas.getContext("2d");

roundedRect(ctx, {
    x: 10,
    y: 10,
    width: 200,
    height: 100,
    radius: 35,
    color: "red"
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1482217|text|当你想要圆角时，试着添加这一行:+ctx.lineCap+=+"round"；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1482218|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>try to add this line , when you want to get rounded corners : ctx.lineCap = "round";</p>


blocks|key|1482263|text|因此，这是基于使用lineJoin=“轮”和适当的比例，数学和逻辑，我已经能够使这个函数，这不是完美的，但希望它有帮助。如果你想让每个角落都有不同的半径，可以看看：https://p5js.org/reference/#/p5/rect|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1482264|这就对了：|1482265|CanvasRenderingContext2D.prototype.roundRect+=+function+(x,y,width,height,radius)+{
++++radius+=+Math.min(Math.max(width-1,1),Math.max(height-1,1),radius);
++++var+rectX+=+x;
++++var+rectY+=+y;
++++var+rectWidth+=+width;
++++var+rectHeight+=+height;
++++var+cornerRadius+=+radius;

++++this.lineJoin+=+"round";
++++this.lineWidth+=+cornerRadius;
++++this.strokeRect(rectX%2B(cornerRadius/2),+rectY%2B(cornerRadius/2),+rectWidth-cornerRadius,+rectHeight-cornerRadius);
++++this.fillRect(rectX%2B(cornerRadius/2),+rectY%2B(cornerRadius/2),+rectWidth-cornerRadius,+rectHeight-cornerRadius);
++++this.stroke();
++++this.fill();
}|code-block|syntax|javascript|1482266|​|1482267|CanvasRenderingContext2D.prototype.roundRect+=+function+(x,y,width,height,radius)+{
++++radius+=+Math.min(Math.max(width-1,1),Math.max(height-1,1),radius);
++++var+rectX+=+x;
++++var+rectY+=+y;
++++var+rectWidth+=+width;
++++var+rectHeight+=+height;
++++var+cornerRadius+=+radius;

++++this.lineJoin+=+"round";
++++this.lineWidth+=+cornerRadius;
++++this.strokeRect(rectX%2B(cornerRadius/2),+rectY%2B(cornerRadius/2),+rectWidth-cornerRadius,+rectHeight-cornerRadius);
++++this.fillRect(rectX%2B(cornerRadius/2),+rectY%2B(cornerRadius/2),+rectWidth-cornerRadius,+rectHeight-cornerRadius);
++++this.stroke();
++++this.fill();
}
++++var+canvas+=+document.getElementById("myCanvas");
++++var+ctx+=+canvas.getContext('2d');
function+yop()+{
++ctx.clearRect(0,0,1000,1000)
++ctx.fillStyle+=+"#ff0000";
++ctx.strokeStyle+=+"#ff0000";++ctx.roundRect(Number(document.getElementById("myRange1").value),Number(document.getElementById("myRange2").value),Number(document.getElementById("myRange3").value),Number(document.getElementById("myRange4").value),Number(document.getElementById("myRange5").value));
requestAnimationFrame(yop);
}
requestAnimationFrame(yop);|1482268|<input+type="range"+min="0"+max="1000"+value="10"+class="slider"+id="myRange1"><input+type="range"+min="0"+max="1000"+value="10"+class="slider"+id="myRange2"><input+type="range"+min="0"+max="1000"+value="200"+class="slider"+id="myRange3"><input+type="range"+min="0"+max="1000"+value="100"+class="slider"+id="myRange4"><input+type="range"+min="1"+max="1000"+value="50"+class="slider"+id="myRange5">
<canvas+id="myCanvas"+width="1000"+height="1000">
</canvas>|1482269|1482270|entityMap|0|LINK|mutability|MUTABLE|url|https://p5js.org/reference/#/p5/rect^0|2A|10|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|Q|3|L|5|6|7|18|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

<p>So this is based out of using lineJoin="round" and with the proper proportions, mathematics and logic I have been able to make this function, this is not perfect but hope it helps. If you want to make each corner have a different radius take a look at: <a href="https://p5js.org/reference/#/p5/rect" rel="noreferrer">https://p5js.org/reference/#/p5/rect</a></p>

<p>Here ya go:</p>

<pre><code>CanvasRenderingContext2D.prototype.roundRect = function (x,y,width,height,radius) {
    radius = Math.min(Math.max(width-1,1),Math.max(height-1,1),radius);
    var rectX = x;
    var rectY = y;
    var rectWidth = width;
    var rectHeight = height;
    var cornerRadius = radius;

    this.lineJoin = "round";
    this.lineWidth = cornerRadius;
    this.strokeRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
    this.fillRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
    this.stroke();
    this.fill();
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>CanvasRenderingContext2D.prototype.roundRect = function (x,y,width,height,radius) {
    radius = Math.min(Math.max(width-1,1),Math.max(height-1,1),radius);
    var rectX = x;
    var rectY = y;
    var rectWidth = width;
    var rectHeight = height;
    var cornerRadius = radius;

    this.lineJoin = "round";
    this.lineWidth = cornerRadius;
    this.strokeRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
    this.fillRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
    this.stroke();
    this.fill();
}
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext('2d');
function yop() {
  ctx.clearRect(0,0,1000,1000)
  ctx.fillStyle = "#ff0000";
  ctx.strokeStyle = "#ff0000";  ctx.roundRect(Number(document.getElementById("myRange1").value),Number(document.getElementById("myRange2").value),Number(document.getElementById("myRange3").value),Number(document.getElementById("myRange4").value),Number(document.getElementById("myRange5").value));
requestAnimationFrame(yop);
}
requestAnimationFrame(yop);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" min="0" max="1000" value="10" class="slider" id="myRange1"&gt;&lt;input type="range" min="0" max="1000" value="10" class="slider" id="myRange2"&gt;&lt;input type="range" min="0" max="1000" value="200" class="slider" id="myRange3"&gt;&lt;input type="range" min="0" max="1000" value="100" class="slider" id="myRange4"&gt;&lt;input type="range" min="1" max="1000" value="50" class="slider" id="myRange5"&gt;
&lt;canvas id="myCanvas" width="1000" height="1000"&gt;
&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1482313|text|其他答案都不能正确处理以下3种情况：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1482314|if+((width+>=+radius+x+2)+&&+(height+<=+radius+*+2))
if+((width+<=+radius+x+2)+&&+(height+>=+radius+*+2))
if+((width+<=+radius+x+2)+&&+(height+<=+radius+*+2))|code-block|syntax|javascript|1482315|如果发生这些情况，您将得不到正确绘制的矩形|1482316|我的解决方案动态地处理任何半径、任何宽度和高度，并且应该是默认答案|1482317|function+roundRect(ctx,+x,+y,+width,+height,+radius)+{
++++++++/*
+++++++++*+Draws+a+rounded+rectangle+using+the+current+state+of+the+canvas.
+++++++++*/
++++++++let+w+=+width;
++++++++let+h+=+height;
++++++++let+r+=+radius;
++++++++ctx.stroke()
++++++++ctx.fill()
++++++++ctx.beginPath();
++++++++//+Configure+the+roundedness+of+the+rectangles+corners
++++++++if+((w+>=+r+*+2)+&&+(h+>=+r+*+2))+{
++++++++++++//+Handles+width+and+height+larger+than+diameter
++++++++++++//+Keep+radius+fixed
++++++++++++ctx.moveTo(x+%2B+r,+y);++//+tr+start
++++++++++++ctx.lineTo(x+%2B+w+-+r,+y);++//+tr
++++++++++++ctx.quadraticCurveTo(x+%2B+w,+y,+x+%2B+w,+y+%2B+r);++//tr
++++++++++++ctx.lineTo(x+%2B+w,+y+%2B+h+-+r);++//+br
++++++++++++ctx.quadraticCurveTo(x+%2B+w,+y+%2B+h,+x+%2B+w+-+r,+y+%2B+h);++//+br
++++++++++++ctx.lineTo(x+%2B+r,+y+%2B+h);++//+bl
++++++++++++ctx.quadraticCurveTo(x,+y+%2B+h,+x,+y+%2B+h+-+r);++//+bl
++++++++++++ctx.lineTo(x,+y+%2B+r);++//+tl
++++++++++++ctx.quadraticCurveTo(x,+y,+x+%2B+r,+y);++//+tl
++++++++}+else+if+((w+<+r+*+2)+&&+(h+>+r+*+2))+{
++++++++++++//+Handles+width+lower+than+diameter
++++++++++++//+Radius+must+dynamically+change+as+half+of+width
++++++++++++r+=+w+/+2;
++++++++++++ctx.moveTo(x+%2B+w,+y+%2B+h+-+r);++//+br+start
++++++++++++ctx.quadraticCurveTo(x+%2B+w,+y+%2B+h,+x+%2B+w+-+r,+y+%2B+h);++//+br+curve
++++++++++++ctx.quadraticCurveTo(x,+y+%2B+h,+x,+y+%2B+h+-+r)++//+bl+curve
++++++++++++ctx.lineTo(x,+y+%2B+r);++//+line
++++++++++++ctx.quadraticCurveTo(x,+y,+x+%2B+r,+y);++//+tl
++++++++++++ctx.quadraticCurveTo(x+%2B+w,+y,+x+%2B+w,+y+%2B+r);++//+tl
++++++++++++ctx.lineTo(x+%2B+w,+y+%2B+h+-+r);++//+line
++++++++}+else+if+((w+>+r+*+2)+&&+(h+<+r+*+2))+{
++++++++++++//+Handles+height+lower+than+diameter
++++++++++++//+Radius+must+dynamically+change+as+half+of+height
++++++++++++r+=+h+/+2;
++++++++++++ctx.moveTo(x+%2B+w+-+r,+y+%2B+h);++//+br+start
++++++++++++ctx.quadraticCurveTo(x+%2B+w,+y+%2B+h,+x+%2B+w,+y+%2B+r);++//+br+curve
++++++++++++ctx.quadraticCurveTo(x+%2B+w,+y,+x+%2B+w+-+r,+y);++//+tr+curve
++++++++++++ctx.lineTo(x+%2B+r,+y);++//+line+between+tr+tl
++++++++++++ctx.quadraticCurveTo(x,+y,+x,+y+%2B+r);++//+tl+curve
++++++++++++ctx.quadraticCurveTo(x,+y+%2B+h,+x+%2B+r,+y+%2B+h);++//+bl+curve
++++++++}+else+if+((w+<+2+*+r)+&&+(h+<+2+*+r))+{
++++++++++++//+Handles+width+and+height+lower+than+diameter
++++++++++++ctx.moveTo(x+%2B+w+/+2,+y+%2B+h);
++++++++++++ctx.quadraticCurveTo(x+%2B+w,+y+%2B+h,+x+%2B+w,+y+%2B+h+/+2);++//+bl+curve
++++++++++++ctx.quadraticCurveTo(x+%2B+w,+y,+x+%2B+w+/+2,+y);++//+tr+curve
++++++++++++ctx.quadraticCurveTo(x,+y,+x,+y+%2B+h+/+2);++//+tl+curve
++++++++++++ctx.quadraticCurveTo(x,+y+%2B+h,+x+%2B+w+/+2,+y+%2B+h);++//+bl+curve

++++++++}
++++++++ctx.closePath();
++++}|1482318|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>NONE of the other answers can handle the following 3 cases correctly:</p>
<pre class="lang-js prettyprint-override"><code>if ((width &gt;= radius x 2) &amp;&amp; (height &lt;= radius * 2))
if ((width &lt;= radius x 2) &amp;&amp; (height &gt;= radius * 2))
if ((width &lt;= radius x 2) &amp;&amp; (height &lt;= radius * 2))
</code></pre>
<p>If any of these cases happen, you will not get a correctly drawn rectangle</p>
<p>My Solution handles ANY radius and ANY Width and Height dynamically, and should be the default answer</p>
<pre class="lang-js prettyprint-override"><code>function roundRect(ctx, x, y, width, height, radius) {
        /*
         * Draws a rounded rectangle using the current state of the canvas.
         */
        let w = width;
        let h = height;
        let r = radius;
        ctx.stroke()
        ctx.fill()
        ctx.beginPath();
        // Configure the roundedness of the rectangles corners
        if ((w &gt;= r * 2) &amp;&amp; (h &gt;= r * 2)) {
            // Handles width and height larger than diameter
            // Keep radius fixed
            ctx.moveTo(x + r, y);  // tr start
            ctx.lineTo(x + w - r, y);  // tr
            ctx.quadraticCurveTo(x + w, y, x + w, y + r);  //tr
            ctx.lineTo(x + w, y + h - r);  // br
            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);  // br
            ctx.lineTo(x + r, y + h);  // bl
            ctx.quadraticCurveTo(x, y + h, x, y + h - r);  // bl
            ctx.lineTo(x, y + r);  // tl
            ctx.quadraticCurveTo(x, y, x + r, y);  // tl
        } else if ((w &lt; r * 2) &amp;&amp; (h &gt; r * 2)) {
            // Handles width lower than diameter
            // Radius must dynamically change as half of width
            r = w / 2;
            ctx.moveTo(x + w, y + h - r);  // br start
            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);  // br curve
            ctx.quadraticCurveTo(x, y + h, x, y + h - r)  // bl curve
            ctx.lineTo(x, y + r);  // line
            ctx.quadraticCurveTo(x, y, x + r, y);  // tl
            ctx.quadraticCurveTo(x + w, y, x + w, y + r);  // tl
            ctx.lineTo(x + w, y + h - r);  // line
        } else if ((w &gt; r * 2) &amp;&amp; (h &lt; r * 2)) {
            // Handles height lower than diameter
            // Radius must dynamically change as half of height
            r = h / 2;
            ctx.moveTo(x + w - r, y + h);  // br start
            ctx.quadraticCurveTo(x + w, y + h, x + w, y + r);  // br curve
            ctx.quadraticCurveTo(x + w, y, x + w - r, y);  // tr curve
            ctx.lineTo(x + r, y);  // line between tr tl
            ctx.quadraticCurveTo(x, y, x, y + r);  // tl curve
            ctx.quadraticCurveTo(x, y + h, x + r, y + h);  // bl curve
        } else if ((w &lt; 2 * r) &amp;&amp; (h &lt; 2 * r)) {
            // Handles width and height lower than diameter
            ctx.moveTo(x + w / 2, y + h);
            ctx.quadraticCurveTo(x + w, y + h, x + w, y + h / 2);  // bl curve
            ctx.quadraticCurveTo(x + w, y, x + w / 2, y);  // tr curve
            ctx.quadraticCurveTo(x, y, x, y + h / 2);  // tl curve
            ctx.quadraticCurveTo(x, y + h, x + w / 2, y + h);  // bl curve

        }
        ctx.closePath();
    }
</code></pre>


<p>HTML Canvas provides methods for drawing rectangles, <code>fillRect()</code> and <code>strokeRect()</code>, but I can't find a method for making rectangles with rounded corners. How can I do that?</p>


How to draw a rounded rectangle using HTML Canvas?

HTML5

HTML Canvas提供了绘制矩形、fillRect()和strokeRect()的方法，但我找不到一种方法来制作圆角矩形。我该怎么做呢？

问如何使用HTML画布绘制圆角矩形？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML画布绘制圆角矩形？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML画布绘制圆角矩形？
EN