画像と図形が一発で表示されません。

JavaScript | HTML、CSS26閲覧xmlns="http://www.w3.org/2000/svg">100

ベストアンサー

1

1人がナイス!しています

>画像が確定しているなら、preloadで画像の読み込みのレスポンスが多少 向上することが期待されます。 preloadで画像の先読み込みを指定しても、HTMLファイルより先読み込みされる保証は無いので、画像は絶対にonloadイベントで描画しなければなりません。

ThanksImg質問者からのお礼コメント

onloadで解決できました。 いつもありがとうございます。

お礼日時:4/7 22:48

その他の回答(1件)

1

けいさん >・・・・画像と図形が一発で表示されません・・・・・・・・ ご参考に↓ http://www.tohoho-web.com/html/memo/canvas-2d.htm#drawImage1 http://www.htmq.com/canvas/drawImage.shtml <!DOCTYPE html> <html lang="ja"> <head> </head> <body> <div id="sintai_zu"> <canvas id="canvas_sintai_zu" width="" height=""></canvas> <script type="text/javascript"> var sintai_zu = null; var canvas_sintai_zu = null; var g_sintai_zu = null; var $id = function(id){ return document.getElementById(id); }; var sintai_zu = $id("sintai_zu"); var canvas_sintai_zu = $id("canvas_sintai_zu"); var g_sintai_zu = canvas_sintai_zu.getContext("2d"); var img9 = new Image(); var IMG_COOLMAN9 = "kenkou00.svg"; img9.src = IMG_COOLMAN9; function getSize0(){ canvas_sintai_zu.width = sintai_zu.offsetWidth; canvas_sintai_zu.height = canvas_sintai_zu.width; img9.onload = function() { // ここを修正 g_sintai_zu.drawImage(img9, 0, 0, canvas_sintai_zu.width, canvas_sintai_zu.height); } g_sintai_zu.beginPath(); g_sintai_zu.arc(canvas_sintai_zu.width*0.3,canvas_sintai_zu.height*0.3,canvas_sintai_zu.width*0.1,0,Math.PI*2); g_sintai_zu.fillStyle = "rgba(169,169,169,1)"; g_sintai_zu.fill(); } window.addEventListener("resize", function(){ getSize0(); }); window.addEventListener("DOMContentLoaded", function(){ getSize0(); }); </script> </div> </body> </html>

1人がナイス!しています