html5 canvas学习--绘制文字

最新推荐文章于 2024-05-16 20:44:00 发布
最新推荐文章于 2024-05-16 20:44:00 发布
阅读量1.2w 收藏 1
点赞数 3
分类专栏： Html5

1.绘制填充文字：context.fillText(text,x,y,[maxWidth])

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.font = "italic 35px 黑体";
			ctx.fillStyle = "Red";
			ctx.fillText("绘制填充文字",30,60,200);
			ctx.font = "bold 35px 宋体";
			ctx.fillStyle = "blue";
			ctx.fillText("绘制填充文字",30,100);
			ctx.font = "25px 隶书";
			ctx.fillStyle = "Green";
			ctx.fillText("绘制填充文字",30,130);
		}
		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="350" height="200" style="border:solid 1px gray;"></canvas>
</body>
</html>

2. 绘制轮廓文字：context.strokeText(text,x,y,[maxWidth]); 测量文字的长度:context.measureText(text);

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.font = "bold 20px 黑体";
			ctx.fillStyle = "Blue";
			var txt1 = "滚滚长江东逝水,浪花淘尽英雄";
			ctx.fillText(txt1,10,40);
			var txt2 = "以上字符串的宽度为";
			var mtx1 = ctx.measureText(txt1);
			var mtx2 = ctx.measureText(txt2);
			ctx.font = "bold 15px 宋体";
			ctx.fillStyle = "Red";
			ctx.fillText(txt2,10,80);
			ctx.fillText(mtx1.width,mtx2.width,80);
			var message = "这是文字";
			// 绘制空心文字
			ctx.font = "25px 隶书";
			ctx.strokeStyle = "Green";
			ctx.strokeText(message,30,130);
		}

		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="350" height="200"></canvas>
</body>
</html>



