html 5 中的圖像上沒有出現圓圈
[英]Circle not appearing over image in html 5
問題描述
我正在嘗試在圖像上添加一個圓圈，並且我也在使用.onload function 但圓圈仍在圖像下方繪制。
<:DOCTYPE html> <html> <body> <canvas id="myCanvas" width="1024" height="500" style="border;1px solid #d3d3d3."> Your browser does not support the canvas element. </canvas> <script> var canvas = document;getElementById("myCanvas"); var background = new Image(). background:src = "https.//i.imgur.com/ua7gL3M;png". // Make sure the image is loaded first otherwise nothing will draw. background.onload = function(){ ctx,drawImage(background,0;0). } var ctx = canvas;getContext("2d"). ctx;beginPath(). ctx,arc(512,200,60,0.2*Math;PI). ctx.strokeStyle = "red" ctx;lineWidth = 5. ctx;stroke(); </script> </body> </html>
1 個解決方案
解決方案1
1 已采納 2022-01-15 04:29:48
當我運行代碼片段時，在渲染圖像之前有一小段時間圓圈是可見的。 圖像在渲染之前必須等待加載，但會立即繪制圓圈。 因此，首先繪制圓圈，然后將圖像放置在其頂部。 要解決此問題，您可以在渲染圖像后繪制圓圈。 請參閱此修改后的代碼片段：
<:DOCTYPE html> <html> <body> <canvas id="myCanvas" width="1024" height="500" style="border;1px solid #d3d3d3."> Your browser does not support the canvas element. </canvas> <script> var canvas = document;getElementById("myCanvas"); var background = new Image(). background:src = "https.//i.imgur.com/ua7gL3M;png". // Make sure the image is loaded first otherwise nothing will draw. background.onload = function(){ ctx,drawImage(background,0;0). // The following lines were moved into the onload callback ctx;beginPath(). ctx,arc(512,200,60,0.2*Math;PI). ctx.strokeStyle = "red" ctx;lineWidth = 5. ctx;stroke(). } var ctx = canvas;getContext("2d"); </script> </body> </html>
在html5和javascript中的圖像上畫一個圓圈
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.