第三章 渐变
<canvas height="500" width="500" id="canvas"></canvas>
<script>
var elem=document.getElementById("canvas");
var canvas=elem.getContext("2d");
var grad=canvas.createLinearGradient(0,0,500,500);
grad.addColorStop(0.2,"red");
grad.addColorStop(0.5,"orange");
grad.addColorStop(1,"yellow");
canvas.fillStyle=grad;
canvas.fillRect(0,0,500,500);
</script>
<canvas height="500" width="500" id="canvas"></canvas>
<script>
var elem=document.getElementById("canvas");
var canvas=elem.getContext("2d");
var grad=canvas.createRadialGradient(0,0,10,500,500,100);
grad.addColorStop(0.2,"red");
grad.addColorStop(0.5,"orange");
grad.addColorStop(1,"yellow");
canvas.fillStyle=grad;
canvas.fillRect(0,0,500,500);
</script>