美文网首页
HTML 2 Canvas

HTML 2 Canvas

作者: o简单生活o | 来源:发表于2022-11-29 15:16 被阅读0次
    <canvas id='canvas'></canvas>
    <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
               '<foreignObject width="100%" height="100%">' +
               '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
                 '<em>I</em> like ' + 
                 '<span style="color:white; text-shadow:0 0 2px blue;">' +
                 'cheese</span>' +
               '</div>' +
               '</foreignObject>' +
               '</svg>';
    
    var DOMURL = window.URL || window.webkitURL || window;
    
    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    var url = DOMURL.createObjectURL(svg);
    
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
    }
    
    img.src = url;
    </script>
    

    相关文章

      网友评论

          本文标题:HTML 2 Canvas

          本文链接:https://www.haomeiwen.com/subject/gcpdfdtx.html