canvas将文字生成图片

来源：互联网发布：seo营销方法编辑：程序博客网时间：2024/05/31 00:39

<!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>

0 0