BOX2D.JS如何显示物体图片

最新推荐文章于 2024-03-26 09:44:08 发布

一粒马豆

最新推荐文章于 2024-03-26 09:44:08 发布

阅读量945

点赞数

文章标签： box2d.js 自定义图片 canvas html5 javascript

本文链接：https://blog.csdn.net/MAILLIBIN/article/details/48529835

版权

BOX2D.JS原本只会通过debugDraw()绘制简单的示意图，要使用我们自己定义的物体图片并显示出来则需要通过获取BOX2D.JS调制绘制DrawDebugData数据中相关物体的坐标、角度、大小，然后依此自己绘制图片到页面上的canvas。

以下是参考案例

<html>

   <head>
      <title>Box2dWeb example</title>
   </head>
   
   <body οnlοad="init();">
   
      <canvas id="canvas" width="640" height="480"></canvas>
	  
	  <!--把图片预先加载隐藏-->
	  <div id="assets" style="display:none">
        <img id="villa" src="villa.png" />
		<img id="house" src="house.png" />
      </div>
	  
   </body>
   
<script type="text/javascript" src="Box2D.js"></script>
<script type="text/javascript">

function init() {
	var b2Vec2 = Box2D.Common.Math.b2Vec2;
	var b2AABB = Box2D.Colli

最低0.47元/天解锁文章

一粒马豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOX2D.JS如何显示物体图片

BOX2D.JS原本只会通过debugDraw()绘制简单的示意图，要使用我们自己定义的物体图片并显示出来则需要通过获取BOX2D.JS调制绘制DrawDebugData数据中相关物体的坐标、角度、大小，然后依此自己绘制图片到页面上的canvas。以下是参考案例 Box2dWeb example
复制链接

扫一扫