HTML5 캔버스에 대한 자세한 소개

이 글에서는 주로 HTML5 캔버스를 소개합니다. canvas 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다. 관심있는 친구들은 함께 배워보세요

HTML5 캔버스의 기능에 대해

1. 캔버스의 활용

1. 먼저 캔버스(캔버스)를 생성하세요

<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>

2. JavaScript를 사용하여 이미지를 그려보세요

<script>
      Var c=document.getElementByID(“myCanvas”)//得到画布
      Var ctx=c.getContext(“2d”);//得到画笔
      Cxt.fillStyle=”#FF0000”;//填充颜色
      Cxt.fillRect(0,0,150,75);//规定顶点
</script>

3 . Canvas - Path

moveTo(x,y) 선의 시작 좌표를 정의합니다

lineTo(x,y) 선의 끝 좌표를 정의합니다

1, Canvas 정의

<canvas id="myCanvas" width="400" height="200">

Default 캔버스는 페이지에 경계선 없는 빈 직사각형을 표시합니다. 윤곽선을 표시하려면 스타일 규칙을 정의하여 점선 테두리를 추가하세요.

canvas {
    border: 1px dashed black;
}

2, Canvas

의 컨텍스트 개체를 가져옵니다. 그리기 작업을 완료하려면 먼저 다음을 가져와야 합니다. 개체를 사용하여 2차원 그리기 컨텍스트를 얻습니다.

다음 예에서는 페이지가 로드될 때 그리기 컨텍스트를 얻는 방법을 보여줍니다.

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        //这里写绘图代码
    }
</script>

3, 직선 그리기

(1) 아래에서 시작점은 (50,50)이고 끝점은 (150,150)입니다. 직선

context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();

(2) lineWidth 및 스트로크 스타일 속성 을 사용하여 선의 너비와 색상을 각각 설정합니다.

//线条宽度
context.lineWidth = 10;
 
//线条颜色（支持颜色编码与rgb()函数）
context.strokeStyle = "#cd2828";
context.strokeStyle = "rgb(205,40,40)";
 
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();

(3) lineCap 속성을 사용하여 선의 양쪽 끝 모양을 설정합니다(선 머리 유형):

1. butt: 사각형 머리(기본값)

2. round: 둥근 머리

3. square: 길어진 사각형 머리( 효과는 엉덩이와 비슷하지만 선의 양쪽 끝에 선 너비의 절반이 추가됩니다. 위의 예에서는 새로운 선분을 그리기 시작할 때마다 BeginPath() 메서드를 호출해야 함을 알 수 있습니다.

이러한 단계가 없으면 스트로크()가 호출될 때마다 캔버스의 원래 선분이 다시 그려집니다. 특히 위의 예시처럼 새로운 선분을 그릴 때에는 반드시 context 속성을 수정해야 합니다. BeginPath() 메서드를 호출하지 않으면 원래의 직선도 새로운 스타일로 그려지게 됩니다.

위 내용은 HTML5 캔버스에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!