html矩形框填充颜⾊的代码,javascript–⽤颜⾊部分填充形状的
边框
这应该可以与Canvas⼀起使⽤，甚⾄可以使⽤CSS本⾝通过玩多个元素等，但我肯定会建议你使⽤SVG. SVG在编码，维护和⽣成响应输出⽅⾯提供了很多好处(与Canvas不同,Canvas在缩放时往往会变得像素化).
以下是组件：
>⼀个rect元素，与⽗svg的⼤⼩相同，并且具有线性渐变填充.渐变有两种颜⾊ – ⼀种是基⾊(浅灰⾊)，另⼀种是进度(青⾊).
>应⽤于rect元素的蒙版.⾯具有⼀条路径，它只是线条和圆圈.当蒙版应⽤于矩形时，只有这条路径会通过rect的实际背景(或填充)显⽰，该区域的其余部分将被掩码中添加的另⼀个矩形掩盖.
>掩码还有⼀个⽂本元素来显⽰进度值.
>线性渐变的停⽌偏移设置使其等于进度.通过更改偏移量，我们始终可以确保路径仅显⽰所需长度的进度填充和其余部分的基础(浅灰⾊).
var progress = document.querySelector('#progress'),
base = document.querySelector('#base'),
svg和canvas的区别prgText = document.querySelector('#prg-text'),
prgInput = document.querySelector('#prg-input');
prgInput.addEventListener('change', function() {
progress.setAttribute('offset', this.value + '%');
base.setAttribute('offset', this.value + '%');
});
}
svg {
width: 200px;
height: 300px;
}
path {
stroke-width: 4;
}
#rect {
fill: url(#grad);
mask: url(#path);
}
/
* just for demo */
.controls {
position: absolute;
top: 0;
right: 0;
height: 100px;
line-height: 100px;
border: 1px solid;
}
.controls * {
vertical-align: middle;
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
50%
Set Progress:
如果您不熟悉SVG，可以参考MDN Docs(下⾯提供的链接)，了解有关元素，属性和值的更多信息.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。