# 快速入门
# 安装
// npm安装方式
npm install minigame-canvas-engine --save
# 极简示例
- 引用渲染引擎:
import Layout from 'minigame-canvas-engine'
- 编写模板字符串:这里采用XML去描述界面,而且支持有限的标签。需要特别注意的是,模板字符串只能有一个根节点,第二个节点会被忽略。如果想让模板更加强大,可以借助第三方模板引擎如dot.js (opens new window)。
let template = `
<view id="container">
<text id="testText" class="redText" value="hello canvas"></text>
</view>
`
- 编写样式:样式为一个style对象,与Web开发不同的是,不受属性前后顺序的影响,class的属性会覆盖id的同名属性。
TIP
由于采用了第三方的布局引擎css-layout,在编写样式的时候为所有元素都设置好width和height属性会更容易得到想要的效果,其中根节点必须设置width和height属性。
let style = {
container: {
width: 400,
height: 200,
backgroundColor: '#ffffff',
justContent: 'center',
alignItems: 'center',
},
testText: {
color: '#ffffff',
width: '100%',
height: '100%',
lineHeight: 200,
fontSize: 40,
textAlign: 'center',
},
// 文字的最终颜色为#ff0000
redText: {
color: '#ff0000',
}
}
- 初始化渲染引擎:将第二第三步编写的模板和样式传给渲染引擎,渲染引擎会生成布局树和渲染树等,准备渲染到canvas上面。
Layout.init(template, style);
- 执行渲染:指定被渲染的context,绘制UI
// 首先在HTML里面创建canvas
// <canvas id="canvas"></canvas>
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
// 设置canvas的尺寸和样式的container比例一致
canvas.style.width = 400 + 'px';
canvas.style.height = 200 + 'px';
canvas.width = 400;
canvas.height = 200;
Layout.updateViewPort({
x : 0,
y : 0,
width : 400,
height: 200,
});
Layout.layout(context);
- 渲染结果

- 事件绑定
let text = Layout.getElementsById('testText')[0];
text.on('click', (e) => {
alert('hello canvas');
});