h5 새 탭: canvas (인라인 블록 요소)

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    


    "cvs" style="box-shadow: 0 0 10px rgba(100,200,255,.8);" width=500 height=500>
         canvas， ！
    

    
        var oCvs = document.getElementById(<span class="hljs-string">"cvs"</span>);
        // canvas.getContext(<span class="hljs-string">"2d"</span>);  ， ；
        var ctx = oCvs.getContext(<span class="hljs-string">"2d"</span>);

        //  
        ctx.beginPath(); 
        ctx.moveTo(10, 200);
        ctx.lineTo(490, 200);
        ctx.stroke();

        //  
        ctx.beginPath(); 
        ctx.moveTo(200, 10);
        ctx.lineTo(200, 490);
        ctx.stroke();

        //  ...
        ctx.font = <span class="hljs-string">"30px  "</span>;
        //  
        ctx.textAlign = <span class="hljs-string">"right"</span>;
        //  
        ctx.textBaseline = <span class="hljs-string">"bottom"</span>;

        //  
        // ctx.fillText(<span class="hljs-string">" "</span>, 200, 200);

        ctx.strokeText(<span class="hljs-string">" "</span>, 200, 200);
    

전재 대상:https://juejin.im/post/5c821af15188257e8f61660c