0

いくつかのHTM5シェイプを描画しているキャンバスがあります（context.fiiRect（x、y、w、h）、context.strokeRect（x、y、w、h）などを使用）。帆布も含めてすべての形を90度回転させたいです。キャンバスは回転していますが、図形はまだ同じ位置にあります。CANVASと図形の両方でこれを行うにはどうすればよいですか。

編集

HTMLコード：-

<body onload="draw();">
    <img style='display:none;'id='image' src="Robot.jpg"/>
    <canvas id="canvas" width="900" height="600" ></canvas>
    <canvas id="annCanvas" width="900" height="600" ></canvas>
    <div id="annoatation" >
       <input type="button" value="90°" onclick="rotate(90);">
    </div>
</body>

CSSコード：-

#annoatation
{
  position: absolute;
}
#canvas
{
border: 1px solid black;
position: absolute;
}
#annCanvas
{
position: absolute;
}

JAVAスクリプトコード：-

function rotate(val)
{
    var image = document.getElementById('image');
    var canvas = document.getElementById('canvas');
    var canvasContext = canvas.getContext('2d');



    canvas.setAttribute('width', image.height);
    canvas.setAttribute('height', image.width);
    canvasContext.rotate(90 * Math.PI / 180);
    canvasContext.drawImage(image, 0, -image.height);

    canvasContext.beginPath();
    canvasContext.strokeRect(50,50,200,200);
    canvasContext.stroke();


}
function draw()
{
    var canvas = document.getElementById('canvas');
    var canvasContext = canvas.getContext('2d');
    var image1=new Image();
    image1.onload = function()
    {
        canvasContext.drawImage(image,0,0,canvas.width,canvas.height);
        canvasContext.beginPath();
        canvasContext.lineWidth=4;
        canvasContext.strokeRect(50,50,200,200);
        canvasContext.stroke();
    }
    image1.src='Robot.jpg';
}

長方形を0度の角度と同じ位置で回転させたい。

4

0 に答える 0