关键词搜索

源码搜索 ×
×

canvas笔记-文字渲染

发布2020-06-02浏览955次

详情内容

字体以及填充文字

程序运行截图如下：

源码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
  10.     当前浏览器不支持canvas
  11. </canvas>
  12.  
  13. <script>
  14.  
  15.     window.onload = function(){
  16.  
  17.         let canvas = document.getElementById("canvas");
  18.         canvas.width = 800;
  19.         canvas.height = 800;
  20.         let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
  21.  
  22.         context.font = "bold 40px Arial";
  23.         context.fillStyle = "#058";
  24.         context.fillText("中文ABC1234！@#￥%", 40, 100);
  25.     }
  26.  
  27.  
  28. </script>
  29.  
  30. </body>
  31. </html>

其中：

  1. context.font = "bold 40px Arial";
  2. context.fillStyle = "#058";
  3. context.fillText("中文ABC1234！@#￥%", 40, 100);

其中：font指定了加粗bold与字体大小为40px及Arial。

使用fillStyle指定了颜色为#058，使用fillText设置了文字内容，以及再40，100处进行画文字。

 

如果使用描边进行绘画

源码如下：

  1. <script>
  2.  
  3.     window.onload = function(){
  4.  
  5.         let canvas = document.getElementById("canvas");
  6.         canvas.width = 800;
  7.         canvas.height = 800;
  8.         let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
  9.  
  10.         context.font = "bold 40px Arial";
  11.         context.fillStyle = "#058";
  12.         context.fillText("中文ABC1234！@#￥%", 40, 100);
  13.  
  14.         context.strokeText("中文ABC1234！@#￥%", 40, 200);
  15.     }
  16.  
  17.  
  18. </script>

程序运行截图如下：

再fillText与strokeText包含第四个参数，这个参数的意义是限制其宽度：

如下代码：

  1. <script>
  2.  
  3.     window.onload = function(){
  4.  
  5.         let canvas = document.getElementById("canvas");
  6.         canvas.width = 800;
  7.         canvas.height = 800;
  8.         let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
  9.  
  10.         context.font = "bold 40px Arial";
  11.         context.fillStyle = "#058";
  12.         context.fillText("中文ABC1234！@#￥%", 40, 100);
  13.         context.strokeText("中文ABC1234！@#￥%", 40, 200);
  14.  
  15.         context.fillText("中文ABC1234！@#￥%", 40, 300, 100);
  16.         context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);
  17.     }
  18.  
  19.  
  20. </script>

程序运行截图如下：

下面是使用线性梯度进行渲染下：

程序运行截图如下：

源码如下：

  1. window.onload = function(){
  2.  
  3.     let canvas = document.getElementById("canvas");
  4.     canvas.width = 800;
  5.     canvas.height = 800;
  6.     let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
  7.  
  8.     context.font = "bold 40px Arial";
  9.     context.fillStyle = "#058";
  10.     context.fillText("中文ABC1234！@#￥%", 40, 100);
  11.     context.strokeText("中文ABC1234！@#￥%", 40, 200);
  12.  
  13.     context.fillText("中文ABC1234！@#￥%", 40, 300, 100);
  14.     context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);
  15.  
  16.     let linearGrad = context.createLinearGradient(0, 0, 800, 0);
  17.     linearGrad.addColorStop(0.0, "red");
  18.     linearGrad.addColorStop(0.1, "black");
  19.     linearGrad.addColorStop(0.2, "green");
  20.     linearGrad.addColorStop(0.3, "yellow");
  21.     linearGrad.addColorStop(0.4, "orange");
  22.     linearGrad.addColorStop(0.5, "purple");
  23.     linearGrad.addColorStop(0.6, "teal");
  24.     linearGrad.addColorStop(0.7, "pink");
  25.     linearGrad.addColorStop(1.0, "brown");
  26.     context.fillStyle = linearGrad;
  27.     context.fillText("中文ABC1234！@#￥%", 40, 500);
  28. }

 

下面是使用图片纹理的例子：

程序运行截图如下：

源码如下：

  1. <script>
  2.  
  3.     window.onload = function(){
  4.  
  5.         let canvas = document.getElementById("canvas");
  6.         canvas.width = 800;
  7.         canvas.height = 800;
  8.         let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
  9.  
  10.         context.font = "bold 40px Arial";
  11.         context.fillStyle = "#058";
  12.         context.fillText("中文ABC1234！@#￥%", 40, 100);
  13.         context.strokeText("中文ABC1234！@#￥%", 40, 200);
  14.  
  15.         context.fillText("中文ABC1234！@#￥%", 40, 300, 100);
  16.         context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);
  17.  
  18.         let linearGrad = context.createLinearGradient(0, 0, 800, 0);
  19.         linearGrad.addColorStop(0.0, "red");
  20.         linearGrad.addColorStop(0.1, "black");
  21.         linearGrad.addColorStop(0.2, "green");
  22.         linearGrad.addColorStop(0.3, "yellow");
  23.         linearGrad.addColorStop(0.4, "orange");
  24.         linearGrad.addColorStop(0.5, "purple");
  25.         linearGrad.addColorStop(0.6, "teal");
  26.         linearGrad.addColorStop(0.7, "pink");
  27.         linearGrad.addColorStop(1.0, "brown");
  28.         context.fillStyle = linearGrad;
  29.         context.fillText("中文ABC1234！@#￥%", 40, 500);
  30.  
  31.         let bakgroundImage = new Image();
  32.         bakgroundImage.src = "img/bg.jpg";
  33.         bakgroundImage.onload = function(){
  34.  
  35.             let pattern = context.createPattern(bakgroundImage, "repeat");
  36.             context.fillStyle = pattern;
  37.             context.font = "bold 60px Arial";
  38.             context.fillText("中文ABC1234！@#￥%", 40, 600);
  39.         }
  40.     }
  41.  
  42.  
  43. </script>

 

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载