html代码
<body>
<canvas id="canvas"></canvas>
</body>
javascript代码
var canvas = document.getElementById("canvas");
var context= canvas.getContext("2d");
// context.fillStyle = "#f00";
// context.fillRect(0,0,150,150);
context.beginPath();
var grad = context.createLinearGradient(0,0,0,100);
grad.addColorStop(0,'#ff0'); // 黄
grad.addColorStop(0.5,'#00f'); // 蓝
grad.addColorStop(1,'#0ff'); //青
context.fillStyle = grad;
context.arc(50,50,50,0,2*Math.PI,true);
context.fill();
效果
画径向渐变的只要把createLinearGradient改个createRadialGradient方法,设置下参数
context.createRadialGradient(50,50,0,50,50,50);
效果