communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Explication détaillée de la façon de spécifier la couleur et la transparence lors du dessin des compétences du didacticiel HTML5 Canvas_html5

Explication détaillée de la façon de spécifier la couleur et la transparence lors du dessin des compétences du didacticiel HTML5 Canvas_html5

WBOY
Libérer： 2016-05-16 15:45:15
original
2179 Les gens l'ont consulté

Spécifiez la couleur

Le noir est la couleur par défaut pour le dessin sur toile. Si vous souhaitez le changer en une autre couleur, vous devez spécifier la couleur avant de dessiner.

Code JavaScriptCopier le contenu dans le presse-papiers
  1. ctx.StrokeStyle = couleur

Spécifiez la couleur de la ligne tracée :

Code JavaScriptCopier le contenu dans le presse-papiers
  1. ctx.fillStyle = couleur

Spécifiez la couleur du remplissage :
Voyons un exemple pratique :

JavaScript

Code JavaScriptCopier le contenu dans le presse-papiers
  1. onload = fonction() {
  2. dessiner();
  3. };
  4. fonction draw() {
  5. var canvas = document.getElementById('c1'
    6. );
  6. if ( ! canvas || ! canvas.getContext ) { return false ;}
  7. var ctx = canvas.getContext('2d'
    8. );
  8. ctx.beginPath();
  9. ctx.fillStyle = 'rgb(192, 80, 77)' // Rouge
  10. ctx.arc(70, 45, 35, 0, Math.PI*2, faux
    11. );
  11. ctx.fill();
  12. ctx.beginPath();
  13. ctx.fillStyle = 'rgb(155, 187, 89)' // Vert
  14. ctx.arc(45, 95, 35, 0, Math.PI*2, faux
    15. );
  15. ctx.fill();
  16. ctx.beginPath();
  17. ctx.fillStyle = 'rgb(128, 100, 162)' // Violet
  18. ctx.arc(95, 95, 35, 0, Math.PI*2, faux
    19. );
  19. ctx.fill();
  20. }

L'effet est le suivant :
2016325112217008.png (142×142)

Spécifier la transparence

Tout comme dans le CSS ordinaire, on peut aussi apporter une valeur alpha lors de la spécification de la couleur (mais elle n'est pas beaucoup utilisée, et elle n'était pas supportée avant IE9). Regardez le code :

JavaScript

Code JavaScriptCopier le contenu dans le presse-papiers
  1. onload = fonction() {   
  2.   dessiner();   
  3. } ;   
  4. fonction 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. }   

结果就是下面这样：
2016325112248089.png (142×142)

和上面的代码基本没变化 ， 就是把 rgb (r, g, b) 变成了 rgba (r, g, b, a) 而已 ， a 的值也是 0 ~ 1，0 表示完全透明 ， 1 "不透明度"）。


全局透明globalAlpha
这个也是很简单的一个属性，默认值为1.0，代表完全不透明，取0.0（完全透明）~1.0。这个属性与阴影设置是一样的，如果不想针对全局设置不透明度，就得在下次绘制前重置globalAlpha。

总结一下：基于状态的属性有哪些？

——globalAlpha

——globalCompositeOpeartion

——StrokeStyle

——textAlign,textBaseline

——lineCap,lineJoin,lineWidth,miterLimit

——fillStyle

——police

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
我们通过一个代码，来体验一下globalAlpha的神奇之处~

Code JavaScript复制内容到剪贴板
  1.   
  2. "zh">   
  3.   
  4.     "UTF-8">   
  5.     全局透明   
  6.        
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas">   
  11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.        
  
  •   
  • <script>   </span></li> <li class="alt"> <span>    window.onload = </span><span class="keyword">fonction</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"><span>        canvas.width = 800 ;   </span></li> <li><span>        canvas.height = 600 ;   </span></li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"><span>        context.fillRect(0,0,800,600);   </span></li> <li><span>  </span></li> <li class="alt"><span>        context.globalAlpha = 0,5 ;   </span></li> <li><span>  </span></li> <li class="alt"> <span>        </span><span class="keyword">pour</span><span>(</span><span class="keyword">var</span><span> i=0; i<=50; i ){   </span></li> <li><span>            </span><span class="keyword">var</span><span> R = Math.floor(Math.random() * 255);   </span></li> <li class="alt"><span>            </span><span class="keyword">var</span><span> G = Math.floor(Math.random() * 255);   </span></li> <li><span>            </span><span class="keyword">var</span><span> B = Math.floor(Math.random() * 255);   </span></li> <li class="alt"><span>  </span></li> <li><span>            context.fillStyle = </span><span class="string">"rgb("</span><span>   R   </span><span class="string">","</span><span>   G   </span><span class="string">" ,"</span><span>   B   </span><span class="string">")"</span><span>;   </span></li> <li class="alt"><span>  </span></li> <li><span>            context.beginPath();   </span></li> <li class="alt"><span>            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);   </span></li> <li><span>            context.fill();   </span></li> <li class="alt"><span>        }   </span></li> <li><span>    } ;   </span></li> <li class="alt"><span></script>   
  •   
  •   

    • 运行结果：
    2016325112320763.jpg (850×500)

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

    Étiquettes associées：
    canvas html5 透明度 颜色
    source：php.cn
    Article précédent：Comment utiliser les événements d'entrée pour surveiller les conseils du didacticiel mobile input_html5 Article suivant：Analyse approfondie de la méthode de contrôle de la transformation de la matrice graphique en HTML5 Compétences du didacticiel Canvas_html5
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
    Depuis 2024-04-06 15:33:12
    0
    1
    433
    Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
    Depuis 2024-04-05 12:57:00
    0
    1
    456
    Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
    Depuis 2024-04-02 11:47:56
    0
    1
    275
    Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
    Depuis 2024-04-01 20:42:38
    0
    1
    259
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal