createRadialGradient() trong Canvas

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ! DOCTYPE html > < html > < body > < canvas ...

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 100);

</script>

</body>

</html>

Demo

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
createRadialGradient()	4.0	2.0	9.0	3.1	9.0

Phương thức createRadialGradient() dùng để tạo ra một đối tượng dải màu dạng tròn.

Dải màu này có thể dùng để đổ lên hình chữ nhật, hình tròn, đường thẳng, chữ, v.v…

Mẹo: Có thể sử dụng đối tượng này làm giá trị cho thuộc tính strokeStyle hoặc fillStyle.

Mẹo: Sử dụng phương thức addColorStop() để thêm màu sắc và vị trí của màu trong dải màu.

Cú pháp JavaScript: context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Tham số	Miêu tả
x0	Tọa độ X của tâm đường tròn bắt đầu dải màu
y0	Tọa độ Y của tâm đường tròn bắt đầu dải màu
r0	Bán kính của đường tròn bắt đầu
x1	Tọa độ X của tâm đường tròn kết thúc dải màu
y1	Tọa độ Y của tâm đường tròn kết thúc dải màu
r1	Bán kính của đường tròn kết thúc

Bình luận về bài viết này

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết