[解決済み] HTML5 Canvas 要素でカスタムフォントを使用するにはどうすればよいですか?
2022-02-07 22:55:27
質問事項
Cufonやtypeface.jsなどを見ましたが、これらはSIFRの代替品のようで、自由形状の座標を設定したり、カスタムタイプを
<canvas>
どなたか良いアイデアをお持ちの方はいらっしゃいませんか?
解決方法は?
jsfiddleで、@font-faceを使った簡単なデモを作成しました。 http://jsfiddle.net/zMKge/
また、Operaは
簡単なチュートリアル
の使用方法について
<canvas>
テキストAPIを含む。
CSSです。
@font-face {
font-family: 'KulminoituvaRegular';
src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}
ジャバスクリプトです。
var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
ctx.drawImage(this, 0,0,this.width, this.height);
ctx.font = '68px KulminoituvaRegular';
ctx.fillStyle = 'orangered';
ctx.textBaseline = 'top';
ctx.fillText ('Keyboard Cat', 0, 270);
};
関連
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] 絶対位置が機能しない
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] jQueryで名前を指定して要素を選択するには?
-
[解決済み] 再描画のためにキャンバスをクリアする方法
-
[解決済み] HTML5/Canvas/JavaScriptを使用してブラウザ内のスクリーンショットを撮影する
-
[解決済み】HTML5キャンバスの画像サイズを変更する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】「選択されたファイルがありません」を変更しました。
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] 以下のHTMLフォームの例で、「mailto:[email protected]」とは何ですか?
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?
-
[解決済み] デフォルトで空白を選択
-
[解決済み] TD rowspan が機能しない
-
[解決済み] Visual Studio Code CSSエラー「空のルールセットを使用しないでください」【終了しました