HTML5描画時の色と透明度の指定方法を詳しく解説 Canvas_html5チュートリアルスキル

色の指定

キャンバス描画のデフォルトの色は黒です。別の色に変更したい場合は、実際に描画する前に色を指定する必要があります。

JavaScript コードコンテンツをクリップボードにコピーします

1. ctx.bloodStyle = color

描画する線の色を指定します:

JavaScript コードコンテンツをクリップボードにコピーします

1. ctx.fillStyle = color

塗りつぶしの色を指​​定します:
実際の例を見てみましょう:

JavaScript

JavaScript コードコンテンツをクリップボードにコピーします

1. onload = 関数() {
2. 描画()
3. };
4. 関数draw() {
5. var Canvas = document.getElementById('c1');
6. if ( ! Canvas || ! Canvas.getContext ) { return false }
7. var ctx = Canvas.getContext('2d'); ctx.beginPath();
8. ctx.fillStyle =
'rgb(192, 80, 77)'
9. ; // 赤 ctx.arc(70, 45, 35, 0, Math.PI*2,
false
10. ); ctx.fill();
ctx.beginPath();
ctx.fillStyle =
12. 'rgb(155, 187, 89)'
;
13. // 緑 ctx.arc(45, 95, 35, 0, Math.PI*2, false
);
14. ctx.fill(); ctx.beginPath();
15. ctx.fillStyle =
'rgb(128, 100, 162)'
16. ;
// 紫
17. ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
18. }
19. 効果は次のとおりです:
20. 透明度を指定します

通常の CSS と同様に、色を指定するときにアルファ値を持ってくることもできます (ただし、これはあまり使用されておらず、IE9 より前ではサポートされていませんでした)。コードを見てください:

JavaScript

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. }

結果就是下这样：

と上の番号は基本的に変更されていません。つまり、rgb(r, g, b) が rgba(r, g, b, a) になっていますが、a の値も 0 ～ 1、0 は完全に透明、1 を示しますこれは完全に不透明です (アルファの値は実際には「不透明度」です)。

全局透明globalAlpha
これも非常に単一のプロパティであり、値は 1.0 で、完全な不透明を表し、値の範囲は 0.0 (完全透明) ～ 1.0 です。エフェクトの設定も同様であり、局所的な設定の不透明度が望ましくない場合は、次の作成前に globalAlpha が設定されます。 总结一下：ステータスに基づくプロパティにはいくつかありますか?

——グローバルアルファ

——グローバル複合操作

——ストロークスタイル

——textAlign、textBaseline

——lineCap、lineJoin、lineWidth、miterLimit

——fillStyle

——フォント

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY

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

JavaScript コード

复制コンテンツ到剪贴板

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

<スクリプト>   

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;   

for(var i=0; i<=50; 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();   

}

};   

  

  

  

运行結果：

は非日常的な酷ですか？