19/09/2018, 15:01

globalAlpha trong Canvas

Đầu tiên, vẽ một hình chữ nhật màu đỏ, sau đó thiết lập độ mờ (globalAlpha) là 0.5 và vẽ hai hình chữ nhật, một màu đỏ, một màu xanh: 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 ...

Đầu tiên, vẽ một hình chữ nhật màu đỏ, sau đó thiết lập độ mờ (globalAlpha) là 0.5 và vẽ hai hình chữ nhật, một màu đỏ, một màu xanh:

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");

ctx.fillStyle = "red";

ctx.fillRect(20, 20, 75, 50);

//Độ mờ on

ctx.globalAlpha = 0.2;

ctx.fillStyle = "blue";

ctx.fillRect(50, 50, 75, 50);

ctx.fillStyle = "green";

ctx.fillRect(80, 80, 75, 50);

</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
globalAlpha	4.0	2.0	9.0	3.1	9.0

Thuộc tính globalAlpha dùng để thiết lập hoặc trả về độ mờ hiện tại của hình vẽ.

Giá trị thuộc tính globalAlpha từ 0.0 (mờ hoàn toàn) đến 1.0 (không mờ).

Giá trị mặc định: 1.0

Cú pháp JavaScript: context.globalAlpha=number;

Giá trị thuộc tính

Giá trị	Miêu tả
number	Độ mờ, là một số từ 0.0 (mờ hoàn toàn) đến 1.0 (không mờ)

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

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết