Question

我试图在下面的示例中使用canvas获取动态点文本绘制 http://jsbin.com/kinebeza/1/

但是ctx.fillText在没有任何数字的情况下使用时不会显示任何内容。

请帮忙。

由于

Answer 1

这里有一些事情：

jQuery脚本未正确加载（在jsBin中）。你可以将jQuery放在头文件中，或者在jQuery加载后配置jsbin加载你的脚本。

您应该使用width和height属性为canvas元素定义位图大小（不需要使用样式设置额外的宽度/高度，对于canvas元素应该避免使用。）

如果不是画布默认为300x150。由于您在查询中使用文档作为宽度的基础，因此在大多数情况下文本位置会非常偏离。

您可以设置

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

如果您希望画布填充客户端窗口。附上window.onresize

$(window).on('resize, ...)

在客户端窗口更改大小时更新大小。

然后使用canvas.width作为文字展示的基础：

var width_ = canvas.width * 0.5;

要居中文本，还要将画布文本对齐设置为中心

ctx.textAlign = 'center';

<强> Working jsbin

Answer 2

这是因为画布的宽度和高度设置很有趣，为了让它按照您的预期播放，直接在元素和样式上设置宽度和高度：

<canvas id="myCanvas" width=500 height=240 style='width:500px;height:240px'></canvas>

Answer 3

正如@ Starscream1984所说，画布默认大小是300x150所以除非您的文档很小，否则你试图将文本绘制到画布大小之外。

由于您动态设置fillText的x值，您可能还应动态调整画布大小：

var canvas = $("#myCanvas")[0];    
var ctx = canvas.getContext("2d");

onResized("sanjana",100);           

function onResized(text,y){

    // resizing the canvas will also clear the canvas
    // so resize the canvas first

    var width_ = ($(document).width())/2;
    canvas.width=2*width_;

    // set the font size and measure the text width

    ctx.font = "60px Comic";
    var textWidth=ctx.measureText(text).width;

    // draw the text centered on the document

    ctx.fillText(text, width_ - textWidth/2, y);    

}

无法为画布上的文本生成动态位置

3 个答案: