HTML5 Canvas API_html5 튜토리얼 팁을 사용하여 직사각형을 그리는 최고의 전략

closePath()를 사용하여 모양을 닫습니다.
먼저 가장 일반적인 방법을 사용하여 직사각형을 그립니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. html>   
2. "ko">   
3.   
4.      "UTF-8">   
5.     제목>   
6.   
7.   
8. html>   
9. "zh">   
10.   
11.      "UTF-8">   
12.     绘제조형   
13.   
14.   
15. "캔버스 워프">   
16.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">   
17.         이런 것은 캔버스?！赶快换一个吧！！   
18.     캔버스>   

  

  

  

    window.onload = 함수(){   

        var canvas = document.getElementById("canvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

  

        context.beginPath();   

        context.moveTo(150,50);   

        context.lineTo(650,50);   

        context.lineTo(650,550);   

        context.lineTo(150,550);   

        context.lineTo(150,50);     //绘system最后一笔使图이미지闭합   

        context.lineWidth = 5;   

        context.StrokeStyle = "검은색";   

        context.Stroke();   

  

    }