调色盘canvas

//调色盘

function draw8(id){

var canvas = document.getElementById(id);

var context = canvas.getContext('2d');

canvas.width = '500';

canvas.height = '250';

context.clearRect(0, 0, 500, 250);

var hGrad = context.createLinearGradient(0, 0, 500, 0);

hGrad.addColorStop(0 / 6, '#F00');

hGrad.addColorStop(1 / 6, '#FF0');

hGrad.addColorStop(2 / 6, '#0F0');

hGrad.addColorStop(3 / 6, '#0FF');

hGrad.addColorStop(4 / 6, '#00F');

hGrad.addColorStop(5 / 6, '#F0F');

hGrad.addColorStop(6 / 6, '#F00');

context.fillStyle = hGrad;

context.fillRect(0, 0, 500, 250);

var vGrad = context.createLinearGradient(0, 0, 0, 250);

vGrad.addColorStop(0, 'rgba(255, 255, 255, 0)');

vGrad.addColorStop(1, 'rgba(255, 255, 255, 1)');

//vGrad.addColorStop(0, 'rgba(0, 0, 0, 0)');

//vGrad.addColorStop(1, 'rgba(0, 0, 0, 1)');

context.fillStyle = vGrad;

context.fillRect(0, 0, 500, 250);

}

//调色盘单条灰度

function draw9(id){

var canvas = document.getElementById(id);

var context = canvas.getContext('2d');

canvas.width = '50';

canvas.height = '250';

context.clearRect(0, 0, 50, 250);

context.fillStyle = "darkcyan";

context.fillRect(0, 0, 50, 250);

var vGrad = context.createLinearGradient(0, 0, 0, 250);

//vGrad.addColorStop(0, 'rgba(255, 255, 255, 0)');

//vGrad.addColorStop(1, 'rgba(255, 255, 255, 1)');

vGrad.addColorStop(0, 'rgba(0, 0, 0, 0)');

vGrad.addColorStop(1, 'rgba(0, 0, 0, 1)');

context.fillStyle = vGrad;

context.fillRect(0, 0, 50, 250);

}