如何旋转 HTML5 画布的现有内容?

编程入门 行业动态 更新时间:2024-10-28 12:20:57
本文介绍了如何旋转 HTML5 画布的现有内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有办法通过 Javascript 来旋转 HTML5 画布的现有内容?我知道可以旋转将要绘制到画布上的图像,但我想旋转已绘制到画布上的内容,例如 400x400 画布的 200x200 角,或现有画布的任何特定区域.

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...

我知道 getImageData/putImageData 提供了转换像素数组的潜力,但它太慢且效率低下.

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 Animated (just for the heck of it)

上面的例子画了 2 个盒子,然后在 0,0 到 200,200 之间旋转和缩放

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屋!

更多推荐

[db:关键词]

本文发布于:2023-03-19 06:51:27,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/637439.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:画布   内容

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!