<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
var canvasGra = context.createLinearGradient(0,0,0,500);
canvasGra.addColorStop(0,"rgba(255,0,0,0.5)");
canvasGra.addColorStop(0.25,"rgba(0,255,0,0.5)");
canvasGra.addColorStop(0.5,"rgba(0,0,255,0.5)");
canvasGra.addColorStop(0.75,"rgba(0,255,255,0.5)");
canvasGra.addColorStop(1,"rgba(255,255,255,0.5)");
context.fillStyle = canvasGra;
for(var i=1;i<8;i++)
{
context.beginPath();
context.arc(i*50,i*50,i*20,0,2*Math.PI,true);
context.fill();
}
</script>
</html><html lang="en-US">
<canvas id=myCanvas width=5
阅读背景：
【Html5每日练习】canvas绘制线性渐变图形
来源：互联网
分享到：
