html5绘制圆角矩形,js绘制圆角矩形

2dfd3c0a532526a353fc8bd4204b11af.png

绘制出来啦,代码如下

矩形

.juxing{

/* 加上css会很奇怪-。-*/

/* transition:all 0.1s ease-in; */

}

点击

const len = 50;

let array = [];

let time = null;

function start() {

clearInterval(time);

time = setInterval(() => {

huanwei();

}, 100);

}

function huanwei() {

array.unshift(array.pop());

var els = document.querySelectorAll('.juxing');

for (let i = 0; i < len; i++) {

let el = document.getElementById('ip' + (i + 1));

if (array[i] && array[i].point) {

let point = array[i].point;

el.style.left = point.x + 'px';

el.style.top = point.y + 'px';

}

}

}

function createNode(name, p) {

// 填充div

let x = p.x;

let y = p.y;

var createDiv = document.createElement("div");

// 动态

createDiv.id = name;

createDiv.style.left = p.x + 'px';

createDiv.style.top = p.y + 'px';

createDiv.innerHTML = name;

// 固定

if (name !== 'yuan') {

// 存储非圆心的所有坐标点

createDiv.className = "juxing"

let obj = {

id: name,

point: { x: p.x, y: p.y }

}

array.push(obj);

}

createDiv.style.position = "absolute";

createDiv.style.width = "30px";

createDiv.style.height = "30px";

createDiv.style.borderRadius = "30px";

// border-radius: 30px;

createDiv.style.background = "pink";

createDiv.style.border = "1pxsolidred";

document.body.appendChild(createDiv);

}

initNode({

len: len,

rectW: 400,

rectH: 300,

p: {

x: 400,

y: 200

}

});

function initNode(params) {

//初始化圆角矩形

// 数量

let len = params.len || 100;

// 设置圆角矩形内矩形宽高 ,

let rectW = params.rectW || 700;

let rectH = params.rectH || 900;

// 中心

let cx = params.p.x || 0;

let cy = params.p.y || 0;

/*

* 思路:圆角矩形可以看作一个矩形和左右两个半圆组成,半径为矩形的一半;

* 圆周长+矩形两边的长度 / 总数量 计算出各边应该存放的小车数量,以此数量为基准判断该绘制哪一块;

*

* o = (180 / arcLenSplit) * Math.PI / 180

* l=nπr/180 弧长公式

* l = n(圆心角)× π(圆周率)× r(半径)/180=α(圆心角弧度数)× r(半径)

* 这里的象限为4321,为(1,1),(1,-1),(-1,-1),(-1,1)

*

*/

// 圆半径

let radius = rectH / 2;

// 两边弧长相等为

let arcLength = Math.PI * radius;

// 圆弧*2 + 矩形顶边底边长度除以总数量

let split = ((arcLength * 2) + (rectW * 2)) / len;

// 矩形边长可以存放数量,均分

let sideLenCount = Math.round(rectW / split);

//弧长可以存放小车数量

let arcLenSplit = Math.round(arcLength / split);

//

let lineSplit = rectW / sideLenCount

//每一个BOX对应的角度;

// var avd = 180 / arcLenSplit;

//每一个BOX对应的弧度;

// let o = avd * Math.PI / 180;

// 再次尝试,改掉以角度划分为以数量来划分,

var count = 0;

var count2 = 0;

// 画圆心,主要绘制的时候观察使用,后期删除

createNode('yuan', { x: cx, y: cy });

// 左下角

let p1 = { x: -rectW / 2, y: rectH / 2, i: 0 };

let p2 = { x: rectW / 2, y: -rectH / 2, i: 0 }

//思路:计算矩形周长,处以数量值;先从左下角开始,每次叠加x,如果超过矩形下方长度,则切换至圆形弧度绘制,还是只能以是否在矩形上来判断该绘制矩形横轴或者圆形

for (var j = 1; j <= len; j++) {

if (j <= sideLenCount) {

//绘制矩形底边 外面为计算总共拆分,里面重新计算分到的 边长/数量

let x = p1.x + getSplit(lineSplit, p1.i)

let y = p1.y;

p1.i++;

createNode('ip' + j, { x: x + cx, y: y + cy });

} else if (j > sideLenCount && j <= (sideLenCount + arcLenSplit)) {

// 绘制右侧圆弧

let ang = 180 / arcLenSplit;

let hd = getSplit(ang, count) * Math.PI / 180;

count++;

let yuanx = radius * Math.sin(hd) + cx + (rectW / 2);

let yuany = radius * Math.cos(hd) + cy;

createNode('ip' + j, { x: yuanx, y: yuany });

} else if (j > (sideLenCount + arcLenSplit) && j <= (sideLenCount + sideLenCount + arcLenSplit)) {

// 矩形顶部

let x = p2.x - getSplit(lineSplit, p2.i)

y = p2.y;

p2.i++;

createNode('ip' + j, { x: x + cx, y: y + cy });

} else {

//剩余

let remaining = len - (sideLenCount * 2) - arcLenSplit;

let ang = getSplit(180 / remaining, count2) * Math.PI / 180;

// 貌似是加上180度弧度的意思?

let hd = ang + (Math.PI / 180 * 180);

count2++;

let yuanx = radius * Math.sin(hd) + cx - (rectW / 2);

let yuany = radius * Math.cos(hd) + cy;

createNode('ip' + j, { x: yuanx, y: yuany });

}

}

function getSplit(split, count) {

// 2,6,10,14方式均分排列

return (split / 2) + (count * split)

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要利用js绘制圆角矩形,我们可以使用Canvas标签和它的API来实现。 首先,我们需要获得一个指向Canvas元素的引用,这样我们就可以利用其API进行绘图操作。可以通过JavaScript代码来获取该引用,如下所示: ```javascript var canvas = document.getElementById("myCanvas"); ``` 接下来,我们需要获得一个指针来操作Canvas的绘图环境,我们可以使用getContext方法来实现,如下所示: ```javascript var ctx = canvas.getContext("2d"); ``` 然后,我们需要设置圆角矩形的相关属性,包括位置,大小和圆角半径,如下所示: ```javascript var x = 50; // 圆角矩形左上角的横坐标 var y = 50; // 圆角矩形左上角的纵坐标 var width = 200; // 圆角矩形的宽度 var height = 100; // 圆角矩形的高度 var radius = 20; // 圆角的半径 ``` 接下来,我们可以开始绘制圆角矩形了。首先,通过调用beginPath方法启动一个新的路径,然后使用arcTo方法来绘制圆角的边,最后使用closePath方法来闭合路径。代码如下所示: ```javascript ctx.beginPath(); ctx.moveTo(x + radius, y); // 到达右上角的起始点 ctx.arcTo(x + width, y, x + width, y + radius, radius); // 绘制右上角的圆角 ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius); // 绘制右下角的圆角 ctx.arcTo(x, y + height, x, y + height - radius, radius); // 绘制左下角的圆角 ctx.arcTo(x, y, x + radius, y, radius); // 绘制左上角的圆角 ctx.closePath(); // 闭合路径 ``` 最后,我们可以设置圆角矩形的样式和颜色,然后调用fill方法来填充圆角矩形的内部。代码如下所示: ```javascript ctx.fillStyle = "red"; // 设置圆角矩形的填充颜色 ctx.fill(); // 填充圆角矩形的内部 ``` 以上就是利用Canvas和JavaScript绘制圆角矩形的步骤。通过控制圆角矩形的位置、大小、圆角半径以及样式和颜色,我们可以在网页上实现各种个性化的圆角矩形效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值