当前位置:网站首页>canvas文字绘制(大小、粗体、倾斜、对齐、基线)
canvas文字绘制(大小、粗体、倾斜、对齐、基线)
2022-08-11 09:02:00 【好奇的菜鸟】
一、fillText()函数绘制文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
function draw(id) {
var c = document.getElementById(id);
//获取canvs上下文
var ctx = c.getContext("2d");
//设置填充文字样式
ctx.font = "20px Georgia";
//设置文字及其位置
ctx.fillText("Hello World", 10, 50);
ctx.font = "30px Verdana"
//设置线性渐变色
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta")
gradient.addColorStop("0.5", "blue")
gradient.addColorStop("1.0", "red")
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90)
}
</script>
</html>
二、strokeText()函数绘制文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
function draw(id) {
var c = document.getElementById(id);
//获取canvs上下文
var ctx = c.getContext("2d");
//设置填充文字样式
ctx.font = "20px Georgia";
//设置文字及其位置
ctx.fillText("Hello World", 10, 50);
ctx.font = "30px Verdana"
//设置线性渐变色
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta")
gradient.addColorStop("0.5", "blue")
gradient.addColorStop("1.0", "red")
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 90)
}
</script>
</html>
三、设置文字大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
function draw(id) {
var c = document.getElementById(id);
//获取canvs上下文
var ctx = c.getContext("2d");
//设置填充文字样式,大小20px
ctx.font = "20px Georgia";
//设置文字及其位置
ctx.fillText("Hello World", 10, 50);
//设置填充文字样式,大小30px
ctx.font = "30px Verdana"
ctx.fillText("Hello World", 10, 90);
}
</script>
</html>
四、设置文字字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
function draw(id) {
var c = document.getElementById(id);
//获取canvs上下文
var ctx = c.getContext("2d");
//设置填充文字样式,字体Georgia
ctx.font = "20px Georgia";
//设置文字及其位置
ctx.fillText("Hello World(Georgia)", 10, 50);
//设置填充文字样式,大小20px
ctx.font = "20px Verdana"
ctx.fillText("Hello World(Verdana)", 10, 90);
//设置填充文字样式,大小20px
ctx.font = "20px Arial"
ctx.fillText("Hello World(Arial)", 10, 110);
}
</script>
</html>
五、设置文字粗体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
function draw(id) {
var c = document.getElementById(id);
//获取canvs上下文
var ctx = c.getContext("2d");
//设置填充文字样式,粗体 normal
ctx.font = "normal 20px Arial";
//设置文字及其位置
ctx.fillText("Hello World(normal)", 10, 50);
//设置填充文字样式,粗体 bold
ctx.font = "bold 20px Arial"
ctx.fillText("Hello World(bold)", 10, 90);
//设置填充文字样式,粗体 bolder
ctx.font = "bolder 20px Arial"
ctx.fillText("Hello World(bolder)", 10, 110);
//设置填充文字样式,粗体 lighter
ctx.font = "lighter 20px Arial"
ctx.fillText("Hello World(lighter)", 10, 130);
//设置填充文字样式,粗体 100
ctx.font = "100 20px Arial"
ctx.fillText("Hello World(100)", 10, 150);
//设置填充文字样式,粗体 600
ctx.font = "600 20px Arial"
ctx.fillText("Hello World(600)", 10, 170);
//设置填充文字样式,粗体 900
ctx.font = "900 20px Arial"
ctx.fillText("Hello World(900)", 10, 190);
}
</script>
</html>
六、斜体设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
function draw(id) {
var c = document.getElementById(id);
//获取canvs上下文
var ctx = c.getContext("2d");
//设置填充文字样式,font-weight normal
ctx.font = "normal 20px Arial";
//设置文字及其位置
ctx.fillText("Hello World(normal)", 10, 50);
//设置填充文字样式,font-style italic
ctx.font = "italic 20px Arial"
ctx.fillText("Hello World(italic)", 10, 90);
//设置填充文字样式,font-style oblique
ctx.font = "oblique 20px Arial"
ctx.fillText("Hello World(oblique)", 10, 130);
}
</script>
</html>
七、文字对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
function draw(id) {
var c = document.getElementById(id);
//获取canvs上下文
var ctx = c.getContext("2d");
//绘制一条基本线
ctx.strokeStyle = 'red';
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
//设置填充文字样式
ctx.font = "20px Arial";
//设置对方式
ctx.textAlign = 'start'
//设置文字及其位置
ctx.fillText("textAlign='start'", 150, 60);
//设置对方式
ctx.textAlign = 'end'
//设置文字及其位置
ctx.fillText("textAlign='end'", 150, 80);
//设置对方式
ctx.textAlign = 'left'
//设置文字及其位置
ctx.fillText("textAlign='left'", 150, 100);
//设置对方式
ctx.textAlign = 'center'
//设置文字及其位置
ctx.fillText("textAlign='center'", 150, 120);
//设置对方式
ctx.textAlign = 'right'
//设置文字及其位置
ctx.fillText("textAlign='right'", 150, 140);
}
</script>
</html>
八、文字基线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="200" height="500"></canvas>
</body>
<script>
function draw(id) {
var c = document.getElementById(id);
//获取canvs上下文
var ctx = c.getContext("2d");
var param = [{
//普通字母线
baseLne: "alphabetic",
y: 50
}, {
//方框底线
baseLne: "bottom",
y: 100
}, {
//悬挂基线
baseLne: "hanging",
y: 150
}, {
//表意基线
baseLne: "ideographic",
y: 200
}, {
//方框中线
baseLne: "middle",
y: 250
}, {
//方框顶端
baseLne: "top",
y: 300
}]
for (var i = 0; i < param.length; i++) {
//设置文字基线
ctx.textBaseline = param[i].baseLne;
ctx.font = '30px Arial';
ctx.fillText("Hello,world", 50, param[i].y);
ctx.moveTo(0, param[i].y);
ctx.lineTo(250, param[i].y);
ctx.stroke();
}
}
</script>
</html>
边栏推荐
- VoLTE基础自学系列 | 3GPP规范解读之Rx接口(上集)
- opencv 制作趣图
- What should I do if the mysql data query causes the cup to be full because the query time span is too large
- Nuget can't find the package problem
- 通过Xshell连接Vagrant创建的虚拟机
- Kotlin算法入门求回文数数算法优化二数字生成规则
- 企业服务器主机加固现状分析
- IDEA的初步使用
- ASP.NET Core 6框架揭秘实例演示[32]:错误页面的集中呈现方式
- Audio and video + AI, Zhongguancun Kejin helps a bank explore a new development path | Case study
猜你喜欢
随机推荐
2022年值得关注的NFT发展趋势
jenkins 流水线脚本详细解析Pipeline
通过Xshell连接Vagrant创建的虚拟机
中移链EOSJS实战使用
在软件工程领域,搞科研的这十年!
YTU 2297: KMP模式匹配 三(串)
Detailed Explanation of the Level 5 Test Center of the Chinese Institute of Electronics (1)-string type string
Nuget找不到包的问题处理
模型训练出现NAN
腾讯电子签开发说明
opencv 制作趣图
Essential C# scripting skills for Unity developers
老干妈创始人陶华碧现身直播间,70岁“国民女神”拥抱直播电商
Getting Started with Kotlin Algorithms Calculating Prime Numbers and Optimization
redis模拟面试
Typescript基本类型---上篇
一根网线两台电脑传输文件
mindspore如何实现每50个epoch检测一次psnr
JUC Concurrent Programming
无代码平台助力中山医院搭建“智慧化管理体系”,实现智慧医疗