canvas的fillText参数解释

最新推荐文章于 2024-04-16 14:50:07 发布
最新推荐文章于 2024-04-16 14:50:07 发布
阅读量7k 收藏 2
点赞数 2
文章标签： html5 前端 html
原文链接：https://www.cnblogs.com/muyun/archive/2012/02/16/2353506.html
版权

一开始用filleText总是显示不出来文字，很是郁闷，后来琢磨了下，原来fillText常用的三个参数的意思弄错了。

void fillText(DOMString text, double x, double y, optional double maxWidth);

 常用的形式是 fillText("要现实的文字",x,y)，注意这里面的x,y代表的是哪个点的坐标。

< !DOCTYPE html > <html>
  <head>
    <script type="text/javascript">

//fillText的后两个参数是 text的左下角那个点坐标，而不是text的左上
      //角点坐标

      function addText()
      {
 var c = document.getElementById("mycanvas");
      //console.log(      c    );
      var ctx = c.getContext("2d");

      ctx.moveTo(10,100);
      ctx.lineTo(200,100);
      ctx.stroke();
      ctx.fillText('nihao',10,100);
       
     }

    </script>
  </head>
  <body onload="addText()">
    <canvas id="mycanvas" width="600" height="500">
      Your boswer is not support the canvas element.
    </canvas>
  </body>
</html>

 

可以发现，后面的x,y参数其实是文字左下角的那个点的坐标。

所以如果代码改动如下时，什么文字都不会显示出来。

ctx.moveTo(10,100);//不变
ctx.lineTo(200,100);//不变
ctx.stroke();//不变
ctx.fillText('nihao',10,0);//原来的代码是 ctx.fillText('nihao',10,100)，即改动了y坐标的值
 

想想为什么呢？
 

因为fillText的基线（textBaseline）就在坐标y=0的点上，而文字要写在基线之上，自然就超出canvas的上边界了，所以在canvas里什么也没有显示。
 

 

-----------------------------------------------------------------------------------------------
 

 

 

参考：
 

关于fillText的使用及实例请参考一下两个链接：
 

1.How to display text in canvas(比较全面)
 

http://www.html5tutorial.info/html5-canvas-text.php （英文）
 

2.同时，也可以参考园子里一个写的很好的中文博客：
 

Canvas Text - 越己 - 博客园
 

 

想了解更多：
 

关于fillText的详细参数请参阅官网：http://www.whatwg.org/specs/web-apps/current-work/

                

        

        

    




    

      

        

            

              
                
                  微芒丶
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
微信小程序canvas实现文字缩放

				
			

			

				

					01-12
				

			

		

		

			
				
