HTML5 캔버스 그래디언트 모드 '중심에서'

Question

HTML5 캔버스에서 기본 스타일로 이와 같은 그래디언트 스타일을 만드는 방법은 무엇입니까? 감사 !!!

Sample Image

Answer 1

정말 기본적으로이 일을하는 방법이 의심하지만, 대신이 같은 그라데이션의 배경으로 추가 할 모양을 만들 수 있습니다 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; 

: 여기 http://edumax.org.ro/extra/new/gradienttut/ 및 코드입니다