HTML画布：旋转图像3D效果_Html_Canvas

HTML画布：旋转图像3D效果

html canvas

HTML画布：旋转图像3D效果,html,canvas,Html,Canvas,如何旋转图像（如旋转45度）并挤压图像。假设我有一个完美的正方形图像。我可以将其旋转到任何角度，但我想将旋转的正方形挤压，使高度比宽度小2/3。生成的图像将不是一个完美的旋转正方形，而是一个压扁的正方形你知道怎样才能达到这个效果吗？挤压一个正方形非常容易，只需使用一个刻度： ctx.scale（1,2/3）；//将其压缩至垂直尺寸的2/3 不过，您必须通过（相对分数*高度）/2将其转换为中心因此，要旋转并挤压200x200平方米的图像，您只需： // rotation first ctx.t

如何旋转图像（如旋转45度）并挤压图像。假设我有一个完美的正方形图像。我可以将其旋转到任何角度，但我想将旋转的正方形挤压，使高度比宽度小2/3。生成的图像将不是一个完美的旋转正方形，而是一个压扁的正方形

你知道怎样才能达到这个效果吗？

挤压一个正方形非常容易，只需使用一个刻度：

ctx.scale（1,2/3）；//将其压缩至垂直尺寸的2/3

不过，您必须通过

（相对分数*高度）/2

将其转换为中心

因此，要旋转并挤压200x200平方米的图像，您只需：

// rotation first
ctx.translate(100,100);
ctx.rotate(.3);
ctx.translate(-100,-100);

// than scale
ctx.translate(0,200 * (1/3) / 2) // move by half of the 1/3 space to center it
ctx.scale(1, 2/3); // squish it to 2/3 vertical size

ctx.drawImage(img, 0,0);

示例：

您可以使用2D画布通过扭曲宽度与高度来“伪造”3d

通过使用context.drawImage并不成比例地改变宽度和高度来实现此目的

// draw image increasingly "squashed"
// to fake a 3d effect
ctx.drawImage(img,0,0,img.width,img.height,
    left,
    10,
    (300-(right-left))/1,
    300-(right-left)/1.5);

你们可以利用失真率来获得不同的效果，但这一切都只是“挤压”

下面是代码和小提琴：


正文{背景色：象牙色；填充：20px；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
左var=1.0；
var右=300；
变量大小=.25；
var img=新图像（）；
img.onload=函数（）{
制作动画（）；
}
img.src=“koolaidman.png”；
函数animate（）{
//更新比例因子
左+=尺寸；
右-=尺寸；
如果（left100）{sizing=-sizing；}
控制台日志（左+“/”+右）；
//清除并保存上下文
clearRect（0，0，canvas.width，canvas.height）；
ctx.save（）；
//绘制图像越来越“挤压”
//伪造3d效果
ctx.图纸图像（img，0,0，img.宽度，img.高度，
左边
10,
（300-（右左））/1，
300-（左/右）/1.5）；
ctx.restore（）；
//请求新帧
requestAnimFrame（函数（）{
制作动画（）；
});
}
制作动画（）；
}); // end$（函数（）{}）；

+1为OP提供了他想要的东西，但我认为他实际上是想用2D失真来“伪造”3D。如果我误解了，请原谅我的冒失。顺便说一句，我在新罕布什尔州彼得伯勒市住了3年，这是个不错的地方！嗨，谢谢你的代码。你能给我看一只猫的样本，它旋转90度或45度，但高度（从上到下）比相对于平面/地平线的宽度（从左到右）小1/3吗？（我希望我问的问题是对的）嗨，谢谢你的代码和帮助。我想要的是，我想要一个图像被旋转。。。像0到360度。。。但我想从上到下被压扁得稍微小一点。

<!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:20px;}
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

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

        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();

        var left=1.0;
        var right=300;
        var sizing=.25;

        var img=new Image();
        img.onload=function(){
          animate();
        }
        img.src="koolaidman.png";

        function animate() {

          // update scaling factors
          left+=sizing;
          right-=sizing;
          if(left<0 || left>100){sizing = -sizing;}
          console.log(left+"/"+right);


          // clear and save the context
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.save();

          // draw image increasingly "squashed"
          // to fake a 3d effect
          ctx.drawImage(img,0,0,img.width,img.height,
              left,
              10,
              (300-(right-left))/1,
              300-(right-left)/1.5);

          ctx.restore();

          // request new frame
          requestAnimFrame(function() {
            animate();
          });
        }
        animate();

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

</head>

<body>
    <canvas id="canvas" width=300 height=235></canvas>
</body>
</html>