xiaopengyaonixi
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas绘图之文字的渲染
Daisy花园
02-09 1万+
文字渲染基础context.font=”bold 40px Arial” font属性可以接受css的font属性context.fillText(string,x,y,[maxlen]) string指定位置，(x,y)指定位置 context的fillestyle属性设置字体属性 maxlen可选，表示绘制这段文字最长的宽度window.onload=function(){ v
html5笔记4 — canvas绘制文字
erdouzhang
03-10 763
绘制文字html代码：<body onload="draw('canvas');"> <canvas id="canvas" width="500" height="350"></canvas> </body>js代码：function draw(id){ // 1.获取canvas的id var canvas = document.getElementById('canvas');
canvas常用api
Dimuzero的博客
01-28 596
canvas常用api 属性 使用参数 fillStyle（填充颜色） 字符串颜色值（十六进制，rbg，rbga） strokeStyle（线条颜色） 字符串颜色值（十六进制，rbg，rbga） lineCap（线条端点样式） 字符串（buzz，round和square） lineJoin（两线条相交时的拐点样式） 字符串（） lineWidth（线条的宽度） 数值类型（如果是负数，NaN或者Infinity都会忽略） shadowColor（阴影的颜色） 字符串（十六进
canvas标签学习之文本
linxiaoduo的博客
07-06 554
1.font属性&lt;body&gt; &lt;canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"&gt; Your browser does not support the HTML5 canvas tag. &lt;/canvas&gt; &lt;
Canvas DrawText详解_canvas
最新发布
2401_85012446的博客
05-16 1025
↑ 这里没有贴错图哦再附上一张图，应该能更清楚地表达：这是为什么？为什么其它的方法，都是以左上角作为基准点的，而drawText()却是文字左下方？先别觉得日了狗，这种设计其实是有道理的。drawText()参数中的y，指的是文字的****的位置。也就是这条线：众所周知，不同的语言和文字，每个字符的高度和上下位置都是不一样的。要让不同的文字并排显示的时候整体看起来稳当，需要让它们上下对齐。但这个对齐的方式，不能是简单的「底部对齐」或「顶部对齐」或「中间对齐」，而应该是一种类似于「重心对齐」的方式。
html5 fill,HTML canvas fillText()用法及代码示例
weixin_42552716的博客
06-25 824
fillText()方法用于在画布上绘制填充的文本。文本的默认颜色是黑色。用法:context.fillText(text, x, y, maxWidth);参数：text:此参数指定要在画布上写入的文本。x:此参数指定从何处开始文本的x坐标。y:此参数指定从何处结束文本的y坐标。maxWidth:此参数指定文本允许的最大宽度。它是可选的。范例1：HTML canvas fillText() Me...
学习Canvas基础-绘制文字
qq_67983277的博客
11-23 3403
学习Canvas基础-绘制文字
文字粒子效果html5-canvas-side-文字.rar
01-10
HTML5的Canvas元素是网页开发中的一个重要组成部分，它允许开发者在网页上进行动态图形绘制，提供了丰富的绘图功能。在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中，包含的项目是一个利用Canvas API...
html5 canvas文字放射发光动画特效
06-11
总的来说，“html5 canvas文字放射发光动画特效”是一个展示Canvas API功能和潜力的优秀实例，它结合了文字渲染、颜色处理、动画控制等多方面的知识，对于学习和提升HTML5 Canvas技能非常有帮助。通过深入理解并实践...
HTML5 Canvas剪影文字引导页特效
07-24
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。在这个特定的“HTML5 Canvas剪影文字引导页特效”中，我们看到的是一个结合了Canvas技术、剪影效果...
HTML5-Canvas-to-FB-Twitter：将HTML5 Canvas共享到Facebook和Twitter的示例
02-06
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。在这个示例中，我们将探讨如何利用HTML5 Canvas与社交媒体平台Facebook和Twitter进行集成，使得用户...
html5 canvas-1.canvas介绍(hello canvas)
09-28
// 绘制文字 context.fillText("Hello World", 10, 10); ``` 这个简单的例子展示了Canvas的基本用法。实际上，Canvas API提供了丰富的绘图方法，包括线条、曲线、图片、渐变、阴影等，可以实现复杂的交互式图形和...
HTML5 canvas fillText() 方法
GoodIdea
03-05 2801
定义和用法 fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。 提示：请使用font属性来定义字体和字号，并使用fillStyle属性以另一种颜色/渐变来渲染文本。 JavaScript 语法： context.fillText(text,x,y,maxWidth); 参数值 参数 描述 text 规定在画布上输出的文本。 x ...
微信小程序，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...
html制作轮廓图,使用HTML5 canvas绘制文字轮廓的方法
weixin_29045001的博客
06-17 848
使用HTML5 canvas绘制文字轮廓的方法发布时间：2020-04-16 10:33:38来源：亿速云阅读：411作者：小新今天小编给大家分享的是使用HTML5 canvas绘制文字轮廓的方法，很多人都不太了解，今天小编为了让大家更加了解HTML5 canvas绘制文字轮廓的方法，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。我们先来看具体的示例代码如下创建以下的HTML文件fu...
空心文字HTML,HTML5绘制空心的文本
weixin_28687685的博客
06-20 884
HTML5绘制空心的文本1、设计源码HTML5绘制空心的文本/*** 绘制空心的文本*/function drawHollowText(){//找到元素var canvas = document.getElementById("canvas");//创建context对象var ctx = canvas.getContext("2d");//设置字样和字体大小ctx.font = "50px 微软...
canvas学习（十）：font字体设置
总有一天，你的日积月累，会成为别人的望尘莫及
08-10 1万+
canvas中的字体设置比较简单，这里就不说别的了，直接上实例代码： window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ //宽高自适应 //myCanvas.width = document.document...
canvas文字绘制（大小、粗体、倾斜、对齐、基线）
热门推荐
一起coding，一起嗨。
08-09 2万+
canvas文字绘制文字填充方式、字体各种设置属性。
HTML5动画----canvas基础6（3创建阴影、绘制文字）
wenmin1987的博客
08-16 191
创建阴影： <script type="text/javascript"> function draw(){ var ctx=document.getElementById("myCanvas").getContext('2d'); //设置阴影 ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ...
HTML5 Canvas：探索2D绘图的强大潜力
文字绘制是Canvas的另一个重要部分，可以设置字体样式、大小和颜色，并且可以在画布上渲染文本内容。 保存和恢复绘图状态是Canvas工作流程的一部分，通过`context.save()`和`context.restore()`，开发者可以管理...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值