Menu
How can i rotate the image (eg. to 45degrees) and squash the image. supposed i have a perfect square image. I can rotate it to any angle i want but i want to make the rotated square squashed, making the height 2/3 smaller than the width. the resulting image would be not a perfect rotated square but a squashed one.
do you know how can I achieve the effect?
290
Squishing a square is exceedingly easy, simply apply a scale:
ctx.scale(1, 2/3); // squish it to 2/3 vertical size
You'll have to translate it by the (opposite fraction * the height) / 2 to get it centered, though.
So to rotate and then squish a 200x200 square image you'd simply:
// 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);
Example: http://jsfiddle.net/simonsarris/3Qr3S/
51
You can use 2D canvas to “fake” 3d by distorting width vs height
Do this by using context.drawImage and varying the width vs the height disproportionally
// 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);
You can play with the distortion ratios to get different effects, but it’s all just “squishing”.
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/J2WfS/
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