在`canvas`的`drawText`方法中，我们可以通过设置`style`参数来改变字体大小，例如： ```javascript const ctx = wx.createCanvasContext('myCanvas') ctx.setFontSize(30) // 设置字体大小为30，这里的数值就是文字...

			
		

	



                

              
                



	

		

			

				
					
HTML5 Canvas中 fillText() 和 strokeText() 的区别

				
			

			

				

					chase_sky
				

				

					07-03
					
					9764
					
				

			

		

		

			
				
Canvas现在越来越多地被运用到我们的项目中了，所以对Canvas的研究也得跟上呀，不然就被时代抛弃了。这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 strokeText 的区别,代码及效果图片演示。

			
		

	



                


  
              

                


	

		

			

				
					
Canvas学习记录之fillText

				
			

			

				

					万少博-FE
				

				

					03-14
					
					5090
					
				

			

		

		

			
				
最新更新时间：2020年03月14日16:20:22
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
概述

本文内容：本文介绍基于fillText()绘制文本的一些基本用法，基本文本(字号、色值、字体)、填充文本、描边文本、自动换行文本、左对齐、右对齐、水平居中、垂直居中、在水平方向基于x轴某点中心对称、水平垂直居中

fillText(text, x, y [, maxWidth]);


...

			
		

	





	

		

			

				
					
【canvas】canvas基础使用（九）：文本绘制

					
最新发布

				
			

			

				

					qq_2511276124的博客
				

				

					04-16
					
					1166
					
				

			

		

		

			
				
canvas除了能够绘制图形外，也可以绘制文本。

			
		

	



		

			
		



	

		

			

				
					
09Canvas——文字绘制

				
			

			

				

					Blog of Lytracy
				

				

					08-10
					
					1383
					
				

			

		

		

			
				
文章目录1、fillText() 方法2、strokeText() 方法3、font属性4、textAlign 属性5、textBaseline 属性
1、fillText() 方法
使用 fillText() 方法在在画布上绘制实心文本。语法为：
ctx.fillText(text, x, y, maxWidth);

参数说明：

text 规定在画布上输出的文本。
x 表示开始绘制文本的 x 坐标位置（相对于画布）。
y 表示开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 表示允许的最

			
		

	





	

		

			

				
					
《canvas》之第5章 文本操作

				
			

			

				

					yxqq378287007的博客
				

				

					06-24
					
					1484
					
				

			

		

		

			
				
canvas 文本操作

			
		

	





	

		

			

				
					
绘制文字 –Canvas的基本操作

				
			

			

				

					chenzhao635的专栏
				

				

					02-01
					
					177
					
				

			

		

		

			
				
绘制文字时可以使用fillText方法或strokeText方法。

fillText方法用填充方式绘制字符串，该方法的定义如下所示：void fillText(text,x,y,[maxWidth]);
该方法接受四个参数，第一个参数text表示要绘制的文字，第二个参数
x表示绘制文字的起点横坐标，第三个参数y表示绘制文字的起点纵坐
标，第四个参数maxWi...

			
		

	





	

		

			

				
					
canvas裁剪

				
			

			

				

					06-23
				

			

		

		

			
				
`drawImage()`接受多个参数，其中`srcImage`是你想要绘制的图像源（如图片或另一个Canvas），`sx`, `sy`定义了源图像的起始裁剪坐标，`sw`, `sh`则定义了裁剪区域的宽度和高度，而`dx`, `dy`, `dw`, `dh`分别对应...

			
		

	





	

		

			

				
					
canvas图谱pdf

				
			

			

				

					08-19
				

			

		

		

			
				
* 使用 `fillText()` 方法绘制文本，参数包括文本内容、坐标和字体样式。 * 使用 `strokeText()` 方法绘制文本轮廓，参数包括文本内容、坐标和字体样式。 * 字体样式：使用 `font` 属性设置字体样式，包括字体名称、...

			
		

	





	

		

			

				
					
微信小程序canvas实现文字自由移动

				
			

			

				

					01-12
				

			

		

		

			
				
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上绘制图形、文字...此外，实践操作是学习的最佳方式，尝试修改代码，调整参数，观察不同的结果，这将有助于加深对Canvas和微信小程序动画机制的理解。

			
		

	





	

		

			

				
					
canvas-示例

				
			

			

				

					08-29
				

			

		

		

			
				
 `fillText()`和`strokeText()`方法可以用来在canvas上写入文本。例如：  ```javascript  ctx.font = '30px Arial';  ctx.fillText('Hello, World!', 50, 50);  ```  7. **图像操作**  你可以加载图片并在canvas上...

			
		

	





	

		

			

				
					
前端之学习 canvas 的基础语法

				
			

			

				

					weixin_53817560的博客
				

				

					03-27
					
					139
					
				

			

		

		

			
				
今天，学习了 canvas 的一些语法知识和使用，在这里分享给大家一起学习交流首先，我们应该了解 canvas 是什么，有什么用，文章最后，我们将使用 canvas 绘制一个刮刮卡的中奖特效！定义：是 HTML5 提供的一种新标签, ie9 才开始支持的，Canvas 是一个矩形区域的画布，可以用 JS 控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

			
		

	





	

		

			

				
					
[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...

				
			

			

				

					weixin_34345560的博客
				

				

					09-26
					
					274
					
				

			

		

		

			
				
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续.
canvas提供两种输出文本的方式：
strokeText：描边文本
fillText：填充文本
fillStyle配合fillText使用，strokeStyle配合strokeText使用
strokeText用法：
...

			
		

	





	

		

			

				
					
Javascript入门阶段——写文字和警告框

				
			

			

				

					YWX_KB的博客
				

				

					10-18
					
					2580
					
				

			

		

		

			
				
1. 课程大纲

使用fillText的方法在画布上写文字
使用ctx(画笔)的font属性设置文字的字体和大小
使用alert方法，在浏览器窗口中弹出警告框

2.1 画飞机

在画布上画四架飞机，四架飞机的位置为正方形的四个角。



确定四架飞机的位置。

画四架飞机，四架飞机的位置为正方形的四个角，代码如下：

enemy.onload = function(){
	ctx.drawImage(enemy,100,100);
	ctx.drawImage(enemy,200,100);
	ctx.d

			
		

	





	

		

			

				
					
微信小程序，canvas使用fillText()文字错位问题解决方案

				
			

			

				

					qq_33900610的博客
				

				

					02-10
					
					1万+
					
				

			

		

		

			
				
一、问题
官方是这样解释的 ctx.fillText(string text, number x, number y, number maxWidth)的：
此API用于在在画布上绘制被填充的文本，其中，x和y分别表示文本距离左上角 x 和y坐标位置
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFontSize(20)
ctx.fil...

			
		

	





	

		

			

				
					
canvas文字绘制（大小、粗体、倾斜、对齐、基线）

					
热门推荐

				
			

			

				

					一起coding，一起嗨。
				

				

					08-09
					
					2万+
					
				

			

		

		

			
				
canvas文字绘制文字填充方式、字体各种设置属性。

			
		

	





	

		

			

				
					
fillText不显示，strokeText显示

				
			

			

				

					m0_49471668的博客
				

				

					12-06
					
					363
					
				

			

		

		

			
				
是 HTML5 的 Canvas API 中的两个方法，分别用于填充文本和描边文本。这是一个示例代码，显示如何使用。

			
		

	





	

		

			

				
					
canvas笔记-文本（fillText）旋转（rotate）

				
			

			

				

					細水、長流√的专栏
				

				

					12-21
					
					3599
					
				

			

		

		

			
				
这里fillText直接使用rotate会有问题。估计是旋转中心有问题。



正确的逻辑为：

先使用translate移动中心点在文本起始位置，如何在0，0处fillText即可。

如果要在字符串中心进行旋转，则需要获取字符串长度，translate的时候x进行+，y轴进行-即可。



程序运行截图如下：

绿色的为原始字符串，红色是从顶部进行旋转，绿色为在中心进行旋转。





代码如下：


<!DOCTYPE html>
<html lang="en">
<h.

			
		

	





	

		

			

				
					
canvas清除filltext

				
			

			

				

					05-17
				

			

		

		

			
				
要清除 `fillText` 绘制的文本，可以使用 `clearRect()` 方法清除指定区域内的像素。例如，如果要清除整个 Canvas，请使用以下代码：

```javascript
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

// 清除整个 Canvas
context.clearRect(0, 0, canvas.width, canvas.height);
```

如果只想清除特定区域的文本，请使用相应区域的坐标和大小作为 `clearRect()` 方法的参数。例如，如果只想清除文本在 Canvas 的中心绘制的部分，请使用以下代码：

```javascript
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

// 在 Canvas 中心绘制文本
context.fillText('Hello world!', canvas.width / 2, canvas.height / 2);

// 清除 Canvas 中心区域的文本
context.clearRect(canvas.width / 2 - 50, canvas.height / 2 - 10, 100, 20);
```

在这个例子中，我们首先绘制了一个文本，然后使用 `clearRect()` 方法清除了中心区域的文本。 `clearRect()` 方法接受四个参数：清除区域的左上角 x 坐标、左上角 y 坐标、清除区域的宽度和高度。在这个例子中，我们计算了中心区域的坐标和大小，并将它们作为参数传递给 `clearRect()` 方法。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值