6
如何使用HTML5畫布元素繪製具有如下圖所示漸變效果的矩形?使用HTML5畫布元素的矩形漸變
編輯:感謝所有的反饋。是的,我已經嘗試了很多方法。例如,我可以使用@Loktar建議的createRadialGradient
方法嗎?下面是一些示例代碼:
<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>
但結果不是很我想要的:
這應該是由GDI +提供像PathGradientBrush
的方法很容易做到。 我不確定是否可以使用HTML5 canvas元素。
你到目前爲止嘗試過什麼?附: https://developer.mozilla.org/en/Canvas_tutorial%3aApplying_styles_and_colors 5分鐘,你就能做到! – stecb
heh idk約5分鐘。繼承人我可怕的企圖,甚至不會將它作爲回答http://jsfiddle.net/loktar/MAjPQ/1/ – Loktar
obv'5分鐘'意味着它很容易閱讀該文檔,並嘗試輕鬆獲得解決方案:) – stecb