html5中canvas繪製線段

cherishSpring發表於2016-07-27
HTMLCanvas
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>繪製線段</title>
    </head>
    <body>
        <canvas id="myCanvas" width="500" height="500"></canvas>
        <!--
            context.moveto(x,y);
            context.lineto(x,y);
            x,y  座標
            每次畫線都從moveTo的點到lineTo的點，
                如果沒有moveTo那麼第一次lineTo的效果和moveTo一樣，
                每次lineTo後如果沒有moveTo，那麼下次lineTo的開始點為前一次lineTo的結束點
        -->
        <script type="text/javascript">
            var canvas=document.getElementById('myCanvas');
            var context=canvas.getContext('2d');
            
            context.strokeStyle="blue";
            
            context.lineTo(100,100);
            context.lineTo(100,200);
            
            context.moveTo(100,200);
            context.lineTo(200,100);
            context.stroke();
        </script>
    </body>
</html>

相關文章