Text 文字


我们可以通过实例化一个 Konva.Text() 对象创建文字。

点击 Konva.Text documentation 查看详细属性和方法说明。

更详细的关于文字渲染的示例,请点击Rich Text Demo.

Konva Text Demoview raw
<!DOCTYPE html>
<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Text Demo</title>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
<div id="container"></div>
var stage = new Konva.Stage({
container: 'container',
width: 340,
height: 300

var layer = new Konva.Layer();

var simpleText = new Konva.Text({
x: stage.width() / 2,
y: 15,
text: 'Simple Text',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green'

// to align text in the middle of the screen, we can set the
// shape offset to the center of the text shape after instantiating it
simpleText.offsetX(simpleText.width() / 2);

// since this text is inside of a defined area, we can center it using
// align: 'center'
var complexText = new Konva.Text({
x: 20,
y: 60,
"COMPLEX TEXT\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances.",
fontSize: 18,
fontFamily: 'Calibri',
fill: '#555',
width: 300,
padding: 20,
align: 'center'

var rect = new Konva.Rect({
x: 20,
y: 60,
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
width: 300,
height: complexText.height(),
shadowColor: 'black',
shadowBlur: 10,
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowOpacity: 0.2,
cornerRadius: 10

// add the shapes to the layer

// add the layer to the stage