如何旋转HTML5画布的现有内容？ [英] How to rotate the existing content of HTML5 canvas?

问题描述

有没有办法通过Javascript旋转HTML5 canvas的现有内容？我知道可以旋转一个将被绘制到画布上的图像，但是我想旋转已经绘制到画布上的内容，例如，400x400画布的200x200角，或现有画布的任何特定区域。

同样的问题，以缩放现有的画布内容...

我知道getImageData / putImageData提供了潜在的

解决方案

使用临时画布很容易做。 / p>

即时演示

Live Demo Animated （仅供参考）

上述示例绘制两个框，然后旋转并从0,0缩放到200,200

  var canvas = document.getElementById（canvas），
 ctx = canvas.getContext（2d）; 
 
 canvas.width = canvas.height = 400; 
 
 //填充画布黑色，并绘制2个框
 ctx.fillStyle =＃000; 
 ctx.fillRect（0,0,400,400）; 
 ctx.fillStyle =rgb（255,0,0）; 
 
 ctx.fillRect（10,10,190,190）; 
 ctx.fillStyle =rgb（255,255,0）; 
 ctx.fillRect（250,250,90,90）; 
 
 //创建一个临时画布来存储我们的数据（因为我们需要在旋转后清除另一个框）
 var tempCanvas = document.createElement（canvas），
 tempCtx = tempCanvas.getContext（2d）; 
 
 tempCanvas.width = canvas.width; 
 tempCanvas.height = canvas.height; 
 //将我们的数据放到临时画布
 tempCtx.drawImage（canvas，0,0，canvas.width，canvas.height）; 
 
 //附加用于调试目的，只是为了显示画布的外观
 document.body.appendChild（tempCanvas）; 
 
 //现在清除要旋转的部分。
 ctx.fillStyle =＃000; 
 ctx.fillRect（0,0,200,200）; 
 ctx.save（）; 
 //翻译（190/2是我们绘制的框的一半）
 ctx.translate（190/2， 0）; 
 // Scale 
 ctx.scale（0.5,0.5）; 
 // Rotate it 
 ctx.rotate（45 * Math.PI / 180）; 
 //最后从临时画布中绘制图像数据
 ctx.drawImage（tempCanvas，0,0,200,200,10,10,190,190）; 
 ctx.restore（）; 
  

Is there a way to rotate the existing content of HTML5 canvas by Javascript? I know it's possible to rotate an image that will be drawn on to canvas, but I want to rotate the content that has been drawn on to canvas, for example, a 200x200 corner of a 400x400 canvas, or any specific region of an existing canvas.

Same question to scale the existing canvas content...

I know getImageData/putImageData provide a potential to transform the pixel array, but it's just too slow and inefficient.

解决方案

It's pretty easy to do with a temp canvas.

Live Demo

Live Demo Animated (just for the heck of it)

The above example draws 2 boxes, then rotates and scales from 0,0 to 200,200

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

canvas.width = canvas.height = 400;

// fill the canvas black, and draw 2 boxes
ctx.fillStyle = "#000";
ctx.fillRect(0,0,400,400);
ctx.fillStyle = "rgb(255,0,0)";

ctx.fillRect(10,10,190,190);
ctx.fillStyle = "rgb(255,255,0)";
ctx.fillRect(250,250,90,90);

// Create a temp canvas to store our data (because we need to clear the other box after rotation.
var tempCanvas = document.createElement("canvas"),
    tempCtx = tempCanvas.getContext("2d");

tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
// put our data onto the temp canvas
tempCtx.drawImage(canvas,0,0,canvas.width,canvas.height);

// Append for debugging purposes, just to show what the canvas did look like before the transforms.
document.body.appendChild(tempCanvas);

// Now clear the portion to rotate.
ctx.fillStyle = "#000";
ctx.fillRect(0,0,200,200);
ctx.save();
// Translate (190/2 is half of the box we drew)
ctx.translate(190/2, 0);
// Scale
ctx.scale(0.5,0.5);  
// Rotate it
ctx.rotate(45*Math.PI/180);
// Finally draw the image data from the temp canvas.
ctx.drawImage(tempCanvas,0,0,200,200,10,10,190,190);
ctx.restore();

这篇关于如何旋转HTML5画布的现有内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！