html5画布渐变,HTML5画布渐变模式'from center'

var canvas, ctx;

function draw_triangle(x1, y1, x2, y2, x3, y3, grd){

ctx.beginPath();

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.lineTo(x3, y3);

ctx.lineTo(x1, y1);

ctx.fillStyle = grd;

ctx.fill();

ctx.lineWidth=0;

//ctx.stroke();

//ctx.strokeStyle="#fff";

ctx.closePath();

}

function color_triangle(x1, y1, x2, y2, tx1, ty1, tx2, ty2, tx3, ty3){

var grd = ctx.createLinearGradient(x1, y1, x2, y2);

grd.addColorStop(0, "#000000");

grd.addColorStop(1, "#ffffff");

draw_triangle(tx1, ty1, tx2, ty2, tx3, ty3, grd);

}

function draw_rect(x, y, w, h){

color_triangle(x+w/2, y, x+w/2,y+h/2, x, y, x+w/2, y+h/2, x+w, y);

color_triangle(x+w, y+h/2, x+w/2, y+h/2, x+w/2, y+h/2, x+w,y+ h, x+w, y);

color_triangle(x, y+h/2, x+w/2, y+h/2, x+w/2, y+h/2, x, y+h, x, y);

color_triangle(x+w/2, y+h, x+w/2, y+h/2, x+w/2, y+h/2, x+w, y+h, x, y+h);

}

function viewDidLoad(){

canvas = document.getElementById("canvas");

ctx = canvas.getContext("2d");

canvas.height = 800;

canvas.width = 800;

draw_rect(10, 10, 200, 200);

draw_rect(220, 10, 300, 100);

draw_rect(10, 220, 100, 300);

draw_rect(120, 220, 400, 300);

}

window.onload = viewDidLoad;