HTML5 canvas基本绘图之文字渲染

前端技术 2023/09/05 HTML

与文本渲染有关的主要有三个属性以及三个方法：

上述的属性和方法的基本用法如下：

JavaScript Code复制内容到剪贴板
  1. var canvas = document.getElementById(\"canvas\");   
  2.     var context = canvas.getContext(\"2d\");   
  3.   
  4.     context.font=\"bold 30px Arial\"; //设置样式   
  5.     context.strokeStyle = \"#1712F4\";   
  6.     context.strokeText(\"欢迎来到我的博客！\",30,100);   
  7.   
  8.     context.font=\"bold 50px Arial\";    
  9.     var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//设置渐变填充样式   
  10.     grd.addColorStop(0,\"#1EF9F7\");   
  11.     grd.addColorStop(0.25,\"#FC0F31\");   
  12.     grd.addColorStop(0.5,\"#ECF811\");   
  13.     grd.addColorStop(0.75,\"#2F0AF1\");   
  14.     grd.addColorStop(1,\"#160303\");   
  15.     context.fillStyle = grd;   
  16.     context.fillText(\"欢迎来到我的博客！\",30,200);   
  17.   
  18.     context.save();   
  19.     context.moveTo(200,280);   
  20.     context.lineTo(200,420);   
  21.     context.stroke();   
  22.     context.font=\"bold 20px Arial\";    
  23.     context.fillStyle = \"#F80707\";   
  24.     context.textAlign=\"left\";   
  25.     context.fillText(\"文本在指定的位置开始\",200,300);   
  26.     context.textAlign=\"center\";   
  27.     context.fillText(\"文本的中心被放置在指定的位置\",200,350);   
  28.     context.textAlign=\"right\";   
  29.     context.fillText(\"文本在指定的位置结束\",200,400);   
  30.     context.restore();   
  31.   
  32.     context.save();   
  33.     context.moveTo(10,500);   
  34.     context.lineTo(500,500);   
  35.     context.stroke();   
  36.     context.fillStyle=\"#F60D0D\";   
  37.     context.font=\"bold 20px Arial\";    
  38.     context.textBaseline=\"top\";   
  39.     context.fillText(\"指定位置在上面\",10,500);   
  40.     context.textBaseline=\"bottom\";   
  41.     context.fillText(\"指定位置在下面\",150,500);   
  42.     context.textBaseline=\"middle\";   
  43.     context.fillText(\"指定位置居中\",300,500);   
  44.     context.restore();   
  45.   
  46.   
  47.     context.font=\"bold 40px Arial\";    
  48.     context.strokeStyle = \"#16F643\";   
  49.     var text = \"欢迎来到我的博客！\";   
  50.     context.strokeText(\"欢迎来到我的博客！\",10,600);   
  51.     context.strokeText(\"上面字符串的宽度为：\"+context.measureText(text).width,10,650);   
  52.   

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/14321

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案