hola, me gustaría crear un sitio donde alrededor de una imagen se pueda ver una escritura radial (enlace) (como los rayos del sol). De hecho, traté de poner la imagen y a través del lienzo, estoy tratando de superponer un círculo y luego conectarle las escrituras radiales (el siguiente paso sería hacer que las escrituras se muevan), sin embargo, de hecho, no puedo generar el rectángulo de lienzo del mismo tamaño de la imagen (para luego tener las proporciones adecuadas para crear el círculo). Probé getAttribute o $ {nameclass.width} y otros. pero no puedo recuperar el tamaño de la imagen con javascript. (En css uso los porcentajes para tener una mejor adaptación con las posteriores implementaciones de @media)
<canvas id="myCanvas" >Error</canvas> <div > <img class="logo_centrale" src="img.png" alt="Errore" > <script> document.getElementById("myCanvas").style.border = ' 3px solid #f00 ' ; document.write(document.getElementsByClassName("logo_centrale").width); var l = document.getElementsByClassName("logo_centrale").width;/*doesn't work*/ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = ' #fff '; l = l / 2 ; a = a / 2 ; ctx.arc( l , a ,200,0,2*Math.PI); ctx.stroke(); </script> </div> body { position: fixed; background-color: black; } *{ border: dashed; border-color: white; } .logo_centrale{ z-index: -1; max-width: 45%; position: relative; display: block; margin-top: 10%; margin-left: auto; margin-right: auto; } #myCanvas{ z-index: 2; position:absolute; width: 630px; height: 430px; margin-top: 11%; margin-left: 27.3%; }Debe esperar a que la imagen esté lista antes de intentar obtener el tamaño, luego puede usar .width y .height :
<img class="logo_centrale" src="img.png" alt="Errore" onload="process(event)"> <script> function process(event) { console.log(event.target.width) console.log(event.target.height) // your canvas code } </script>