HTML5 canvas drawImage() function

Я пытаюсь повернуть карту. Я рисую карту на скрытом холсте, и после этого я вращаюсь для получения холста ничьи с другого холста. Я выполнил первые три шага (рисовать, скрывать, вращать, переводить), но я не мог последний. Можете ли вы мне помочь? Вот мой исходный код:HTML5 canvas drawImage() function

var visibleCanvas = document.getElementById("VisibleCanvas"); 
var visibleCtx = visibleCanvas.getContext("2d"); 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300,800,600);

с мой скрытый canvas.I перепробовал много способов, чтобы нарисовать карту, но я не мог сделать это (как dataURL и т.д.)

источник

2013-08-29 mekafe

Вот как сделать из одного полотна к другому с 180 градусов флип

enter image description here

// save the visibleCtx in it's unrotated state 
visibleCtx.save(); 

// rotate the visible canvas 180 degrees around its centerpoint 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300); 

// restore the state of visibleCtx to its unrotated state for future drawings 
visibleCtx.restore()

Вот код и Fiddle: http://jsfiddle.net/m1erickson/2scrB/

<!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;} 
    #c{border:3px solid red;} 
    #VisibleCanvas{border:3px solid green;} 
</style> 

<script> 
$(function(){ 

    var c=document.getElementById("c"); 
    var cCtx=c.getContext("2d"); 

    var visibleCanvas = document.getElementById("VisibleCanvas"); 
    var visibleCtx = visibleCanvas.getContext("2d"); 

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

     cCtx.drawImage(img,0,0); 

     // note the image being rotated is 400x234 
     // so our transformation point is 200x117 
     visibleCtx.save() 
     visibleCtx.translate(200,117); 
     visibleCtx.rotate(Math.PI); 
     visibleCtx.drawImage(c,-200,-117); 
     visibleCtx.restore(); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png"; 


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

</head> 

<body> 
    <p>Offscreen</p> 
    <canvas id="c" width=400 height=234></canvas> 
    <p>Visible</p> 
    <canvas id="VisibleCanvas" width=400 height=234></canvas> 
</body> 
</html>

источник

2013-08-29 14:53:04 markE

Спасибо за совет. Но это не сработало. Я пытаюсь нарисовать скрытое canvas. Так что в моем коде нет изображения. Может быть, проблема? – mekafe

Код тот же (и не работает) независимо от того, рисуете ли вы изображение или рисуете карту, используя контекстные линии/кривые/и т. Д. Как отмечено в моем ответе ... Удостоверьтесь, что у вас context.drawImage (c, -400, -300) - если ваш экранный холст 800x600. – markE

Я нашел проблему. У меня есть асинхронные операции для рисования на hiddenCanvas. Поэтому мне нужна функция обратного вызова, чтобы повернуть этот холст. Спасибо за помощь. Хороший день. – mekafe

Если я. правильно поняли, вы хотите:

нарисовать карту на скрытом холсте;
поверните видимый холст; и
скопируйте карту со скрытого холста на видимый холст?

Предполагая, что ваш видимый холст имеет ширину = 800 и высота = 600 ...

var visibleCanvas = document.getElementById("VisibleCanvas"); 
var visibleCtx = visibleCanvas.getContext("2d"); 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI);

Верните холст координатной сетки в исходное положение

visibleCtx.translate(-400,-300);

Команда DrawImage имеет формат :

destinationContext.drawImage (sourceElement, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

... таким образом "visibleCtx.drawImage (c, -400, -300,800,600);" сообщает холсту, чтобы скопировать источник с помощью координат (-400, -300) - который выходит за пределы скрытого холста.

Вместо этого используйте:

visibleCtx.drawImage(c,0,0,800,600);

Поскольку координата видимой холст точечная система координат была установлена обратно в левом верхнем углу экрана, и вы не хотите, чтобы изменить размер копируемого изображения, вы надеваете» t нужно беспокоиться о целевых значениях.

источник

2013-08-29 09:40:14 KaliedaRik

Да, вы понимаете, точно то, что нужно. Спасибо за советы.i внесли их в мой код, но он не сработал снова. что еще? – mekafe

HTML5 canvas drawImage() function

ответ

Смежные вопросы