자바스크립트(JavaScript) - canvas 색채우기, 캔버스태그, HTML5 canvas채우기 스타일(색상) 지정하기 (fillStyle;채우기, globalAlpha;투명도 ) [펌]

<canvas id="myCanvas" height="400" width="400" style="border:red 1px solid"></canvas>

<script type="text/javascript">
    var ctx = document.getElementById('myCanvas').getContext("2d");

    // 단색으로 채우기 ; 투명도 1.0
    ctx.lineWidth = "15";
    ctx.strokeStyle = "blue";
    ctx.strokeRect(30,30,150,150);
    ctx.fillStyle = 'red'; // 채우기 색 지정
    ctx.globalAlpha = "1.0"; // 채우기 투명도 설정
    ctx.fillRect(30,30,150,150);

    //단색으로 채우기 ; 투명도 0.1
    ctx.fillStyle = "red";
    ctx.globalAlpha = "0.1";
    ctx.fillRect(200,30,150,150);

    //단색으로 채우기 ; 투명도 0.4
    ctx.fillStyle = "red";
    ctx.globalAlpha = "0.4";
    ctx.fillRect(30,200,150,150);


    //단색으로 채우기 ; 투명도 0.7
    ctx.fillStyle = "red";
    ctx.globalAlpha = "0.7";
    ctx.fillRect(200,200,150,150);

</script>

---

HTML5 canvas - 채우기 스타일 지정하기 (fillStyle, globalAlpha)

 

* fill() 메소드 사용하는 경우에 fillStyle, globalAlpha 사용

※ stroke() <=> strokeStyle 속성

 

 

* 속성

- fillStyle => 채우기 색 지정

- globalAlpha => 색의 투명도 값 (0.0 ~1.0 ) 지정 

 

 

결과보기 > 

 

 

 

 

출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=javaking75&logNo=140170247450 

HTML5 canvas - 채우기 스타일(색상) 지정하기 (fillStyle;채우기, globalAlpha;투명도 )