HTML5 canvas drawImage using points?(HTML5画布drawImage使用点?)
问题描述
我需要使用 4 个点来绘制图像.我将这 4 个点存储在一个数组中,这些位置会发生变化.现在我需要绘制一个反映这些位置的图像.context.drawImage 只接受 1 个位置.
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.
应该是这样,4个位置:
It should be like this, 4 positions:
x,y----------x,y
| |
| |
| |
| |
| |
x,y----------x,y
推荐答案
你要找的就是用 3D 渲染语言画一个四边形.
What you are looking for is called drawing a quad in 3D rendering language.
您通常将形状拆分为 2 个三角形(面)并使用纹理填充分别绘制它们.
You usually split up your shape to 2 triangles (faces) and draw them individually using a texture filling.
这里有一个(复杂的)解决方案:https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L838 Three.js 3D引擎使用2D <canvas>code> 作为渲染引擎.
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.
由于事情不是那么简单,我建议您使用 Three.js 或类似的包装器,它提供了对纹理面部操作的高级抽象.查看其他 Three.js 2D <canvas>
示例,您就会了解它的工作原理:
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画布drawImage使用点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:HTML5画布drawImage使用点?
基础教程推荐
- Chart.js 在线性图表上拖动点 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01