Question

我必须在画布上绘制3张图像，并需要旋转2张图像。

图像就像 1.圆形，垂直直线 2.只是一条水平线 3.大圆形图像

我需要在画布中心旋转前2个图像。

var canvas = document.getElementById('NewImage');
    var context = canvas.getContext('2d');
    context.canvas.width  = window.innerWidth;
    context.canvas.height = window.innerHeight*0.7;
    var imageObj = new Image();
    var imageObj2 = new Image();
    var imageObj3 = new Image();

    imageObj.onload = function() {
        context.save();    
        context.translate(imageObj.width/2,imageObj.height/2);
        context.rotate(-10*Math.PI/180);
        //context.translate(-imageObj.width/2,-imageObj.height/2);
        context.drawImage(imageObj,-(imageObj.width/2),-(imageObj.height/2),context.canvas.width,context.canvas.height*0.85);
        context.restore();
        context.save();
        context.globalCompositeOperation="source-over";
        context.translate(imageObj2.width/2,imageObj2.height/2);
        context.rotate(-10*Math.PI/180);
        context.translate(-imageObj2.width/2,-imageObj2.height/2);
        context.drawImage(imageObj2, x, y,context.canvas.width,6);
        context.restore();
        //context.rotate(10*Math.PI/180);
        context.drawImage(imageObj3, 0, 0,context.canvas.width,context.canvas.height*0.9);

    };
    imageObj.src  = 'canvas/inner_circle_blackline_vertical.png';
    imageObj2.src = 'canvas/horizontal.png';
    imageObj3.src = 'canvas/outer_circle.png';

当我尝试旋转时，图像不会在中心旋转。当第1张图像旋转时，它必须看起来像“X”符号。

我将如何在画布的中心旋转。

感谢：）

Answer 1

按照设计，您的imageObj2和imageObj3永远不会加载。

这是一个通用的图像加载器，它将加载所有图像并将它们存储在名为imgs []的数组中。

当所有图像都已完全加载时，将调用render（）函数。这就是你开始画画的地方。

// This is an image loader 
// When render() is called, all your images are fully loaded
var imgURLs = [
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"];
var imgs=[];
var imgCount=0;

pre_load();

function pre_load(){

    for(var i=0;i<imgURLs.length;i++){

        var img=new Image();
        imgs.push(img);
        img.onload=function(){        

            if(++imgCount>=imgs.length){ 
                // images are now fully loaded
                render(); 
            }

        }
        img.src=imgURLs[i];
    }
}

在render（）中，您只需绘制图像。

由于重复执行相同的操作（旋转图像），您可以创建辅助函数来执行旋转绘图。这里的辅助函数是drawImageAtAngle。

// draw the rotated lines on the canvas
function render(){

    var x=canvas.width/2;
    var y=canvas.height/2;

    drawImageAtAngle(imgs[0],x,y,-45);
    drawImageAtAngle(imgs[2],x,y,45);
    drawImageAtAngle(imgs[1],x,y,0);
}

这里是将提供的图像旋转到提供角度的辅助函数：

function drawImageAtAngle(image,X,Y,degrees){
    var radians=degrees*Math.PI/180;
    var halfWidth=image.width/2;
    var halfHeight=image.height/2;
    ctx.beginPath();
    ctx.save();
    ctx.translate(X,Y);
    ctx.rotate(radians);
    ctx.drawImage(image,-halfWidth,-halfHeight);
    ctx.restore();
}

这是代码和小提琴：http://jsfiddle.net/m1erickson/ZShWW/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px;}
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // This is an image loader 
    // When render() is called, all your images are fully loaded
    var imgURLs = [
        "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
        "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
        "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"];
    var imgs=[];
    var imgCount=0;

    pre_load();

    function pre_load(){

        for(var i=0;i<imgURLs.length;i++){

            var img=new Image();
            imgs.push(img);
            img.onload=function(){        

                if(++imgCount>=imgs.length){ 
                    // images are now fully loaded
                    render(); 
                }

            }
            img.src=imgURLs[i];
        }
    }


    // draw the rotated lines on the canvas
    function render(){

        var x=canvas.width/2;
        var y=canvas.height/2;

        drawImageAtAngle(imgs[0],x,y,-45);
        drawImageAtAngle(imgs[2],x,y,45);
        drawImageAtAngle(imgs[1],x,y,0);
    }


    function drawImageAtAngle(image,X,Y,degrees){
        var radians=degrees*Math.PI/180;
        var halfWidth=image.width/2;
        var halfHeight=image.height/2;
        ctx.beginPath();
        ctx.save();
        ctx.translate(X,Y);
        ctx.rotate(radians);
        ctx.drawImage(image,-halfWidth,-halfHeight);
        ctx.restore();
    }





}); // end $(function(){});
</script>

</head>

<body>
    <p>This is the line image</p>
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png">
    <p>The line image rotated at center of canvas</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

要查找画布的中心，您必须使用画布的尺寸。在您的代码中，您使用的是图像的尺寸。也就是说，这一行：

  context.translate(imageObj.width/2,imageObj.height/2);

应该是：

  context.translate(canvas.width/2,canvas.height/2);

将您移动到画布的中心。然后围绕该中心发生旋转。然后，您将以原点为中心绘制图像。那部分看起来是正确的。

然后，您将反转旋转，然后翻译。

在画布上旋转2个图像

2 个答案: