html矩形框填充颜色的代码,javascript – 用颜色部分填充形状的边框

这应该可以与Canvas一起使用,甚至可以使用CSS本身通过玩多个元素等,但我肯定会建议你使用SVG. SVG在编码,维护和生成响应输出方面提供了很多好处(与Canvas不同,Canvas在缩放时往往会变得像素化).

以下是组件：

>一个rect元素,与父svg的大小相同,并且具有线性渐变填充.渐变有两种颜色 – 一种是基色(浅灰色),另一种是进度(青色).

>应用于rect元素的蒙版.面具有一条路径,它只是线条和圆圈.当蒙版应用于矩形时,只有这条路径会通过rect的实际背景(或填充)显示,该区域的其余部分将被掩码中添加的另一个矩形掩盖.

>掩码还有一个文本元素来显示进度值.

>线性渐变的停止偏移设置使其等于进度.通过更改偏移量,我们始终可以确保路径仅显示所需长度的进度填充和其余部分的基础(浅灰色).

window.onload = function() {

var progress = document.querySelector('#progress'),

base = document.querySelector('#base'),

prgText = document.querySelector('#prg-text'),

prgInput = document.querySelector('#prg-input');

prgInput.addEventListener('change', function() {

prgText.textContent = this.value + '%';

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(下面提供的链接),了解有关元素,属性和值的更多信息.