在HTML5畫布上繪製CSS圓角文字

Question

我有一個包含CSS樣式的CSS文本的div。

考慮到應用於文本的所有樣式，我想在HTML5 canvas元素上「轉移」此文本內容。可能嗎？

現在我發現我只能使用所需的字體風格在畫布的2D上下文中繪製一些文本，但沒有關於如何在畫布上繪製具有複雜佈局的文本。

Answer 1

看起來這不是一件微不足道的事情。我認爲它也可能引入一些安全/隱私問題。

無論如何，我發現這個信息似乎至少是賽道上有一些，但不是所有的渲染能力：

Rendering HTML elements to <canvas>

我纔是最成功的「html2canvas」一發現在這裏： http://html2canvas.hertzen.com/documentation.html#how-it-works

而且試了一下，它工作起來有些以及在此琴： http://jsfiddle.net/UdESC/1/

個外部腳本： http://html2canvas.hertzen.com/build/html2canvas.js

HTML：

<button id="exec">Exec</button> 
<p>Input:</p> 
<div id="abc"> 
    <p>This is a test</p> 
    <table> 
     <tbody> 
      <tr> 
       <td>Col1</td> 
       <td>Col2</td> 
      </tr> 
      <tr> 
       <td>Col1 data sdafaksfhalsj</td> 
       <td>Col2 data 3289rh982h</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<p>Output:</p> 
<div id="output"> 
</div> 

CSS：

#abc { 
    border: 1px solid #999; 
} 

JS：

$(document).ready(function() { 
    $("#exec").click(function() { 
     html2canvas($("#abc"), { 
      onrendered: function(canvas) { 
       // canvas is the final rendered <canvas> element 
       $("#output").empty(); 
       $("#output").append(canvas); 
      } 
     }); 
    }); 
});