gpt4 book ai didi

javascript - CSS3 边框半径到 HTML5 Canvas

转载 作者:数据小太阳 更新时间:2023-10-29 05:19:36 25 4
gpt4 key购买 nike

我试图在 Canvas 中重现 CSS3 边框半径。

绘制圆 Angular 矩形很容易,但在 CSS 中,每个边框的值可能很高。

例如:
HTML

<div class="normal_radius"></div>
<div class="high_radius"></div>
<div class="high2_radius"></div>

CSS

div { height:50px;width:50px;position:absolute;top:10px; }
.normal_radius {
border: 1px solid black;
border-radius: 5px 5px 10px 15px;
left: 10px;
}
.high_radius {
border: 1px solid red;
border-radius: 5000px 500px 100px 150px;
left: 80px;
}
.high2_radius {
border: 1px solid blue;
border-radius: 2500px 250px 50px 75px;
left: 160px;
}

这里是jsfiddle

黑色的正常边框半径值,我可以重现。红色,边界半径的高值,我不知道如何重现。而蓝色,高值除以 2,与红色的结果相同。

我的问题很简单,如何在 Canvas 中重现红色和蓝色?

最好的问候。

最佳答案

下面的函数非常接近。尽管如果您使用大于宽度和高度的值,您将会遇到问题。

Live Demo

function canvasRadius(x, y, w, h, tl, tr, br, bl){
var r = x + w,
b = y + h;

ctx.beginPath();
ctx.moveTo(x+tl, y);
ctx.lineTo(r-(tr), y);
ctx.quadraticCurveTo(r, y, r, y+tr);
ctx.lineTo(r, b-br);
ctx.quadraticCurveTo(r, b, r-br, b);
ctx.lineTo(x+bl, b);
ctx.quadraticCurveTo(x, b, x, b-bl);
ctx.lineTo(x, y+tl);
ctx.quadraticCurveTo(x, y, x+tl, y);
ctx.stroke();

}

canvasRadius(10,10,50,50,5,5,10,15);
ctx.strokeStyle = "red";
canvasRadius(80,10,50,50,47,3,0,0);
ctx.strokeStyle = "blue";
canvasRadius(160,10,50,50,47,3,0,0);

关于javascript - CSS3 边框半径到 HTML5 Canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13482322/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com