Question

我有画布，我正在绘制一些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 SCRIPT CODE： -

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度角相同的位置上旋转矩形。

如何在HTML5中旋转带有形状的画布。

0 个答案: