Draw canvas rect radius top left top right js năm 2024

Question

I've recently started using the canvas tag and needed to draw rounded corner rectangles. I did find a good post explaing how to do it but I didn't find a nice method so I decided to create one. I took Futomi Hatano's code and abstracted it into a method.

Nội dung chính Show

How do you make a rounded rectangle in canvas?
How to use Android canvas to draw a rectangle with only topleft and topright corners round?
How to draw rectangle in javascript canvas?
How do I add a border radius in Canva?

/

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 {CanvasRenderingContext2D} ctx
@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 {Number} radius The corner radius. Defaults to 5;
@param {Boolean} fill Whether to fill the rectangle. Defaults to false.
@param {Boolean} stroke Whether to stroke the rectangle. Defaults to true. */ function roundRect(ctx, x, y, width, height, radius, fill, stroke) { if (typeof stroke == "undefined" ) {
```
stroke = true;
```
} if (typeof radius === "undefined") {
```
radius = 5;
```
} ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); ctx.quadraticCurveTo(x + width, y, x + width, y + radius); ctx.lineTo(x + width, y + height - radius); ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); ctx.lineTo(x + radius, y + height); ctx.quadraticCurveTo(x, y + height, x, y + height - radius); ctx.lineTo(x, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); ctx.closePath(); if (stroke) {
```
ctx.stroke();
```
} if (fill) {
```
ctx.fill();
```
} }

And it can be used like the following:

// My html contains a canvas with id "rounded-rect" 500X350 var ctx = document.getElementById("rounded-rect").getContext("2d"); // Draw using default border radius, // stroke it but no fill (function's default values) roundRect(ctx, 5, 5, 50, 50); // To change the color on the rectangle, just manipulate the context ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.fillStyle = "rgba(255, 255, 0, .5)"; roundRect(ctx, 100, 5, 100, 100, 20, true); // Manipulate it again ctx.strokeStyle = "

2d6";

ctx.fillStyle = "

abc";

roundRect(ctx, 100, 200, 200, 100, 50, true);

Which will produce the following output:

For Firefox and Chrome (and maybe other browsers), you can do the following for syntactic sugar

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();

} if (fill) {

this.fill();

} } // Now you can just call var ctx = document.getElementById("rounded-rect").getContext("2d"); ctx.roundRect(5, 5, 50, 50);

Here's a JsFiddle that you can edit freely

Question

We would like to know how to draw rounded rectangle with bezier Curve.

Answer


<!--  w w w. j a v  a 2  s  .  co m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.onload=function(){
    var K = 4 * (Math.SQRT2-1) / 3; //constant for circles using Bezier curve.
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 400;
    canvas.height = 200;
    document.body.appendChild(canvas);
    rounded_rect(ctx,10,10,200,150,20);
    function rounded_rect(ctx,left,top, width, height, radius)
    {
        var right=left+width;
        var bottom=top+height;
        ctx.beginPath();
    // top left
        ctx.moveTo(left+radius,top);
    // top right
        ctx.lineTo(right-radius,top);
    //right top
        ctx.bezierCurveTo(right+radius*(K-1),top,right,top+radius*(1-K),right,top+radius);
    //right bottom
        ctx.lineTo(right,bottom-radius);
    //bottom right
        ctx.bezierCurveTo(right,bottom+radius*(K-1),right+radius*(K-1),bottom,right-radius,bottom);
    //bottom left
        ctx.lineTo(left+radius,bottom);
    //left bottom
        ctx.bezierCurveTo(left+radius*(1-K),bottom,left,bottom+radius*(K-1),left,bottom-radius);
    //left top
        ctx.lineTo(left,top+radius);
    //top left again    
        ctx.bezierCurveTo(left,top+radius*(1-K),left+radius*(1-K),top,left+radius,top);
        ctx.lineWidth=10;
        ctx.strokeStyle="rgb(0,0,0)";
        ctx.stroke();
    }
}
</script>
</head>
<body>
</body>
</html>

The code above is rendered as follows:

How do you make a rounded rectangle in canvas?

var canvas = $("canvas"). get(0);.

var ctx = canvas. getContext("2d");.

canvas. width = $(document). width();.

canvas. height = $(document). height();.

CanvasRenderingContext2D. prototype. roundRect = function (x, y, width, height, radius) {.

if (width < 2 * radius) radius = width / 2;.

How to use Android canvas to draw a rectangle with only topleft and topright corners round?

If I want a 300x300 rect, with the top left and right rounded by 50 pixels, you can do: canvas. save(); canvas. clipRect(0, 0, 300, 300); canvas.

How to draw rectangle in javascript canvas?

To draw the rectangle onto a canvas, you can use the fill() or stroke() methods. Note: To both create and render a rectangle in one step, use the fillRect() or strokeRect() methods.