집 >웹 프론트엔드 >H5 튜토리얼 >HTML5 캔버스 기본 그리기 선 그리기

HTML5 캔버스 기본 그리기 선 그리기

不言원래의: 2018-06-05 15:12:032037검색

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 이 글에서는 주로 HTML5 캔버스의 기본 그리기에서 선을 그리는 방법을 자세히 소개합니다.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 실제로 이 태그의 특별한 특징은 이 태그가 CanvasRenderingContext2D 객체를 얻을 수 있다는 것입니다. JavaScript 스크립트를 통해 그리기 위한 이 개체입니다.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 단지 그래픽을 그리기 위한 컨테이너일 뿐입니다. ID, 클래스, 스타일 등과 같은 속성 외에도 높이 및 너비 속성도 있습니다. 5ba626b379994d53f7acf72a64f9b697> 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.

1. Canvas 개체인 5ba626b379994d53f7acf72a64f9b697 요소에 해당하는 DOM 개체를 가져옵니다.
2. CanvasRenderingContext2D 개체를 가져오기 위한 Canvas 개체
3 그리기 위해 CanvasRenderingContext2D 개체를 호출합니다.

Line 속성

위에 사용된 lineWidth 속성 외에도 줄에는 다음 속성도 있습니다.

•lineCap 이 속성은 줄 끝에 있는 줄 끝의 스타일을 설정하거나 반환합니다. 다음 값을 사용할 수 있습니다.
"butt"는 선의 각 끝에 직선 모서리를 추가합니다(기본값).
"round"는 선의 각 끝에 둥근 캡을 추가합니다.
"square"는 각 선에 사각형 캡을 추가합니다. 줄 끝.

•lineJoin 속성은 두 선이 만날 때 생성되는 모서리 유형을 반환합니다.
"miter"는 날카로운 모서리를 생성합니다(기본값).
"bevel"은 경사를 생성합니다. "round"는 둥근 모서리를 만듭니다.

•miterLimit 속성은 최대 마이터 길이를 설정하거나 반환합니다(기본값은 10). 마이터 길이는 두 선이 만나는 내부 모서리와 외부 모서리 사이의 거리를 나타냅니다. miterLimit는 lineJoin 속성이 "miter"인 경우에만 유효합니다.

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

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //测试lineCap属性 
    //设置基准线便于观察 
    context.moveTo(10,10);   
    context.lineTo(10,200);   
    context.moveTo(200,10);   
    context.lineTo(200,200);   
    context.lineWidth="1";   
    context.stroke();   
    //butt 
    context.beginPath();   
    context.moveTo(10,50);   
    context.lineTo(200,50);   
    context.lineCap="butt";   
    context.lineWidth="10";   
    context.stroke();   
    //round 
    context.beginPath();   
    context.moveTo(10,100);   
    context.lineTo(200,100);   
    context.lineCap="round";   
    context.lineWidth="10";   
    context.stroke();   
    //square 
    context.beginPath();   
    context.moveTo(10,150);   
    context.lineTo(200,150);   
    context.lineCap="square";   
    context.lineWidth="10";   
    context.stroke();   
    //测试linJoin属性 
    //miter 
    context.beginPath();   
    context.moveTo(300,50);   
    context.lineTo(450,100);   
    context.lineTo(300,150);   
    context.lineJoin="miter";   
    context.lineWidth="10";   
    context.stroke();   
    //round 
    context.beginPath();   
    context.moveTo(400,50);   
    context.lineTo(550,100);   
    context.lineTo(400,150);   
    context.lineJoin="round";   
    context.lineWidth="10";   
    context.stroke();   
    //square 
    context.beginPath();   
    context.moveTo(500,50);   
    context.lineTo(650,100);   
    context.lineTo(500,150);   
    context.lineJoin="bevel";   
    context.lineWidth="10";   
    context.stroke();   
    //测试miterLimit属性 
    context.beginPath();   
    context.moveTo(700,50);   
    context.lineTo(850,100);   
    context.lineTo(700,150);   
    context.lineJoin="miter";   
    context.miterLimit="2";   
    context.lineWidth="10";   
    context.strokeStyle="#2913EC";   
    context.stroke();

각 속성의 다양한 값 의 효과는 다음과 같습니다.

HTML5 캔버스 기본 그리기 선 그리기

관련 기사