HTML5 画布渐变模式“从中心”答案

【问题标题】：HTML5 canvas gradient mode 'from center'HTML5 画布渐变模式“从中心”
【发布时间】：2012-08-22 10:59:07
【问题描述】：

在 HTML5 画布中创建这样的渐变样式的原生方式是什么？谢谢！！！

【问题讨论】：

我所知道的画布的唯一渐变是线性和径向的，这两者都不能（据我所知）用单个渐变来做到这一点。但是，您可以制作 4 个三角形，每个三角形都填充有线性渐变。

【解决方案1】：

我真的怀疑是否有一种方法可以原生地做到这一点，但您可以创建形状以添加为背景而不是像这样的渐变：http://edumax.org.ro/extra/new/gradienttut/ 这是代码：http://edumax.org.ro/extra/new/gradienttut/script.js

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;

【讨论】：