[HTML5技术]HTML5版径向渐变梯度色彩

图片：1705418co84ogpgd7pmdd8.jpg

// Get angle color function
function getAngleColor(angle) {
 var color, d;

 if (angle < Math.PI * 2 / 5) { // angle: 0-72
 d = 255 / (Math.PI * 2 / 5) * angle;
 color = '255,' + Math.round(d) + ',0'; // color: 255,0,0 - 255,255,0
 } else if (angle < Math.PI * 4 / 5) { // angle: 72-144
 d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5);
 color = (255 - Math.round(d)) + ',255,0'; // color: 255,255,0 - 0,255,0
 } else if (angle < Math.PI * 6 / 5) { // angle: 144-216
 d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5);
 color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255
 } else if (angle < Math.PI * 8 / 5) { // angle: 216-288
 d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5);
 color = '0,'+(255 - Math.round(d)) + ',255'; // color: 0,255,255 - 0,0,255
 } else { // angle: 288-360
 d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5);
 color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0
 }
 return color;
}

// inner variables
var iSectors = 360;
var iSectorAngle = (360 / iSectors) / 180 * Math.PI; // in radians

// Draw radial gradient function
function drawGradient() {

 // prepare canvas and context objects
 var canvas = document.getElementById('gradient');
 var ctx = canvas.getContext('2d');

 // clear canvas
 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

 // save current context
 ctx.save();

 // move to center
 ctx.translate(canvas.width / 2, canvas.height / 2);

 // draw all sectors
 for (var i = 0; i < iSectors; i++) {

 // start and end angles (in radians)
 var startAngle = 0;
 var endAngle = startAngle + iSectorAngle;

 // radius for sectors
 var radius = (canvas.width / 2) - 1;

 // get angle color
 var color = getAngleColor(iSectorAngle * i);

 // draw a sector
 ctx.beginPath();
 ctx.moveTo(0, 0);
 ctx.arc(0, 0, radius, startAngle, endAngle, false);
 ctx.closePath();

 // stroke a sector
 ctx.strokeStyle = 'rgb('+color+')';
 ctx.stroke();

 // fill a sector
 ctx.fillStyle = 'rgb('+color+')';
 ctx.fill();

 // rotate to the next sector
 ctx.rotate(iSectorAngle);
 }

 // restore context
 ctx.restore();
}

// initialization
if(window.attachEvent) {
 window.attachEvent('onload', drawGradient);
} else {
 if(window.onload) {
 var curronload = window.onload;
 var newonload = function() {
 curronload();
 drawGradient();
 };
 window.onload = newonload;
 } else {
 window.onload = drawGradient;
 }
}