CSS HWB()颜色函数实例页面

HTML代码：

<canvas id="canvas" width="200" height="100"></canvas>

<form id="form">
    <p>
        H: <input type="range" name="h" value="0" min="0" max="360">
    </p>
    <p>
        W: <input type="range" name="w" value="0" min="0" max="100"> %
    </p>
    <p>
        B: <input type="range" name="b" value="50" min="0" max="100"> %
    </p>
</form>
                

JS代码：

var eleH = document.querySelector('input[name="h"]');
var eleW = document.querySelector('input[name="w"]');
var eleB = document.querySelector('input[name="b"]');

var setColor = function () {
    canvas.style.backgroundColor = 'hwb('+ eleH.value +' '+ eleW.value +'% '+ eleB.value +'%)';
};

setColor();

form.addEventListener('input', setColor);