HTML5 canvas drawImage使用点? [英] HTML5 canvas drawImage using points?
问题描述
我需要使用4点绘制图像。我有这4个点存储在数组中,这些位置改变。现在我需要绘制一个反映这些位置的图像。 context.drawImage只接受1个位置。
应该是这样,4个位置:
x,y ---------- x,y
| |
| |
| |
| |
| |
x,y ---------- x,y
你通常把你的形状分成2个三角形(面)
这里是一个(复杂的)问题解决方案: https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js# L838 Three.js 3D引擎使用2D < canvas>
作为渲染引擎。
事情不是那么直接我建议你使用Three.js或类似的包装器提供高级抽象纹理面部操作。查看其他Three.js 2D < canvas>
示例,你会得到它的工作原理:
a href =http://mrdoob.github.com/three.js/ =nofollow> http://mrdoob.github.com/three.js/
I need to draw an image using 4 points. I have these 4 points stored in an array, these positions changes. Now I need to draw an image that reflects these positions. The context.drawImage only accepts 1 positon.
It should be like this, 4 positions:
x,y----------x,y
| |
| |
| |
| |
| |
x,y----------x,y
What you are looking for is called drawing a quad in 3D rendering language.
You usually split up your shape to 2 triangles (faces) and draw them individually using a texture filling.
Here is a (complex) solution for the problem: https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L838 Three.js 3D engine using 2D <canvas>
as the rendering engine.
As the matter is not that straightforward I suggest you use Three.js or similar wrapper which provides high level abstraction over textured face operations. Check out other Three.js 2D <canvas>
examples and you get the idea how it works:
http://mrdoob.github.com/three.js/
这篇关于HTML5 canvas drawImage使用点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!