<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').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(10, 10, 200, 200);
</script>
</body>
</html>
版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）