前提・実現したいこと
針の先端に画像を付けて時計のように動かしたいのですが、
ブラウザチェックすると、
IEだと針と画像がズレてしまいます。他のブラウザでは正常なのですが。
原因は何でしょうか？
<img id="aaa" src="aaa.svg" alt="" style="display: none;" >
<canvas id="CanvasID" width="730" height="730">
<script type="text/javascript">
let CanvasObj0 = document.getElementById("CanvasID");
let CnvWidth0 = CanvasObj0.width;
let CnvHeight0 = CanvasObj0.height;
let ctx0 = CanvasObj0.getContext('2d');
window.onload = function (){
let ox, oy, x, y, radius, startAngle, endAngle, direction, degree, radian, orbit;
ox0 = CnvWidth0/2;
oy0 = CnvHeight0/2;
orbit0 = CnvWidth0/2-43;
DrawPlanet00(100,"#000000",2,253);//針
DrawPlanet7(ctx0,ox0,oy0,orbit0,100,"aaa");
}
function defDrawImage(idImg,x,y){
console.log("DrawImage()");
this.img = document.getElementById(idImg);
this.x = x;
this.y = y;
this.onDrawImage = function(){
console.log("onDrawImage()");
console.log(this.img.src);
console.log(this.x);
console.log(this.y);
let imgw, imgh;
imgw = this.img.naturalWidth;
imgh = this.img.naturalHeight;
ctx0.drawImage(this.img, this.x-imgw/2, this.y-imgh/2);
}
this.img.onload = this.onDrawImage();
console.log(this.img.src);
}
/*---- 関数｜（針）を描画 ----*/
function DrawPlanet00( degree, color , a , b){
let radian = Math.PI * degree / 180;
let direction = true; // 時計回り
ctx0.translate( ox0, oy0 );
ctx0.rotate( radian );
ctx0.fillStyle = color;
ctx0.fillRect( 0, -orbit0, a, b );
ctx0.setTransform( 1, 0, 0, 1, 0, 0 );
}
function DrawPlanet7(ctx,ox,oy,orbit,degree,idImg){
let x, y, startAngle, endAngle, direction, radian;
ctx0.beginPath();
radian = degree/360*Math.PI*2;
x = ox+Math.sin(radian)*orbit;
y = oy-Math.cos(radian)*orbit;
if(idImg==""){
startAngle = 0;
endAngle = Math.PI*2;
direction = true; // 時計回り
ctx0.arc(x, y, radius, startAngle, endAngle, direction);
ctx0.closePath();
}else{
let ddi = new defDrawImage(idImg, x, y);
}
}
</script>
</canvas>
Q&A
