Question

我正在学习画布编程。

我试图通过文本数组绘制画布并输入类型文本..

如何制作同一张照片？

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML5:Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border:2px solid#c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var Text_array = new Array("과자","모래","호두");

for( i=0; i<3; i++)
{
   document.write(" " + Text_array[i]);
}

</script>
</body>
</html>

Answer 1

document.write将文本写入文档。您需要将其写入canvas元素。 Canvas为此提供了自己的方法：fillText和strokeText，因此您需要使用其中之一。

您还需要在需要时调用javascript。在我下面的代码中，我通过单击链接调用它，但它同样可以从onload事件，按钮单击等调用。我也提供x和y坐标，我希望在哪里写入文本帆布。

<!DOCTYPE html>
<html>
<head>
<title>HTML5:Canvas</title>
<script type="text/javascript">
function writeCanvas() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font = "20px Arial";
    var Text_array = new Array("과자","모래","호두");

    for( i=0; i<3; i++)
    {
        ctx.fillText(Text_array[i], 10, (i+1) * 50);
    }
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border:2px solid#c3c3c3;">
Your browser does not support the canvas element.
</canvas><br>
<a href="javascript:writeCanvas();">Write</a>


</body>
</html>

如何输入画布文本框和按钮框？

1 个答案: