canvas-render-html
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="xxx,xxx">
    <meta name="description" content="xxx">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas-render-html alpha版本演示</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        *{
            box-sizing: border-box;
            /* font-family: Menlo, Monaco, "Courier New", monospace; */
        }
        #container{
            display: flex;
            height: 100%;
            box-sizing: border-box;
        }
        #code{
            width: 100%;
            margin-top: 40px;
            border-radius: 0;
            border: none;
        }
        #canvasDiv{
            flex: 1;
            padding: 5px;
        }
        #canvas{

        }
        #codeDiv{
            flex: 1;
            position: relative;
        }
        #title{
            background-color: #333;
            color: #fff;
            position: absolute;
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
        }
        #titleText{
            margin-left: 10px;
            font-weight: bold;
        }
        #title button{
            height: 30px;
            background-color: #fff;
            outline: none;
            border: none;
            position: absolute;
            right: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="codeDiv">
            <div id="title">
                <span id="titleText">Canvas Render HTML(0.0.1-aplha)</span>
                <button onclick="rendering()">Rendering</button>
            </div>
            <div id='code'></div>
            <!-- <textarea></textarea> -->
        </div>
        <div id="canvasDiv">
            <canvas id="canvas"></canvas>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/tc-editor"></script>
    <!-- <script src="http://localhost:8080/bundle.js"></script> -->
    <!-- <script src="./npm/canvas-render-html.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/canvas-render-html"></script>
    <script>

        var html = /* html*/`<div style='color:#222;font-size:20px'>
  Canvas Render HTML(
  <span style='color: #00e'>0.0.1-aplha</span>
  )
</div>
<span style='color:#f44;font-size:16px'>
  Hello World!
</span>`

        const editor = new TCEditor({
            el: '#code',
            buttons: false,
            code: html,
            width: '100%',
            height: window.innerHeight - 40 + 'px',
        });

        const body = RenderHTML({
            html: html,
            canvas: document.getElementById('canvas'),
            width: window.innerWidth/2,
            height: window.innerHeight
        });

        function rendering(){
            body.innerHTML = editor.code();
        }
    </script>
</body>
</html>