HTML5 Canvas_html5 튜토리얼 스킬을 그릴 때 색상 및 투명도를 지정하는 방법에 대한 자세한 설명

색상 지정

검정색은 캔버스 그리기의 기본 색상입니다. 다른 색상으로 변경하려면 실제로 그리기 전에 색상을 지정해야 합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. ctx.StrokeStyle = 색상

그려진 선의 색상 지정:

JavaScript 코드클립보드에 콘텐츠 복사

1. ctx.fillStyle = 색상

채우기 색상 지정:
실제 예를 살펴보겠습니다.

자바스크립트

JavaScript 코드클립보드에 콘텐츠 복사

1. onload = 함수() {
2. draw()
3. }
4. 함수 draw() {
5. var canvas = document.getElementById('c1');
6. if ( ! canvas || ! canvas.getContext ) { return false }
7. var ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle =
9. 'rgb(192, 80, 77)' // 빨간색
ctx.arc(70, 45, 35, 0, Math.PI*2,
10. false); ctx.fill()
11. ctx.beginPath()
12. ctx.fillStyle =
'rgb(155, 187, 89)'
13. // 녹색 ctx.arc(45, 95, 35, 0, Math.PI*2,
false
14. ); ctx.fill()
ctx.beginPath()
ctx.fillStyle =
16. 'rgb(128, 100, 162)'
;
17. // 보라색 ctx.arc(95, 95, 35, 0, Math.PI*2, false
);
18. ctx.fill() }
효과는 다음과 같습니다.

투명도 지정

일반 CSS와 마찬가지로 색상을 지정할 때 알파 값을 가져올 수도 있습니다(그러나 많이 사용되지 않으며 IE9 이전에는 지원되지 않았습니다). 코드를 보세요:
자바스크립트

JavaScript 코드

클립보드에 콘텐츠 복사

1. onload = 함수() {   
2.   draw();   
3. };   
4. 함수 draw() {   
5.   var canvas = document.getElementById('c1');   
6.   if ( ! canvas || ! canvas.getContext ) { return false ; }   
7.   var ctx = canvas.getContext('2d');   
8.   ctx.beginPath();   
9.   ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //   
10.   ctx.arc(70, 45, 35, 0, Math.PI*2, false);   
11.   ctx.fill();   
12.   ctx.beginPath();   
13.   ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //   
14.   ctx.arc(45, 95, 35, 0, Math.PI*2, false);   
15.   ctx.fill();   
16.   ctx.beginPath();   
17.   ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //   
18.   ctx.arc(95, 95, 35, 0, Math.PI*2, false);   
19.   ctx.fill();   
20. }   

结果就是하면这样：

전체局透명globalAlpha
这个也是很简单的一个属性，默认值为1.0，代表完全不透明，取值范围是0.0（完全透明)~1.0。这个属性与阴影设置是一样的, 如果不想针对全局设置不透明島，就得下次绘官前 重置globalAlpha.

总结一下：基于状态性属性이 있나요?

——globalAlpha

——globalCompositeOpeartion

——스트로크스타일

——textAlign,textBaseline

——lineCap,lineJoin,lineWidth,miterLimit

——fillStyle

——글꼴

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY

我们通过一个代码，来体验一下globalAlpha的神奇の处~

JavaScript 코드复复内容到剪贴板

1. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

  

  

  

    window.onload = 함수(){   

        var canvas = document.getElementById("canvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

        context.fillStyle = "#FFF";   

        context.fillRect(0,0,800,600);   

  

        context.globalAlpha = 0.5;   

  

        (var i=0; i

            var R = Math.floor(Math.random() * 255);   

            var G = Math.floor(Math.random() * 255);   

            var B = Math.floor(Math.random() * 255);   

  

           context.fillStyle = "rgb("   R   ","   G   " ,"   B   ")";   

  

            context.beginPath();   

            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);   

            context.fill();   

        }   

    };   

  

  

  

运行结果：

是不是不常的酷?终于有点艺术家范儿了吧。