[英]Javascript Canvas Skew Image Vertically
Is it possible to skew an image on a canvas to make it appear as a reflection of another image? 是否可以在画布上倾斜图像以使其显示为另一个图像的反射?
Here is an illustration: 这是一个例子:
I need to flip and skew the image to get the desired effect, but I have not been able to get it to look like that. 我需要翻转和倾斜图像以获得所需的效果,但我无法让它看起来像那样。 How can this be achieved?
怎么能实现这一目标?
I have found this example: 我找到了这个例子:
http://jsfiddle.net/jpnrzc9y/ http://jsfiddle.net/jpnrzc9y/
ctx.save();
ctx.transform(1,0,0.3,-1,0,0);
ctx.drawImage(tree1,74,-117,20,40);
ctx.restore();
They seem to set the transform based on some random values. 他们似乎根据一些随机值设置变换。
But I cannot make sense of it. 但我无法理解它。 The values seem very random to me.
这些值对我来说似乎很随机。 Im trying to create a dynamic function that allows me to determine the amount of skew and that works for all images.
我试图创建一个动态函数,允许我确定偏斜量,并适用于所有图像。
You can use context.scale
to flip an image vertically: 您可以使用
context.scale
垂直翻转图像:
// flip the canvas vertically
context.scale(1,-1);
Here are the steps to create a skewed reflection of an image: 以下是创建图像倾斜反射的步骤:
Move (move==translate) the 0,0 origin to the desired x,y: ctx.translate(x,y);
将0,0原点移动(移动==平移)到所需的x,y:
ctx.translate(x,y);
Draw the original image image: ctx.drawImage(img,0,0);
绘制原始图像图像:
ctx.drawImage(img,0,0);
Move to the bottom of the original image: ctx.translate(0,img.height);
移动到原始图像的底部:
ctx.translate(0,img.height);
Scale to vertically flip the image: ctx.scale(1,-1);
缩放以垂直翻转图像:
ctx.scale(1,-1);
Apply a skew: ctx.transform(1,0,skewAngle,1,0,0);
应用倾斜:
ctx.transform(1,0,skewAngle,1,0,0);
Shrink the reflected image (just for aesthetics): ctx.scale(1,0.50);
缩小反射图像(仅用于美观):
ctx.scale(1,0.50);
Make the reflected image 50% opacity: ctx.globalAlpha=0.50;
使反射图像的透明度为50%:
ctx.globalAlpha=0.50;
Draw the reflected image: ctx.drawImage(img,0,-img.height);
绘制反射图像:
ctx.drawImage(img,0,-img.height);
Clean up by setting all transforms to default: ctx.setTransform(1,0,0,1,0,0);
通过将所有变换设置为默认值进行清理:
ctx.setTransform(1,0,0,1,0,0);
Here's example code and a demo: 这是示例代码和演示:
var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var img=new Image(); img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/multple/character1.png"; function start(){ // 60x110 skewedReflection(img,25,25) } function skewedReflection(img,x,y){ // calc the 45 degree skew angle needed by ctx.transform var skewAngle=-Math.tan(Math.PI/4); // move the 0,0 origin to x,y ctx.translate(x,y); // draw the original image image ctx.drawImage(img,0,0); // move to the bottom of the original image ctx.translate(0,img.height); // use scale to flip the image ctx.scale(1,-1); // apply a skew ctx.transform(1,0,skewAngle,1,0,0); // shrink the reflected image ctx.scale(1,0.50); // make the reflected image 50% opacity ctx.globalAlpha=0.50; // draw the reflected image ctx.drawImage(img,0,-img.height); // clean up by setting all transforms to default ctx.setTransform(1,0,0,1,0,0); }
body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.