0

有人可以建议如何将画布上的图像从矩形转换为梯形吗？

例如，我有一个 100x200 的图像矩形和 300x300 的画布。然后我想转换我的图像并将角放在以下点：100,0; 200,0; 0,300；300,300 并且转换应该重新调整图像大小以适应新图形。

4

1 回答 1

4

我明白了，你想做一个 y 旋转（就像星球大战滚动介绍）。

当前画布 2d 上下文变换矩阵不可能

二维变换矩阵如下所示，最后一个值固定为 0,0,1：

M11、M21、dx

M12、M22、dy

0, 0, 1

您需要一个如下所示的 y 旋转矩阵：

cosA, 0, 正弦A

0, 1, 0

-sinA, 0, cosA

但是你不能设置 -sinA, 0, cosA

[上一个答案]

以下是将包含矩形的图像更改为包含梯形的图像的方法

您必须单独绘制空中飞人的每条腿。但是您可以绘制 3 条边，然后使用 closePath() 自动绘制第 4 条边。

此代码在矩形和梯形之间进行动画处理并缩放剪裁的图像。此代码假定您希望图像以保持缩放图像尽可能大的方式呈现。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/7T2YQ/

<!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");
        ctx.lineWidth=5;

        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="http://dl.dropbox.com/u/139992952/stackoverflow/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 the clipping trapezoid
          defineTrapezoid(left,right);
          ctx.clip();

          // draw trapezoid border
          defineTrapezoid(left,right);
          ctx.stroke();

          // draw image clipped in trapeze
          var imgX=left/2;
          var imgY=left;
          var w=300-left;
          ctx.drawImage(img,0,0,img.width,img.height,imgX,imgY,w,w);

          ctx.restore();

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

        function defineTrapezoid(left,right){
            ctx.beginPath();
            ctx.moveTo(left,0);
            ctx.lineTo(right,0);
            ctx.lineTo(300,300);
            ctx.lineTo(0,300);
            ctx.closePath();
        }        

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

</head>

<body>

<canvas id="canvas" width=300 height=300></canvas>


</body>
</html>
于 2013-04-01T19:55:19.310 回答