Live
x
<script type="text/template" id="template"> <view id="container"> <image src="https://res.wx.qq.com/wechatgame/product/webpack/userupload/20191119/wegoing.jpeg" class="wegoing"></image> </view></script><script id="style">window.styleValue = { container: { width: 400, height: 400, backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center', }, wegoing: { width: 200, height: 200, borderRadius: 100, },}</script><canvas id="canvas">
Live
xxxxxxxxxx27
import Layout from "https://cdn.skypack.dev/minigame-canvas-engine";/** * 只需要在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);Layout.init(template, style);let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');// 设置canvas的尺寸和样式的container比例一致canvas.style.width = 400 + 'px';canvas.style.height = 400 + 'px';canvas.width = 400;canvas.height = 400;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.