前提・実現したいこと
html2canvasは文字列を画像化する際に、
text-shadowの値を先頭の1つしか読み込まない仕様なので、
それを回避したい。(すべて読みこんでほしい)
該当のソースコード
CODEPEN のURLを載せておきます。
https://codepen.io/lovesana0881/pen/MMQgyQ
下記はCODEPENの写しです。
html
1<p>shadow</p> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
CSS
1p { 2 text-shadow: 3 100px 50px 0 red,/*最初の一つは読み込む*/ 4 100px -50px 0 blue,/*以後、無視*/ 5 -100px 50px 0 orange, 6 -100px -50px 0 green; 7} 8 9/* 以下、整形用 */ 10p { 11 width: 350px; 12 height: 160px; 13 line-height: 160px; 14 text-align: center; 15 font-size: 50px; 16 float: left; 17} 18 19canvas { 20 margin-top: 40px; 21}
js
1const p = document.querySelector('p'); 2html2canvas( p,{ 3 onrendered: function(canvas){ 4 document.body.appendChild(canvas); 5 } 6} );
補足情報(FW/ツールのバージョンなど)
以下のブラウザで動作を確認。
Safari バージョン12.1.1 (14607.2.6.1.1)
Chrome バージョン: 75.0.3770.100
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/05 13:18