<script type="text/template" id="template">
  <view id="container">
    <text class="testText" value="Layout with default font"></text>
  <text class="testText familyTest"  value="Layout with font `Times New Roman`"></text>
  </view>
</script>

<script id="style">
window.styleValue = {
  container: {
    width: 800,
    height: 400,
    backgroundColor: '#f3f3f3',
    justifyContent: 'center',
    alignItems: 'center',
  },
  testText: {
    color: '#ffffff',
    width: '100%',
    height: 100,
    lineHeight: 100,
    fontSize: 35,
    textAlign: 'center',
     color: '#ff0000',
  },
  familyTest: {
    fontFamily: 'Times New Roman'
  }
}
</script>

<canvas id="canvas">
import Layout from "https://cdn.skypack.dev/minigame-canvas-engine";
import * as dot from "https://cdn.skypack.dev/dot@1.1.3";

/**
 * 只需要在Web端调试场景下引用
 * 引入minigame-canvas-engine-devtools之后，layoutDevtools会自动挂载到windows
 */
import LayoutDevTools from "https://cdn.skypack.dev/minigame-canvas-engine-devtools";
window.layoutDevtools.init(Layout);

const template = document.getElementById('template').innerHTML;
const style = eval(document.getElementById("style").innerHTML);

const it = {
  title: 'hello canvas'
}

// 将XML模板编译成XML字符串
let tempFn = dot.template(template);
let resultText = tempFn(it);

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

Layout.init(resultText, style);

const container = Layout.getElementsById('container')[0];

// 设置canvas的尺寸和样式的container比例一致
canvas.style.width = container.style.width / 2 + 'px';
canvas.style.height = container.style.height / 2 + 'px';
canvas.width = container.style.width;
canvas.height = container.style.height;

Layout.updateViewPort(canvas.getBoundingClientRect());

Layout.layout(context);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.