canvas将文字生成图片

最新推荐文章于 2024-07-11 21:32:10 发布

九

最新推荐文章于 2024-07-11 21:32:10 发布

阅读量5.5k

点赞数 1

本文链接：https://blog.csdn.net/qq_31301099/article/details/55096932

版权

<!DOCTYPE html>
<html>
<header>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</header>
<style>
    .box>img{width: 100%;height: 100%;}
</style>
<body>
<div class="box" style="border: 1px solid red;width: 500px;height: 200px;">

</div>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    ctx.font="20px Georgia";
    ctx.fillText("Hello World!",10,50);

    ctx.font="30px Verdana";
    // Create gradient
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // Fill with gradient
    ctx.fillStyle=gradient;
    ctx.fillText("w3school.com.cn",10,90);

    var img = convertCanvasToImage(c);
    $('.box').append(img);
    console.log(img);

    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }


</script>