Canvas 기술의 응용을 깊이 익히십시오.-HTML 튜토리얼-php.cn

Canvas 기술의 응용을 깊이 익히십시오.

캔버스 기술은 웹 개발에서 매우 중요한 부분입니다. 캔버스를 사용하여 웹 페이지에 그래픽과 애니메이션을 그릴 수 있습니다. 웹 애플리케이션에 그래픽, 애니메이션 및 기타 요소를 추가하려면 Canvas 기술을 놓치지 마세요. 이 기사에서는 Canvas 기술에 대해 자세히 살펴보고 구체적인 코드 예제를 제공합니다.

캔버스 소개

캔버스는 웹 페이지에 그래픽과 애니메이션을 동적으로 그릴 수 있는 방법을 제공하는 HTML5의 요소 중 하나입니다. Canvas는 2D와 3D라는 두 가지 그리기 방법을 제공합니다. 이 기사에서는 주로 2D 그리기에 대해 설명합니다.

Canvas의 기본 사용

Canvas는 HTML5의 요소입니다. 이를 사용할 때는 HTML 문서에서 Canvas 요소만 생성하면 됩니다.

<canvas id="myCanvas"></canvas>

로그인 후 복사

JavaScript에서는 Canvas의 getContext() 메서드를 사용할 수 있습니다. 그리기 작업을 위해 그리기 컨텍스트를 얻습니다. 예:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

로그인 후 복사

2D 컨텍스트를 얻은 후 그리기 작업을 시작할 수 있습니다. 일반적으로 그리기 과정은 대략 다음과 같습니다.

선 너비, 색상 등과 같은 그리기 매개변수 설정
원이나 직사각형 그리기와 같은 경로 시작
채우기와 같은 그래픽 그리기; 직사각형, 호 그리기 등
경로 끝.

다음은 Canvas에서 빨간색 사각형을 그리는 가장 기본적인 예입니다.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

로그인 후 복사

이 예에서는 먼저 Canvas의 컨텍스트를 얻은 다음 빨간색 채우기 색상을 설정하고 fillRect() 메서드를 사용합니다. 광장.

캔버스 그리기 작업

3.1 직사각형 그리기

사각형 그리기는 캔버스에서 가장 일반적인 작업 중 하나입니다. fillRect(), 스트로크Rect() 및 ect() 메서드를 통해 채우기, 테두리 및 채우기 없이 그릴 수 있습니다. 그리고 테두리 직사각형.

fillRect(x, y, width, height): 현재 채우기 색상으로 직사각형을 채웁니다.

StrokeRect(x, y, width, height): 현재 선 스타일을 사용하여 직사각형 테두리를 그립니다.

Rect(x, y, width, height): 직사각형 경로를 생성하지만 자동으로 그려지지는 않습니다.

다음은 직사각형을 그리는 예입니다.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);

ctx.strokeStyle = "red";
ctx.strokeRect(10, 70, 100, 50);

ctx.beginPath();
ctx.rect(10, 130, 100, 50);
ctx.closePath();
ctx.stroke();

로그인 후 복사

이 예에서는 먼저 fillRect() 메서드를 사용하여 파란색 직사각형을 그리고 스트로크Rect() 메서드를 사용하여 빨간색 테두리를 그립니다. 마지막으로 ect() 메서드를 사용하여 경로를 생성하지만 즉시 그리는 대신 스트로크() 메서드를 사용하여 경로를 그립니다.

3.2 텍스트 그리기

Canvas는 텍스트를 그리는 메서드도 제공합니다. fillText() 및 스트로크텍스트() 메서드를 사용하여 캔버스에 텍스트를 그릴 수 있습니다.

fillText(text, x, y, maxWidth): 현재 채우기 스타일을 사용하여 지정된 위치에 지정된 텍스트를 그립니다.

스트로크텍스트(text, x, y, maxWidth): 현재 선 스타일을 사용하여 지정된 위치에 지정된 텍스트를 그립니다.

