一篇带给你Pixi.js 入门 (一):绘制图形

一篇带给你Pixi.js 入门 (一):绘制图形,简单入门 pixi.js。,pixi.js 是一个快速、灵活的 2D WebGL 渲染引擎。,该库基于 Canvas 封装,默认优先使用 WebGL 进行二维图形绘制,充分利用 GPU 硬件加速能力。如果不支持,会回退到 2D 模式,因为 2D 模式是上层的抽象,所以性能会差一些。,首先创建一个 Application 实例。,我们使用 PIXI.Application 类创建一个新 PixiJS 应用。,该类可以传入配置对象,比如画布宽高(width / height)、背景色(backgroudColor,默认为黑色)、挂载的 canvas 元素(view,不提供 PixiJS 会创建一个)等。,app.view 可以得到 PixiJS 应用挂载的 Canvas 元素。,绘制图形需要先创建 Graphics 实例,然后调用其下的方法。,一个 Graphics 代表一个图形,当然也可以在单个 Graphics 绘制多个图形。,绘制红色矩形:,app.stage 是图形渲染的根节点,我们创建的 graphics 需要添加到 stage 下,这样才会被渲染出来。,绘制圆形:,绘制精灵:,绘制曲线不支持 SVG 的那种方便的 指令字符串 写法:,只能用类似原生 Canvas 写法那样,一步步绘制了。个人觉得很繁琐,指令字符串言简意赅多好的抽象。,使用容器,可以将多个图形进行组合,然后在其上添加位移、旋转等属性,其下的图形会得到这些效果。,Container 不绘制图形,它组合图形,类似 SVG 的 group 元素。,一些基本的用法。

文章版权声明

 1 原创文章作者:cmcc,如若转载,请注明出处: https://www.52hwl.com/16961.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年3月5日 上午12:00
下一篇 2023年3月7日 下午10:34