HTML5 tuval öğesini kullanarak aşağıda gösterildiği gibi bir degrade efekti olan bir dikdörtgeni nasıl çizebilirim?HTML5 Canvas Elemanı ile Dikdörtgen Degrade
Düzenleme: tüm görüşleriniz için teşekkürler. Evet, birçok yöntemi denedim. Örneğin, @Loktar önerileri gibi createRadialGradient
yöntemini kullanabilir miyim? İşte bazı örnek kod:
<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>
Ama sonuç ne istiyorum oldukça değildir: Bu GDI + tarafından sağlanan PathGradientBrush
gibi bir yöntemle kolayca yapılmalıdır
. HTML5 kanvas öğesiyle mümkün olmadığından emin değilim.
Şimdiye kadar neler denediniz? Not; https://developer.mozilla.org/en/Canvas_tutorial%3aApplying_styles_and_colors 5 dak ve bunu yapabileceksiniz! – stecb
heh idk yaklaşık 5 dakika. Heres benim horrid girişimi, hatta cevap olarak göndermek için bile gidemiyorum http://jsfiddle.net/loktar/MAjPQ/1/ – Loktar
obv '5 dak', bu dokümanı okumak ve kolayca bir çözüm bulmaya çalışmak kolay anlamına gelir :) – stecb