Создадим красивую кнопочку:
Код index.html:
Код:
<!DOCTYPE html>
<html>
<head>
<title>Красивая кнопка</title>
<style>
#mybg {
width:600px;
height:256px;
background-repeat:repeat-y;
background-image:paint(myPattern);
border:1px solid green;
border-radius:5px;
color:white;
display: table;
text-align:center;
box-shadow:0px 0px 5px 5px #555;
}
#mybg span {vertical-align:middle;
display: table-cell;
}
</style>
<script>
window.onload = function() {
CSS.paintWorklet.addModule('patternWorklet.js');
}
</script>
</head>
<body>
<br>
<div id="mybg">
<span>Нажми сюда</span>
</div>
</body>
</html>Код patternWorklet.js:
Код:
class Shape {
paint(ctx, geom, properties) {
for(var i=0; i<255; i++) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(geom.width, i);
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgb(0,' + i +', 0)';
ctx.closePath();
ctx.stroke();
}
}
}
registerPaint('myPattern', Shape);
Результат: