{"id":253,"date":"2014-01-23T16:53:27","date_gmt":"2014-01-23T14:53:27","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=253"},"modified":"2019-04-20T17:40:05","modified_gmt":"2019-04-20T15:40:05","slug":"javascripthtml5-tout-est-dans-le-placement","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2014\/01\/23\/javascripthtml5-tout-est-dans-le-placement\/","title":{"rendered":"[JavaScript\/HTML5] Tout est dans le placement"},"content":{"rendered":"\n

\u00c0 la fin de l’article pr\u00e9c\u00e9dent<\/a> j’avais utilis\u00e9 une image comme motif. Comme on ne pouvait pas le deviner l’image utilis\u00e9e \u00e9tait la suivante.<\/p>\n\n\n\n

\"summer-girls-13\"<\/a><\/figure><\/div>\n\n\n\n\n\n\n\n

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 masques des logiciels de type Photoshop. Cet \u00e9tape suppl\u00e9mentaire permet le positionnement pr\u00e9cis de l’image utilis\u00e9e comme fond.<\/p>\n\n\n\n

Le compositage s’effectue via la propri\u00e9t\u00e9 globalCompositeOperation<\/code>, qui s’utilise de la mani\u00e8re suivante:<\/p>\n\n\n

\nctx.globalCompositeOperation='source-atop';\n<\/pre><\/div>\n\n\n
La propri\u00e9t\u00e9 source-atop<\/code> utilis\u00e9e ci-dessus signifie qu’\u00e0 la fin ne reste visible que la partie de la source (\u00e9l\u00e9ments ajout\u00e9s ult\u00e9rieurement) comprise dans la destination (\u00e9l\u00e9ments d\u00e9j\u00e0 en place). Pour la liste de toutes les valeurs possibles, rendez-vous sur w3schools<\/a>.<\/p>\n\n\n\n
Avec le r\u00e9glage ci-dessus, pour un texte avec une image en fond, il faut d’abord placer le texte, puis placer l’image, \u00e0 l’aide de la m\u00e9thode drawImage<\/code>:<\/p>\n\n\n
\n\/\/Avec: image \u00e0 utiliser, coordonn\u00e9es de l'image, dimensions de l'image\nctx.drawImage(img,0,-85,500,375);\n<\/pre><\/div>\n\n\n
En adaptant le code existant, cela donne :<\/p>\n\n\n
\nsetTimeout(function(){\n\tvar img = new Image();\n\timg.onload = function(){\n\t\tvar c = document.getElementById('canvas');\n\t\tvar ctx = c.getContext('2d');\n\t\tctx.font = '85px Knewave';\n\t\tctx.textAlign = 'center';\n\t\tctx.shadowColor = '#000';\n\t\tctx.shadowBlur = 20;\n\t\tctx.fillText('Summer',250,100);\n\t\tctx.fillText('is magic',250,180);\n\t\tctx.globalCompositeOperation='source-atop';\n\t\tctx.drawImage(img,0,-85,500,375);\n\t};\n\timg.src = 'https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/summer-girls-13.jpg';\n},1000);\n<\/pre><\/div>\n\n\n
Nous obtenons alors :<\/p>\n\n\n\n