JavaScript canvas:在盒子里写
JavaScript canvas: write within box
在JS画布中,如何将文本放置在"框"中,或者将其保留在矩形中?我的意思是,我可以将文本放在 x、y 坐标处,但我希望它放在环绕框 x0、y0、x1、y1 中,所以当文本即将从盒子里出来时要有换行符,我可以将其居中矩形,并可能缩放文本以尽可能适合框。
有这样的图书馆可以这样做吗?
希望对您有所帮助
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var maxWidth = 400;
var lineHeight = 25;
var x = (canvas.width - maxWidth) / 2;
var y = 60;
var text = 'All the world ''s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';
context.font = '16pt Calibri';
context.fillStyle = '#333';
wrapText(context, text, x, y, maxWidth, lineHeight);
</script>
</body>
</html>
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- IE9的HTML5 Canvas getImageData()函数存在问题
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- 加速我的复杂函数绘图仪(canvas+javascript)
- Canvas赢得't更新
- 特殊'浮点'在马赛克盒子
- 在keydown(JS,Jquery)上更改HTML5 Canvas元素
- HTML5 Canvas访问控制允许原始错误
- Jasny bootstrap Off Canvas菜单:如何在导航栏下强制菜单滑动
- 在fabric.js中以PNG格式下载Canvas,给出网络错误
- 如何使用Canvas制作3D动画
- 带有内置图像对象的Canvas组件构造函数;t显示's图像
- Javascript Canvas使用getImageData(x,y,1,1).data获取颜色
- HTML5 Canvas toDataURL(“image/png”)适用于一些绘画,而有些则不然,不确定原因
- 如何把我的盒子总是放在窗户中央
- Canvas.toDataUrl(“image/png”)工作不正常
- 我如何在我的流星应用程序中更改盒子的高度
- Javascript和Canvas绘制中间有孔的圆
- JavaScript canvas:在盒子里写