参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》
<!DOCTYPE html>
<html>
<head>
<title>2-4</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-4.js'></script>
</body>
</html>
2-4.js
var canvas=document.getElementById('canvas'),
context=canvas.getContext('2d'),
gradient=context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);
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();
效果如图所示：
网友评论