「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
1, 画文字
fillText() 在画布上绘制填色的文本， 默认颜色也是黑色
fillText(text, x, y, maxWidth) : 参数说明
text #规定在画布上输出的文本
x # 开始绘制文本的x坐标位置
y # 开始绘制文本的y坐标位置
maxWidth # 可选， 允许的最大文本宽度
注意：如果要绘制空心文字，需要用strokeText()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas绘制文字</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
// 获取画布宽高
var w = context.canvas.width;
var h = context.canvas.height;
// 设置字体相关样式
context.font = '40px 宋体'
// 样色
context.fillStyle = 'red'
// 画文字
context.fillText('贰拾壹先生', w/2, w/2)
context.strokeStyle = 'blue'
// 绘制空心文字
context.strokeText('你好', 100 , 250)
// 设置最大宽度
context.fillStyle = 'gold'
context.fillText("最大宽度,不管内容多少，左右都100px", 100, 100, 300)
</script>
</html>
效果如图：
2, 线性渐变
通过 createLinearGradient设置整个画布都需要渐变
然后通过addColorStop设置渐变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas绘制文字</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
// 获取画布宽高
var w = context.canvas.width;
var h = context.canvas.height;
// 设置字体相关样式
context.font = '40px 宋体'
// 设置线性渐变
var gradient = context.createLinearGradient(0, 0, canvas.width, 0)
gradient.addColorStop('0', "yellow")
gradient.addColorStop('0', "blue")
gradient.addColorStop('1.0', 'red')
context.strokeStyle = gradient
// 实心文字
context.fillStyle = gradient
context.fillText('实心文字',0, 100, 500)
// 空心文字
context.strokeText('风和丽日，心情开朗', 0, 300, 500)
</script>
</html>
3, 文字位置
textAlgin 设置或返回文本内容的当前对齐方式
textAlign = end
textAlign = start
textAlign = left
textAlign = center
textAlign = right
textBaseLine 设置或返回咋绘制文本时的当前文本基线
textBaseLine = Top
textBaseLine = Bottom
textBaseLine = Middle
textBaseLine = Alphabetic
textBaseLine = Hanging
演示： 在画布中画两条线，一条横线，一条竖线，演示字体文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas绘制文字</title>
<style>
canvas {
margin: 0 auto;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
您的浏览器不支持Canvas, 建议你使用Chrome或者火狐浏览器达到更好的显示效果
</canvas>
</body>
<script>
// 获取canvas标签
var canvas = document.getElementById('canvas')
// 获取canvas上下文对象，可理解为：使用画布的权限
var context = canvas.getContext('2d')
// 获取画布宽高
var w = context.canvas.width;
var h = context.canvas.height;
// 画直线
context.beginPath()
context.moveTo(250, 0)
context.lineTo(250, 500)
context.stroke()
context.closePath()
// 画横线
context.beginPath()
context.moveTo(0, 250)
context.lineTo(500, 250)
context.stroke()
context.closePath()
// 设置字体相关样式
context.font = '20px 宋体'
//context.textAlign = 'end';
context.textAlign = 'center'
context.textBaseLine = 'middle'
// 设置文本位置
context.fillText('这是字体位置', 250, 250)
</script>
</html>
效果如图：
4, 项目源码
项目代码地址和文档中的截图都是同步的，都已经实现， 在canvas文件夹中
[持续更新中]
