English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
globalAlpha는 Canvas 2D API는 canvas에 그리기 전에 그래픽과 이미지 투명도를 설정하는 속성을 설명합니다. 범위는 0.0 (완전 투명)에서1.0 (完全不透明)。
首先,绘制一个红色矩形,然后将透明度(globalAlpha)设置为0.5,然后绘制一个蓝色和绿色矩形:
<!DOCTYPE html> <html> <head> <meta charset="utf-8> <title>HTML canvas globalAlpha 속성 사용-기본 튜토리얼(w3(codebox.com)</<title> </<head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3> 您的浏览器不支持 HTML5 canvas 태그. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(20,20,75,50); //전환 투명도 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>테스트를 보세요 ‹/›
IEFirefoxOperaChromeSafari
Internet Explorer 9Firefox, Opera, Chrome 및 Safari는 globalAlpha 속성을 지원합니다.
주의:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
globalAlpha 속성은 그래픽의 현재 alpha 또는 투명도 값을 설정하거나 반환합니다.
globalAlpha 속성 값은 0.0(완전 투명)과1.0(불투명도 없음) 사이의 숫자.
기본 값: | 1.0 |
---|---|
JavaScript 문법: | context.globalAlpha=number; |
값 | 설명 |
---|---|
number | 투명도 값은 0.0(완전 투명)과 1.0(불투명) 사이. |