Gradient hình chữ nhật với phần tử Canvas HTML5

Làm cách nào để vẽ hình chữ nhật có hiệu ứng tô màu như hình ảnh bên dưới bằng phần tử canvas HTML5?Gradient hình chữ nhật với phần tử Canvas HTML5

sample

Chỉnh sửa: Cảm ơn mọi phản hồi. Có, tôi đã thử nhiều phương pháp. Ví dụ: tôi có thể sử dụng phương thức createRadialGradient như @Loktar đề xuất không? Dưới đây là một số mẫu mã:

<html> 
    <head> 
    <title>test</title> 
     <script type="application/x-javascript"> 
     function draw() { 
      var canvas = document.getElementById("canvas"), 
      ctx = canvas.getContext("2d"); 

      var grad1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 50); 
      grad1.addColorStop(0, 'rgba(255, 252, 0, 1)'); 
      grad1.addColorStop(1, 'rgba(68, 205, 37, 1)'); 

      ctx.fillStyle = grad1; 
      ctx.fillRect(0, 0, 100, 100); 
     } 
    </script> 
    </head> 
    <body onload="draw();"> 
    <div> 
     <canvas id="canvas" width="100" height="100"></canvas> 
    </div> 
    </body> 
</html>

Nhưng kết quả không phải là khá những gì tôi muốn:

result

này nên được thực hiện một cách dễ dàng với một phương pháp như PathGradientBrush cung cấp bởi GDI +. Tôi không chắc chắn là có thể với phần tử canvas HTML5.

Nguồn

2011-08-11 dreamsfrag

Bạn đã thử gì cho đến nay? p.s. https://developer.mozilla.org/en/Canvas_tutorial%3aApplying_styles_and_colors 5 phút và bạn sẽ có thể làm được! – stecb

heh idk khoảng 5 phút. Heres nỗ lực khủng khiếp của tôi, thậm chí sẽ không đăng nó như là câu trả lời http://jsfiddle.net/loktar/MAjPQ/1/ – Loktar

obv '5 phút' có nghĩa là nó dễ dàng để đọc tài liệu đó và cố gắng để có được một giải pháp dễ dàng :) – stecb

Bạn có thể thử sử dụng kết hợp giữa dốc tuyến tính và cắt. Demo. Mã số:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var outerColor = 'rgba(68,205,37,1)'; 
var innerColor = 'rgba(255,252,0,1)'; 

var w = 200; 
var h = 50; 
canvas.width = w; 
canvas.height = h; 

function gradient(dir) { 
    var grad = ctx.createLinearGradient(dir[0], dir[1], dir[2], dir[3]); 

    grad.addColorStop(0, outerColor); 
    grad.addColorStop(0.5, innerColor); 
    grad.addColorStop(1.0, outerColor); 

    return grad; 
} 

// idea: render background gradient and a clipped "bow" 
function background() { 
    ctx.fillStyle = gradient([0, 0, 0, h]); 
    ctx.fillRect(0, 0, w, h); 
} 

function bow() { 
    ctx.save(); 

    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(w, h); 
    ctx.lineTo(w, 0); 
    ctx.lineTo(0, h); 
    ctx.clip(); 

    ctx.fillStyle = gradient([0, 0, w, 0]); 
    ctx.fillRect(0, 0, w, h); 

    ctx.restore(); 
} 

background(); 
bow();

Nguồn

2011-08-24 18:43:56

Cảm ơn rất nhiều !!! – dreamsfrag

Gradient hình chữ nhật với phần tử Canvas HTML5

Trả lời

Các vấn đề liên quan