在Javascript中绘制字符串的上半部分

Draw upper half of a string in Javascript

本文关键字:上半部 字符串 绘制 Javascript      更新时间:2023-09-26

如果我有一个字符串,如"Hello World!",我将如何绘制只说字符串的上半部分到javascript画布?

我希望它看起来像这个。

使用。clip()方法,你可以指定画布的一个部分,在其中绘制,剪辑区域之外的任何东西都被省略;洛杉矶:

<html>
<body style="background:black;">
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Clip a rectangular area
    ctx.rect(50,20,200,80);
    //ctx.stroke();
    ctx.clip();
    // Draw text into clip()
    ctx.fillStyle="#666666";
    ctx.font = "30px Arial";
    ctx.fillText("Hello World",60,110);
</script>
</html>

查看详细信息

祝你好运!