PixiJS学习（1）创建一个canvas

最新推荐文章于 2023-07-14 14:32:37 发布

幻蝶Love

最新推荐文章于 2023-07-14 14:32:37 发布

阅读量1.6k

点赞数 2

分类专栏： PixiJs 文章标签： PixiJS 渲染引擎

本文链接：https://blog.csdn.net/xiechao_5800/article/details/102522925

版权

PixiJs 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

简介

PixiJs是一款轻量级的渲染引擎库

官网地址：https://www.pixijs.com/

github：https://github.com/pixijs/pixi.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.0/pixi.min.js"></script>

实例代码 index.html

// 代码使用了 vue.min.js 望见谅 后续代码只会有核心代码
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta content="a1z51.23600852" name="spm-id" />
<title>
	pixi.js基础（1）
</title>
<script src="./lib/zepto.min.js?t=1500513648235"></script>
<script src="./lib/vue.min.js?t=1502325746688"></script>
<script src="./lib/veryless.js?t=1502325746688"></script>
<script src="./lib/pixi.min.js?t=1502325746688"></script>
<style>
html,
body {
	position: relative;
	height: 100%;
}

body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	color: #000;
	margin: 0;
	padding: 0;
}
.piximove {
	position: absolute;
	height: 8rem;
	width: 8rem;
	left: 1rem;
	top: 1rem;
}
</style>
</head>

<body>
	<div id="app">
		<div class="piximove" id="pixijs"></div>
	</div>
</body>
<script>
//vue
$(document).ready(() => {
var app = new Vue({
	el: "#app",
	data() {
        return {
            frameStage: null, //舞台
		}
    },
    methods: {
        test() {
            console.log("测试" + (new Date).getTime());
        }
    },
    mounted() {
        //创建一个Application，设置长宽
        this.frameStage = new PIXI.Application({
            width:600,
            height:600,
            backgroundColor: 0xff0000, //渲染区域的背景颜色（如果不透明则显示）
            // transparent: true, //是否透明
            // antialias: true, //设置抗锯齿
            // forceCanvas: true //阻止选择WebGL渲染器
        });

        console.log(this.frameStage);
        
        //将舞台添加到DOM元素
        document.getElementById("pixijs").appendChild(this.frameStage.view);
        
        //停止渲染
        // this.frameStage.stop();

        //停止渲染的先后顺序
        // setTimeout(()=>{
        // 	this.frameStage.stop();
        // },1000)


        //调整画布大小
        // this.frameStage.renderer.view.width = 800;

        //添加计时器
        // this.frameStage.ticker.add(this.test);
    }
})
})
</script>

</html>

创建一个canvas：


// 创建一个Application，设置长宽
this.frameStage = new PIXI.Application({
    width:600,
    height:600,
    backgroundColor: 0xff0000, //渲染区域的背景颜色（如果不透明则显示）
    // transparent: true, //是否透明
    // antialias: true, //设置抗锯齿
    // forceCanvas: true //阻止选择WebGL渲染器
});

console.log(this.frameStage);

// 将舞台添加到DOM元素中

document.getElementById("pixijs").appendChild(this.frameStage.view);

// 停止渲染
// this.frameStage.stop();

// 停止渲染的先后顺序
// setTimeout(()=>{
// 	this.frameStage.stop();
// },1000)


// 调整画布大小
// this.frameStage.renderer.view.width = 800;

// 添加计时器
// this.frameStage.ticker.add(this.test);

// 销毁整个 canvas
// this.frameStage.destroy(true, true);

在 PixiJs 中实现其实都是在一个 canvas 中，上述过程就是创建了一个可以渲染到 Canvas。它的渲染方式可以是 canvas 也可以是 WebGL，而且自己会做降级处理；

销毁这个画布：

在整个 pixiJs 中，基本上所以的对象都有 destroy 这个销毁方法。这样可以释放内存。

关于一些问题的记录和总结：

IOS 锯齿严重：打开抗锯齿和使用 canvas 渲染模式
滑动异常：PixiJs 会吃掉手势事件，不会传递到父元素。如果是纯展示效果，可以给元素之间加 CSS 穿透属性，如果还需要处理其他东西（滑动、点击）就需要自己处理了

关于创建 canvas 的其他参数：

http://pixijs.download/release/docs/PIXI.Application.html

幻蝶Love

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
PixiJS学习（1）创建一个canvas

简介PixiJs是一款轻量级的渲染引擎库官网地址：https://www.pixijs.com/github：https://github.com/pixijs/pixi.js<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.0/pixi.min.js"></script>...
复制链接

扫一扫