0

我有画布，我在上面绘制一些 HTM5 形状（使用 context.fiiRect(x,y,w,h)、context.strokeRect(x,y,w,h) 等）。我想将包括画布在内的所有形状旋转 90 度。画布正在旋转，但形状仍然在同一位置.... 我怎样才能为画布和形状做这件事。

编辑

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