다음은 텍스트 그리기의 예입니다.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("Hello, Canvas!", 10, 50);

ctx.strokeStyle = "blue";
ctx.strokeText("Hello, Canvas!", 10, 100);

로그인 후 복사

이 예에서는 먼저 텍스트의 글꼴과 색상을 설정한 다음 fillText() 메서드를 사용하여 빨간색 텍스트를 그리고 스트로크텍스트() 메서드를 사용하여 텍스트를 그렸습니다. 파란색 테두리.

3.3 경로 그리기

경로 그리기는 캔버스에서 사용자 정의 모양과 선을 그리는 데 사용되는 방법 중 하나입니다. 경로를 그리는 데 BeginPath(), moveTo(), lineTo() 및 closePath() 메서드를 사용할 수 있습니다.

beginPath(): 경로를 시작하거나 현재 경로를 재설정합니다.

moveTo(x, y): 경로를 지정된 위치로 이동합니다.

lineTo(x, y): 지정된 위치에 직선을 그립니다.

closePath(): 현재 경로를 닫습니다.

다음은 경로 그리기의 예입니다.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();

로그인 후 복사

이 예에서는 먼저 BeginPath() 메서드를 호출하여 경로를 시작한 다음 moveTo() 메서드를 사용하여 경로를 (50, 50)으로 이동합니다. 그런 다음 lineTo() 메서드를 사용하여 (150, 50)까지 선을 그리고 계속해서 lineTo() 메서드를 사용하여 (150, 150)까지 선을 그리고 마지막으로 closePath() 메서드를 사용하여 선을 그립니다. 경로를 닫습니다. 마지막으로 fill() 메서드를 사용하여 경로를 채웁니다.

3.4 호 그리기

호 그리기는 캔버스에서 원, 고리 등을 그리는 데 사용되는 방법 중 하나입니다. arc() 메서드를 사용하여 그릴 수 있습니다.

arc(x, y, radius, startAngle, endAngle, anticlockwise): 현재 지점에서 시작하여 호를 그립니다.

x, y: 원 중심의 좌표.

반경: 반경.

startAngle: 시작 각도(라디안).

endAngle: 끝 각도(라디안 단위로 측정).

anticlockwise: 그리기 방향, true는 시계 반대 방향, false는 시계 방향입니다. 기본값은 거짓입니다.

다음은 호를 그리는 예입니다.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();

로그인 후 복사

이 예에서는 먼저 BeginPath() 메서드를 호출하여 경로를 시작한 다음 arc() 메서드를 호출하여 호를 그립니다. 마지막으로 선의 너비와 색상을 설정하고, 스트로크() 메서드를 호출하여 선을 그립니다.

캔버스의 애니메이션 효과

캔버스는 정적 그래픽을 그릴 수 있을 뿐만 아니라 애니메이션 효과도 얻을 수 있습니다. 이는 캔버스에 여러 그래픽을 그리고 서로 다른 시간에 다시 그리는 방식으로 이루어집니다. 타이머를 사용하면 지정된 시간 간격 내에 Canvas 그리기 메서드를 반복적으로 호출하여 애니메이션 효과를 얻을 수 있습니다.

다음은 Canvas를 사용하여 간단한 애니메이션을 구현하는 예입니다.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
var speed = 5;
var dirX = 1;
var dirY = 1;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.fillStyle = "blue";
    ctx.fill();

    if (x + radius >= canvas.width || x - radius <= 0) {
        dirX = -dirX;
    }
    if (y + radius >= canvas.height || y - radius <= 0) {
        dirY = -dirY;
    }

    x += speed * dirX;
    y += speed * dirY;

    requestAnimationFrame(animate);
}

animate();

로그인 후 복사

在这个示例中，我们使用Canvas绘制了一个蓝色圆形。然后通过不断调整圆形的位置实现动画效果。如果圆形碰到了Canvas的边界，我们就调整移动的方向。最后使用requestAnimationFrame()方法在动画完成之前不断调用animate()方法。