Question

有人可以建议如何将画布上的图像从矩形变换为空中飞行吗？

例如，我有一个图像矩形100x200和画布300x300。然后我想转换我的形象，并在以下几点提出意见： 100,0; 200,0; 0,300; 300,300 转型应该重新调整图像大小以适应新的数字。

Answer 1

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

当前画布2d上下文转换矩阵

无法实现

2d变换矩阵看起来像这样，最后的值固定为0,0,1：

M11，M21，dx

M12，M22，dy

0,0,1

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

cosA，0，sinA

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>

在画布上画一个梯形

1 个答案: