Tôi đang nhắm mục tiêu đến google chrome. Có thể vẽ hình ảnh trong suốt trên canvas không? Bằng cách trong suốt, tôi có nghĩa là vẽ toàn bộ hình ảnh ở mức độ mờ đục 50%.Cách vẽ hình ảnh trong suốt bằng phần tử canvas html5
Phần tử canvas có thuộc tính alpha chung cho phép bạn áp dụng tính minh bạch một phần cho bất kỳ thứ gì bạn vẽ.
Ít nhất là trong phiên bản chrome 4.1.249.1045 nó hoạt động. –
@Mr. Bell: +1 với Chrome cho điều đó. –
Điều này làm việc cho tôi. +1 – dariopy
Có thể nếu bạn lặp lại thông qua dữ liệu hình ảnh của canvas và đặt giá trị alpha theo cách thủ công, sau đó xuất hình ảnh trong suốt bằng phương thức canvas.toDataURL và chèn hình ảnh đó vào canvas khác.
Bạn không cần phải gọi đếnDataURL nếu bạn muốn vẽ một khung hình khác, 'drawImage' chấp nhận canvas là imageSource. – Kaiido
Bạn có thể làm điều này bằng cách sử dụng tài sản globalAlpha, như thế này:
<!DOCTYPE HTML>
<html>
<body>
<canvas height="100" width="100" id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.globalAlpha = 0.5;
var myImage = new Image();
myImage.src = "someImage.jpg";
myImage.onload = function()
{
context.drawImage(myImage, 0, 0, 100, 100);
};
</script>
</body>
</html>
Và có, nó không làm việc với hình ảnh. Đã xác minh với IE 9, FF 5, Safari 5 và Chrome 12 trên Win 7.
'globalAlpha' sẽ không hoạt động đối với hình ảnh được vẽ bằng' drawImage' trong Firefox 30+: https://bugzilla.mozilla.org/show_bug.cgi?id=1028288 –
@ Derek, lỗi này chỉ liên quan đến hình ảnh svg. – Kaiido
Bạn có muốn khung hình trong suốt để bạn có thể đặt nó lên các phần tử khác không? – Justin
Không, không thể. Xem câu trả lời này: http://stackoverflow.com/questions/2359537/how-to-change-the-opacity-alpha-transparency-of-an-element-in-a-canvas-element – Intelekshual
Justin, không, tôi muốn vẽ hình bán trong suốt lên trên phần tử canvas khác. Tôi không quan tâm đến việc làm cho toàn bộ khung hình trong suốt. Intelekshual, thiết lập bối cảnh.globalAlpha hiệu ứng tiếp theo context.drawImages ít nhất trong Chrome. –