参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》
<!DOCTYPE html>
<html>
<head>
<title>2-3</title>
<style>
body {
background: #dddddd;
}
#canvas {
position: absolute;
left: 0px;
top: 0px;
margin: 20px;
background: #ffffff;
border: thin solid #aaaaaa;
}
</style>
</head>
<body>
<canvas id='canvas' width='1000' height='1000'>
Canvas not supported
</canvas>
<script src='2-3.js'></script>
</body>
</html>
2-3.js
var canvas=document.getElementById('canvas'),
context=canvas.getContext('2d'),
gradient = context.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop(0,'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5,'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1,'yellow');
context.fillStyle =gradient;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();
效果如图：
网友评论