[解決済み] キャンバスに画像を描く
2022-02-18 18:30:31
質問
キャンバスに画像を貼り付けようとしています。次のチュートリアルを読みました。
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
というようなことをやってみた。
私のキャンバスは
<canvas id="canvas" width="400" height="400"></canvas>
という関数を作りました。
function putImage(){
var img = new Image();
img.src = "./path.png";
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(img,8,8);
}
が、画像がキャンバスに表示されない。 画像パスを印刷したところ、正しく表示されたので、この問題は解消できました。 何かいい方法はないでしょうか?
感謝
解決方法は?
チュートリアルによれば、あなたは
ctx.drawImage()
内部
img.onload
というように
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = '/files/4531/backdrop.png';
}
お役に立てれば幸いです。
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] フッターの内容が重なっているのを修正するには?
-
[解決済み] Railsアプリケーションにアイコンを追加する
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] 再描画のためにキャンバスをクリアする方法
-
[解決済み] HTML5 CanvasとSVGとdivの比較
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み】「選択されたファイルがありません」を変更しました。
-
[解決済み] Bootstrapのカラムが機能しない
-
[解決済み] ボディの背景色が表示されない?
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] フッターの内容が重なっているのを修正するには?
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?