ストレッチ画像は、私はこのような正方形のイメージを持っているポリゴンHTML5のキャンバス

Question

に合わせて私はキャンバス上に次のjavascriptを使って上記のイメージとしてポリゴンを作成することができました：

function drawCanvas() { 
     var c2 = document.getElementById('myCanvas6').getContext('2d'); 
     var img = document.getElementById("scream"); 
     c2.fillStyle = '#000'; 
     c2.beginPath(); 
     c2.moveTo(20, 20); 
     c2.lineTo(320, 50); 
     c2.lineTo(320, 170); 
     c2.lineTo(20, 200); 
     //c2.drawImage(img, 150, 10, img.width, img.height); 
     c2.closePath(); 
     c2.fill(); 

    } 

drawImage()メソッドを使ってみましたが、ポイントA、B、C、Dを新しい位置に伸ばしません。とにかくこれが達成できますか？

Answer 1

私はこれがあなたのために良い解決策だと思う。ここでhttp://jsfiddle.net/fQk4h/ は魔法です：

for (i = 0; i < w; i++) { 
dy = (leftTop * (w - i))/w; 
dh = (leftBot * (w - i) + h * i)/w; 
ctx.drawImage(tmpCtx.canvas, 
    i, 0, 1, h, 
    i, dy, 1, dh); 
} 

ctx.restore(); 

Answer 2

2Dキャンバスは非常に良い理由のために2Dと呼ばれています。方法は常にある必要がある場合、あなたはに画像を切断することにより、それを行うことができます。..

をので、（平行でない）、2D

その辺のいずれかが収束するような四角形を変換することはできませんが、各スライスを最後のスライスより少し小さく描画します。

人間は、収束すると画像が歪むのが好きではないので、私たちが期待する歪みを加える必要があります。オブジェクトを遠ざけるほど、点間の距離が小さくなります。

そこで以下機能は上端と下端が収束して画像を描画..

それは真の3Dではないが、それは、Y工程を低下させることなく、上部及び底部を収束ジュースのように歪んだような画像を表示させるありません。アニメーションは少し錯視を導入しました。 2番目のレンダリングはイメージを短くして見せかけます。

機能の使用方法に関するコードを参照してください。キャンバスを使用して

/** CreateImage.js begin **/ 
 
// creates a blank image with 2d context 
 
var createImage=function(w,h){var i=document.createElement("canvas");i.width=w;i.height=h;i.ctx=i.getContext("2d");return i;} 
 

 
/** CreateImage.js end **/ 
 

 
var can = createImage(512,512); 
 
document.body.appendChild(can); 
 
var ctx = can.ctx; 
 
const textToDisplay = "Perspective" 
 
const textSize = 80; 
 
ctx.font = textSize+"px arial"; 
 
var w = ctx.measureText(textToDisplay).width + 8; 
 
var text = createImage(w + 64,textSize + 32); 
 
text.ctx.fillStyle = "#08F"; 
 
text.ctx.strokeStyle = "black"; 
 
text.ctx.lineWidth = 16; 
 
text.ctx.fillRect(0,0,text.width,text.height); 
 
text.ctx.strokeRect(0,0,text.width,text.height); 
 
text.ctx.font = textSize+"px arial"; 
 
text.ctx.fillStyle = "#F80"; 
 
text.ctx.strokeStyle = "Black"; 
 
text.ctx.lineWidth = 4; 
 
text.ctx.strokeText(textToDisplay,38,textSize + 8); 
 
text.ctx.fillText(textToDisplay,38,textSize + 8); 
 

 

 

 

 

 

 
// Not quite 3D 
 
// ctx is the context to draw to 
 
// image is the image to draw 
 
// x1,x2 left and right edges of the image 
 
// zz1,zz2 top offset for left and right 
 
// image top edge has a slops from zz1 to zz2 
 
// yy if the position to draw top. This is where the top would be if z = 0 
 
function drawPerspective(ctx, image, x1, zz1, x2, zz2, yy){ 
 
    var x, w, h, h2,slop, topLeft, botLeft, zDistR, zDistL, lines, ty; 
 
    w = image.width;     // image size 
 
    h = image.height; 
 
    h2 = h /2;       // half height 
 
    slop = (zz2 - zz1)/(x2 - x1);  // Slope of top edge 
 
    z1 = h2 - zz1;      // Distance (z) to first line 
 
    z2 = (z1/(h2 - zz2)) * z1 - z1; // distance (z) between first and last line 
 
    if(z2 === 0){ // if no differance in z then is square to camera 
 
     topLeft = - x1 * slop + zz1;  // get scan line top left edge 
 
     ctx.drawImage(image,0, 0, w, h,x1, topLeft + yy ,x2-x1, h - topLeft * 2) // render to desination 
 
     return; 
 
    } 
 
    // render each display line getting all pixels that will be on that line 
 
    for (x = x1; x < x2; x++) {     // for each line horizontal line 
 
     topLeft = (x - x1) * slop + zz1;  // get scan line top left edge 
 
     botLeft = ((x + 1) - x1) * slop + zz1; // get scan line bottom left edge 
 
     zDistL = (z1/(h2 - topLeft)) * z1; // get Z distance to Left of this line 
 
     zDistR = (z1/(h2 - botLeft)) * z1; // get Z distance to right of this line 
 
     ty  = ((zDistL - z1)/z2) * w;  // get y bitmap coord 
 
     lines = ((zDistR - z1)/z2) * w - ty;// get number of lines to copy 
 
     ctx.drawImage(image, 
 
      ty % w, 0, lines, h,    // get the source location of pixel 
 
      x, topLeft + yy,1 , h - topLeft * 2 // render to desination 
 
     ); 
 
    } 
 
} 
 

 

 
var animTick = 0; 
 
var animRate = 0.01; 
 
var pos = 0; 
 
var short = 0; 
 
function update1(){ 
 
    animTick += animRate; 
 
    pos = Math.sin(animTick) * 20 + 20; 
 
    short = Math.cos((pos/40) * Math.PI) * text.width * 0.12 - text.width * 0.12; 
 
    ctx.clearRect(0,0,can.width,can.height) 
 

 
    drawPerspective(ctx,text,0,0,text.width,pos,20) 
 

 
    drawPerspective(ctx,text,0,0,text.width+short,pos,textSize + 32 + 30) 
 

 

 
    requestAnimationFrame(update1); 
 
} 
 
update1();