{"id":230,"date":"2013-08-22T22:37:50","date_gmt":"2013-08-22T21:37:50","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=230"},"modified":"2019-04-20T18:02:07","modified_gmt":"2019-04-20T16:02:07","slug":"et-maintenant-ajoutons-quelques-couleurs","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/","title":{"rendered":"[JavaScript\/HTML5] Et maintenant ajoutons quelques couleurs"},"content":{"rendered":"\n<p>Dans mon pr\u00e9c\u00e9dent article <a href=\"https:\/\/wp.me\/p2IoOb-3p\">Amusons-nous avec les canvas<\/a>, nous \u00e9tions arriv\u00e9s au r\u00e9sultat ci-dessous:<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/geekcommunicant.com\/iframes\/canvas03.html\" width=\"100%\" height=\"300\"><\/iframe>\n\n\n\n<p>Nous avons donc ici un effet que l&rsquo;on aurait pu obtenir en CSS. Mais gr\u00e2ce aux <code>&lt;canvas&gt;<\/code> nous pouvons \u00e0 pr\u00e9sent remplir notre texte avec autre chose qu&rsquo;une unique couleur ; avec les <code>&lt;canvas&gt;<\/code> on peut utiliser des d\u00e9grad\u00e9s, ainsi que des images.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Les d\u00e9grad\u00e9s<\/h2>\n\n\n\n<p>Avec les <code>&lt;canvas&gt;<\/code> nous disposons de deux types de d\u00e9grad\u00e9s pour remplir notre texte:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>les d\u00e9grad\u00e9s lin\u00e9aires<\/li><li>les d\u00e9grad\u00e9s radiaux.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Les d\u00e9grad\u00e9s lin\u00e9aires<\/h3>\n\n\n\n<p>La d\u00e9claration d&rsquo;un d\u00e9grad\u00e9 lin\u00e9aire se fait de la mani\u00e8re suivante:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar grd = ctx.createLinearGradient(100,0,400,0);\n<\/pre><\/div>\n\n\n<p>Dans l&rsquo;exemple ci-dessus, nous avons cr\u00e9\u00e9 un d\u00e9grad\u00e9 lin\u00e9aire entre les points 100,0 et 400,0 du <code>&lt;canvas&gt;<\/code>. Il est donc possible le cr\u00e9er un d\u00e9grad\u00e9 suivant une \u00ab\u00a0diagonale\u00a0\u00bb de notre <code>&lt;canvas&gt;<\/code>.<\/p>\n\n\n\n<p>Cr\u00e9er un d\u00e9grad\u00e9, c&rsquo;est bien, mais maintenant il faut lui attribuer des couleurs. Pour cela on proc\u00e8de de la mani\u00e8re suivante:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ngrd.addColorStop(0,&quot;red&quot;);\ngrd.addColorStop(0.5,&quot;orange&quot;);\ngrd.addColorStop(1,&quot;yellow&quot;);\n<\/pre><\/div>\n\n\n<p>Le code ci-dessus cr\u00e9\u00e9ra donc un d\u00e9grad\u00e9 qui dans sa premi\u00e8re moiti\u00e9 ira du rouge vers l&rsquo;orange, et dans sa deuxi\u00e8me moiti\u00e9 ira de orange vers le jaune.<\/p>\n\n\n\n<p>Si maintenant on assemble tout \u00e7a avec le code d\u00e9ja existant, cela donne:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nsetTimeout(function(){\n\tvar c = document.getElementById(&#039;canvas&#039;);\n\tvar ctx = c.getContext(&#039;2d&#039;);\n\tctx.font = &#039;85px Knewave&#039;;\n\tctx.textAlign = &#039;center&#039;;\n\tvar grd=ctx.createLinearGradient(100,0,400,0);\n\tgrd.addColorStop(0,&quot;red&quot;);\n\tgrd.addColorStop(0.5,&quot;orange&quot;);\n\tgrd.addColorStop(1,&quot;yellow&quot;);\n\tctx.fillStyle = grd;\n\tctx.shadowColor = &#039;#000&#039;;\n\tctx.shadowBlur = 20;\n\tctx.fillText(&#039;Summer&#039;,250,100);\n\tctx.fillText(&#039;is magic&#039;,250,180);\n},1000);\n<\/pre><\/div>\n\n\n<p>Et nous obtenons :<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/geekcommunicant.com\/iframes\/canvas04.html\" width=\"100%\" height=\"300\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Les d\u00e9grad\u00e9s radiaux<\/h3>\n\n\n\n<p>Tout ce qui est radial implique des cercles, et les d\u00e9grad\u00e9s radiaux des <code>&lt;canvas&gt;<\/code> n&rsquo;\u00e9chappent pas \u00e0 cette r\u00e8gle.<\/p>\n\n\n\n<p>Un d\u00e9grad\u00e9 radial s&rsquo;effectue entre deux cercles dont nous pr\u00e9cisons les coordonn\u00e9es du centre ainsi que le rayon. Un exemple \u00e9tant toujours plus parlant, en voici un:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar grd=ctx.createRadialGradient(250,125,50,250,125,200);\n<\/pre><\/div>\n\n\n<p>La ligne ci-dessus cr\u00e9\u00e9 donc un d\u00e9grad\u00e9 entre deux cercles: le premier de centre 250,125 et de rayon 50, le deuxi\u00e8me de centre 250,125 et de rayon 200.<\/p>\n\n\n\n<p>L&rsquo;ajout des couleurs ce fait de la m\u00eame mani\u00e8re que pour les d\u00e9grad\u00e9s lin\u00e9aires.<\/p>\n\n\n\n<p>Avec le code :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nsetTimeout(function(){\n\tvar c = document.getElementById(&#039;canvas&#039;);\n\tvar ctx = c.getContext(&#039;2d&#039;);\n\tctx.font = &#039;85px Knewave&#039;;\n\tctx.textAlign = &#039;center&#039;;\n\tvar grd=ctx.createRadialGradient(250,125,50,250,125,200);\n\tgrd.addColorStop(0,&quot;red&quot;);\n\tgrd.addColorStop(1,&quot;yellow&quot;);\n\tctx.fillStyle = grd;\n\tctx.shadowColor = &#039;#000&#039;;\n\tctx.shadowBlur = 20;\n\tctx.fillText(&#039;Summer&#039;,250,100);\n\tctx.fillText(&#039;is magic&#039;,250,180);\n},1000);\n<\/pre><\/div>\n\n\n<p>nous obtenons :<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/geekcommunicant.com\/iframes\/canvas05.html\" width=\"100%\" height=\"300\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Les images<\/h2>\n\n\n\n<p>Pour utiliser une image pour remplir un canvas, il faut cr\u00e9er un motif (<em>pattern<\/em> en anglais).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar pat = ctx.createPattern(img,&#039;no-repeat&#039;);\n<\/pre><\/div>\n\n\n<p>L&rsquo;image utilis\u00e9e peut \u00eatre d\u00e9j\u00e0 pr\u00e9sente sur la page (dans ce cas il faut pr\u00e9alablement la r\u00e9cup\u00e9rer \u00e0 l&rsquo;aide de <code>document.getElementById<\/code>) ou alors n&rsquo;exister que dans le code. C&rsquo;est la deuxi\u00e8me m\u00e9thode que je pr\u00e9f\u00e8re. Pour cela il faut pr\u00e9alablement s&rsquo;assurer que notre image soit charg\u00e9e avant de proc\u00e9der \u00e0 toute action sur notre <code>&lt;canvas&gt;<\/code>. Pour cela, il suffit juste d&rsquo;encadrer notre code agissant sur le <code>&lt;canvas&gt;<\/code> ainsi:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nsetTimeout(function(){\n\tvar img = new Image();\n\timg.onload = function(){\n\t\t\/\/Le code contenu dans cette fonction ne sera ex\u00e9cut\u00e9e que  quand &quot;img&quot; sera charg\u00e9e\n\t\tvar c = document.getElementById(&#039;canvas&#039;);\n\t\tvar ctx = c.getContext(&#039;2d&#039;);\n\t\tctx.font = &#039;85px Knewave&#039;;\n\t\tctx.textAlign = &#039;center&#039;;\n\t\tvar pat = ctx.createPattern(img,&#039;no-repeat&#039;);\n\t\tctx.fillStyle = pat;\n\t\tctx.shadowColor = &#039;#000&#039;;\n\t\tctx.shadowBlur = 20;\n\t\tctx.fillText(&#039;Summer&#039;,250,100);\n\t\tctx.fillText(&#039;is magic&#039;,250,180);\n\t};\n\timg.src = &#039;http:\/\/thechive.files.wordpress.com\/2013\/07\/summer-girls-13.jpg&#039;;\n},1000);\n<\/pre><\/div>\n\n\n<p>Nous obtenons alors le r\u00e9sultat suivant :<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/geekcommunicant.com\/iframes\/canvas06.html\" width=\"100%\" height=\"300\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Et voil\u00e0, vous en savez maintenant assez pour cr\u00e9er de jolis titres en quelques lignes de code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans mon pr\u00e9c\u00e9dent article Amusons-nous avec les canvas, nous \u00e9tions arriv\u00e9s au r\u00e9sultat ci-dessous: Nous avons donc ici un effet que l&rsquo;on aurait pu obtenir en CSS. Mais gr\u00e2ce aux &lt;canvas&gt; nous pouvons \u00e0 pr\u00e9sent remplir notre texte avec autre &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[20],"class_list":["post-230","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-canvas"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-3I","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":211,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/11\/amusons-nous-avec-les-canvas\/","url_meta":{"origin":230,"position":0},"title":"[JavaScript\/HTML5] Amusons-nous avec les canvas","author":"geekc","date":"11\/08\/2013","format":false,"excerpt":"Aujourd'hui nous allons voir comment ajouter du texte aux nouveaux \u00e9l\u00e9ments <canvas> du HTML5. Comme les plus attentifs d'entre-vous l'auront d\u00e9j\u00e0 remarqu\u00e9, le titre de l'article r\u00e9v\u00e8le d\u00e9j\u00e0 une partie du contenu de l'article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript. Le HTML La d\u00e9claration\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1011,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/23\/degrades-css\/","url_meta":{"origin":230,"position":1},"title":"Les d\u00e9grad\u00e9s en CSS","author":"geekc","date":"23\/12\/2022","format":false,"excerpt":"Comme sous-entendu dans un pr\u00e9c\u00e9dent gloubi tuto, il est maintenant possible avec CSS3 de cr\u00e9er des d\u00e9grad\u00e9s de couleurs. Pour CSS, les d\u00e9grad\u00e9s sont consid\u00e9r\u00e9s comme des images, et donc doivent \u00eatre utilis\u00e9s dans l\u2019attribut background ou background-image d\u2019une d\u00e9claration de style. Il existe en CSS 3 types de d\u00e9grad\u00e9s\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/01\/23\/javascripthtml5-tout-est-dans-le-placement\/","url_meta":{"origin":230,"position":2},"title":"[JavaScript\/HTML5] Tout est dans le placement","author":"geekc","date":"23\/01\/2014","format":false,"excerpt":"\u00c0 la fin de l'article pr\u00e9c\u00e9dent j'avais utilis\u00e9 une image comme motif. Comme on ne pouvait pas le deviner l'image utilis\u00e9e \u00e9tait la suivante. Les canvas ne permettent pas de placement pr\u00e9cis des motifs. Mais il existe un moyen: le compositage. Cette m\u00e9thode fonctionne un peu comme les calques et\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/summer-girls-13.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1000,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/16\/amusons-nous-avec-canvas-retour\/","url_meta":{"origin":230,"position":3},"title":"Amusons-nous avec les canvas &#8211; le retour","author":"geekc","date":"16\/12\/2022","format":false,"excerpt":"Il y a quelques ann\u00e9es, j\u2019avais \u00e9crit une s\u00e9rie d\u2019articles expliquant comment cr\u00e9er \u00e0 l\u2019aide du\u00a0 tag <canvas> un texte ombr\u00e9 avec une image en fond utilisant une police Google Fonts. La technique ayant un peu \u00e9volu\u00e9 depuis, et ayant fait de nouveaux essais de mon c\u00f4t\u00e9, je pense qu\u2019il\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/image.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1171,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/14\/texte-degrade-css\/","url_meta":{"origin":230,"position":4},"title":"Un texte en d\u00e9grad\u00e9 avec CSS3","author":"geekc","date":"14\/04\/2023","format":false,"excerpt":"Comme indiqu\u00e9 \u00e0 la fin de mon gloubi tuto sur le texte en d\u00e9grad\u00e9, il est maintenant possible d'obtenir un r\u00e9sultat similaire uniquement avec CSS3. Les techniques CSS utilis\u00e9es Pour r\u00e9aliser un texte en d\u00e9grad\u00e9 avec CSS3, on utilise deux techniques : les d\u00e9grad\u00e9s et le d\u00e9coupage d'arri\u00e8re-plan (propri\u00e9t\u00e9 CSS\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":991,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/09\/gloubi-tuto-texte-degrade\/","url_meta":{"origin":230,"position":5},"title":"Gloubi tuto &#8211; un texte en d\u00e9grad\u00e9","author":"geekc","date":"09\/12\/2022","format":false,"excerpt":"Pour ce deuxi\u00e8me gloubi tuto, on s\u2019attaque \u00e0 un script qui a eu son petit succ\u00e8s sur Skyblog\u00a0: le texte \u00ab\u00a0arc-en-ciel\u00a0\u00bb (en d\u00e9grad\u00e9s). Script original et explication Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre N\u00e9m\u00e9sis dans la deuxi\u00e8me\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}