绘制渐变色
2021年8月10日 14:50
<script>
window.onload = function() {
draw();
function draw() {
var ctx = document.getElementById("canvas").getContext('2d');
var lingrad = ctx.createLinearGradient(0, 0, 0, 200);
lingrad.addColorStop(0, '#ff0000');
lingrad.addColorStop(1 / 7, '#ff9900');
lingrad.addColorStop(2 / 7, '#ffff00');
lingrad.addColorStop(3 / 7, '#00ff00');
lingrad.addColorStop(4 / 7, '#00ffff');
lingrad.addColorStop(5 / 7, '#0000ff');
lingrad.addColorStop(6 / 7, '#ff00ff');
lingrad.addColorStop(1, '#ff0000');
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad;
ctx.fillRect(0, 0, 300, 200);
}
}
</script>
<body>
<canvas id="canvas" style="border: 1px solid #999;" width="300" height="200"></canvas>
</body>
window.onload = function() {
draw();
function draw() {
var ctx = document.getElementById("canvas").getContext('2d');
var lingrad = ctx.createLinearGradient(0, 0, 0, 200);
lingrad.addColorStop(0, '#ff0000');
lingrad.addColorStop(1 / 7, '#ff9900');
lingrad.addColorStop(2 / 7, '#ffff00');
lingrad.addColorStop(3 / 7, '#00ff00');
lingrad.addColorStop(4 / 7, '#00ffff');
lingrad.addColorStop(5 / 7, '#0000ff');
lingrad.addColorStop(6 / 7, '#ff00ff');
lingrad.addColorStop(1, '#ff0000');
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad;
ctx.fillRect(0, 0, 300, 200);
}
}
</script>
<body>
<canvas id="canvas" style="border: 1px solid #999;" width="300" height="200"></canvas>
</body>
全部回复（1）
引用沙发
W3School TIY Editor https://www.w3school.com.cn/tiy/t.asp?f=js_statement