Maison > interface Web > Tutoriel H5 > le corps du texte

Rendu de texte de dessin de base sur toile HTML5

黄舟
Libérer: 2018-05-29 11:09:39
original
2820 Les gens l'ont consulté

Il existe principalement trois attributs et trois méthodes liés au rendu du texte :

Rendu de texte de dessin de base sur toile HTML5
L'utilisation de base des attributs et méthodes ci-dessus est la suivante :

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

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

      

        context.font="bold 30px Arial"; //设置样式   

        context.strokeStyle = "#1712F4";   

        context.strokeText("欢迎来到我的博客!",30,100);   

      

        context.font="bold 50px Arial";    

        var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//设置渐变填充样式   

        grd.addColorStop(0,"#1EF9F7");   

        grd.addColorStop(0.25,"#FC0F31");   

        grd.addColorStop(0.5,"#ECF811");   

        grd.addColorStop(0.75,"#2F0AF1");   

        grd.addColorStop(1,"#160303");   

        context.fillStyle = grd;   

        context.fillText("欢迎来到我的博客!",30,200);   

      

        context.save();   

        context.moveTo(200,280);   

        context.lineTo(200,420);   

        context.stroke();   

        context.font="bold 20px Arial";    

        context.fillStyle = "#F80707";   

        context.textAlign="left";   

        context.fillText("文本在指定的位置开始",200,300);   

        context.textAlign="center";   

        context.fillText("文本的中心被放置在指定的位置",200,350);   

        context.textAlign="right";   

        context.fillText("文本在指定的位置结束",200,400);   

        context.restore();   

      

        context.save();   

        context.moveTo(10,500);   

        context.lineTo(500,500);   

        context.stroke();   

        context.fillStyle="#F60D0D";   

        context.font="bold 20px Arial";    

        context.textBaseline="top";   

        context.fillText("指定位置在上面",10,500);   

        context.textBaseline="bottom";   

        context.fillText("指定位置在下面",150,500);   

        context.textBaseline="middle";   

        context.fillText("指定位置居中",300,500);   

        context.restore();   

      

      

        context.font="bold 40px Arial";    

        context.strokeStyle = "#16F643";   

        var text = "欢迎来到我的博客!";   

        context.strokeText("欢迎来到我的博客!",10,600);   

        context.strokeText("上面字符串的宽度为:"+context.measureText(text).width,10,650);
Copier après la connexion

L'effet est le suivant :
Rendu de texte de dessin de base sur toile HTML5

Ce qui précède est le contenu du rendu du texte du dessin de base du canevas HTML5. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois (www.php.cn) !

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal