創建一個畫布的旋轉克隆

-1

我有一個非常簡單的代碼，它演示了一個問題。因此，在頁面上我有這樣的HTML：創建一個畫布的旋轉克隆

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>

而且我有這樣的代碼：

function convertCanvasToImage(canvas) { 
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png"); 
    return image; 
} 

function convertImageToCanvas(image) { 
    var canvas = document.createElement("canvas"); 
    document.body.appendChild(canvas); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    canvas.getContext("2d").drawImage(image, 0, 0); 
    return canvas; 
} 

var canvas1 = document.getElementById("myCanvas"); 
var ctx1 = canvas1.getContext("2d"); 

ctx1.rotate(-30 * Math.PI/180); 
ctx1.rect(10, 60, 80, 40); 
ctx1.stroke(); 

var image = convertCanvasToImage(canvas1); 
var canvas2 = convertImageToCanvas(image); 
document.body.appendChild(canvas2); 

var ctx2 = canvas2.getContext("2d"); 
ctx2.rotate(30 * Math.PI/180); // <-- This does not work

所以，你可以看到，我這樣做。首先，我創建一個畫布，然後將其旋轉並繪製圖像，然後從該畫布創建一個圖像，然後從該圖像創建一個全新的畫布。最後，我將這個畫布添加到頁面並嘗試旋轉它，但它不起作用。此代碼（代碼的最後一行）沒有任何影響：

ctx2.rotate(30 * Math.PI/180);

我試過很多其他的角度，但仍然看到絕對沒有影響。到底發生了什麼，我該如何解決？

PS。這是我有什麼圖片：

來源

2016-07-18 Jacobian

ctx.rotate不旋轉畫布。你將不得不使用css轉換。 ctx.rotate僅旋轉當前的繪圖上下文，因此繪製的圖形以不同的角度繪製。你的目標是什麼？例如，編寫遊戲時通常不需要旋轉畫布。 –

根據規範，「當前路徑，轉換矩陣，陰影屬性，全局alpha，剪輯區域和全局組合運算符不得影響getImageData（）和putImageData（）方法。」這對我來說是一個主要缺點，即轉換矩陣不會影響getImageData和putImageData。所以，我希望用臨時畫布來模仿所需的行爲。 – Jacobian

從長遠來看，我希望能夠複製一些旋轉的畫布塊。 'getImageData'和'putImageData'沒有幫助，因爲它們的功能有限。這就是爲什麼我轉向臨時畫布。 – Jacobian

使用的合成，使你的畫布只包含所需旋轉矩形的副本。

創建主畫布的副本。
在複製畫布上填充旋轉的矩形。
將合成設置爲source-atop這會導致任何新像素僅在現有像素不透明的位置顯示（==僅顯示在填充的矩形中）。
將主畫布繪製到複製畫布上。只有來自旋轉矩形的內容纔會出現 - 其他內容都是透明的。

實施例的代碼和一個演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var rotationX=0; 
 
var rotationY=0; 
 
var x=10; 
 
var y=60; 
 
var w=80; 
 
var h=40; 
 
var rAngle=-30*Math.PI/180; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg"; 
 
function start(){ 
 
    cw=canvas.width=img.width; 
 
    ch=canvas.height=img.height; 
 
    ctx.drawImage(img,0,0); 
 
    defineRotatedRect(ctx,rotationX,rotationY,x,y,w,h,rAngle) 
 
    ctx.strokeStyle='red'; 
 
    ctx.stroke(); 
 
    // 
 
    copyRotatedRectOnly(canvas,rotationX,rotationY,x,y,w,h,rAngle); 
 
} 
 

 
function copyRotatedRectOnly(canvas,rx,ry,x,y,w,h,rAngle){ 
 
    var c=canvas.cloneNode(); 
 
    var cctx=c.getContext('2d'); 
 
    document.body.appendChild(c); 
 
    defineRotatedRect(cctx,rotationX,rotationY,x,y,w,h,rAngle) 
 
    cctx.fill(); 
 
    cctx.globalCompositeOperation='source-atop'; 
 
    cctx.drawImage(canvas,0,0); 
 
    return(c); 
 
} 
 

 
function defineRotatedRect(context,rx,ry,x,y,w,h,rAngle){ 
 
    context.translate(rx,ry); 
 
    context.rotate(rAngle); 
 
    context.beginPath(); 
 
    context.rect(x,y,w,h); 
 
    context.rotate(-rAngle); 
 
    context.translate(-rotationX,-rotationY); 
 
}

body{ background-color:white; } 
 
canvas{border:1px solid red; }

<h4>Original Canvas</h4> 
 
<canvas id="canvas" width=512 height=512></canvas> 
 
<h4>Copy containing only the rotated rectangle</h4>

來源

2016-07-19 03:27:20 markE

謝謝，先生！ – Jacobian

創建一個畫布的旋轉克隆

回答

相關問題