html - HTML5 画布渐变模式“从中心”

Question

HTML5画布中创建这样的渐变样式的本机方式是什么？谢谢 ！！！

示例图像

Answer 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;