HTML5 캔버스

캔버스란?

HTML5 <canvas> 요소는 스크립트(보통 JavaScript)를 통해 그래픽을 그리는 데 사용됩니다.

캔버스에 빨간색 직사각형, 그라데이션 직사각형, 색상 직사각형 및 일부 색상 텍스트를 그립니다.

<canvas> 태그는 그래픽을 담는 컨테이너이므로 그래픽을 그리려면 스크립트를 사용해야 합니다.

Canva를 사용하면 경로, 상자, 원, 문자를 그리고 다양한 방법으로 이미지를 추가할 수 있습니다.

브라우저 지원

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 <canvas> 요소를 지원합니다.

참고: Internet Explorer 8 이하 IE 버전의 브라우저는 <canvas> 요소를 지원하지 않습니다.

캔버스(Canvas)

캔버스 웹 페이지 중앙에는 <canvas> 요소를 통해 그려진 직사각형 상자가 있습니다.

참고: 기본적으로 <canvas> 요소에는 테두리와 내용이 없습니다.

<canvas>간단한 예는 다음과 같습니다.

<canvas id="myCanvas" width="200" height="100">< ;/canvas> ;

참고: 태그는 일반적으로 id 속성(종종 스크립트에서 참조됨)을 지정해야 하며 너비 및 높이 속성은 캔버스의 크기를 정의합니다. 캔버스.

팁: HTML 페이지에서 여러 <canvas> 요소를 사용할 수 있습니다.

스타일 속성을 사용하여 테두리를 추가하세요.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #28c9b6;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</body>
</html>

프로그램을 실행하고 사용해 보세요

JavaScript를 사용하여 이미지 그리기

캔버스 요소 자체에는 그리기 기능이 없습니다. 모든 그리기 작업은 JavaScript 내에서 수행되어야 합니다:

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

프로그램 실행 결과:

분석 예:

먼저 <canvas> 요소를 찾습니다.

var c=document.getElementById ("myCanvas");

그런 다음 컨텍스트 개체를 만듭니다.

var ctx=c.getContext( " 2d");

getContext("2d") 객체는 다양한 그리기 경로, 직사각형, 원, 문자, 및 추가 이미지 방법.

다음 두 줄의 코드는 빨간색 직사각형을 그립니다.

ctx.fillStyle="#FF0000";
ctx.fillRect(0, 0,150,75);

fillStyle 속성을 CSS 색상, 그라데이션 또는 패턴으로 설정합니다. fillStyle의 기본 설정은 #000000(검은색)입니다.

fillRect(x,y,width,height) 메서드는 직사각형의 현재 채우기 방법을 정의합니다.

캔버스 좌표

캔버스는 2차원 격자입니다.

캔버스 왼쪽 상단의 좌표는 (0,0)

위의 fillRect 메소드에는 (0,0,150,75)의 매개변수가 있습니다.

의미: 캔버스에 왼쪽 위 모서리(0,0)부터 시작하여 150x75 직사각형을 그립니다.

좌표 예시

아래와 같이 캔버스의 X, Y 좌표를 사용하여 캔버스에 그림을 배치합니다. 마우스가 움직이는 직사각형 프레임에 위치 좌표가 표시됩니다.

캔버스 - 경로

캔버스에 선을 그리려면 다음 두 가지 방법을 사용합니다.

moveTo(x ,y) 선 정의시작 좌표

lineTo(x,y) 선 정의좌표 끝

선을 그리려면 스트로크()와 마찬가지로 "잉크" 방법을 사용해야 합니다.

인스턴스

시작 좌표를 정의합니다. (0,0) 및 끝 좌표(200,100) 그런 다음 스트로크() 메서드를 사용하여 선을 그립니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d31029;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>
</body>
</html>

프로그램 실행 결과:

캔버스에 원을 그리려면 다음 방법을 사용합니다.

arc(x,y,r ,start,stop)

실제로 원을 그릴 때 스트로크()나 채우기()와 같은 "잉크" 메서드를 사용합니다.

예제

arc() 메소드를 사용하여 원 그리기:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #1d17ff;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>
</body>
</html>

프로그램 실행 결과:

캔버스 - 텍스트

캔버스를 사용하여 텍스트를 그립니다. 중요한 속성과 방법은 다음과 같습니다.

글꼴- 글꼴 정의

fillText(text,x,y) - 캔버스에 단색 텍스트 그리기

trokText(text,x,y) - 그리기 캔버스에 빈 텍스트

인스턴스

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,30);
    ctx.strokeText("你好吗！",10,80);
</script>
</body>
</html>

프로그램 실행 결과:

캔버스 - 그라데이션

그라디언트는 직사각형, 원, 선, 텍스트 등을 채울 수 있으며 다양한 모양을 사용자 정의할 수 있습니다. 다양한 색상을 정의합니다.

캔버스 그라데이션을 설정하는 방법에는 두 가지가 있습니다.

createLinearGradient(x,y,x1,y1) - 선 그라데이션 만들기

createRadialGradient(x,y,r,x1,y1,r1) - 방사형/원형 그라디언트 생성

그라디언트 개체를 사용할 때는 두 개 또는 두 개의 중지 색상을 사용해야 합니다. 위에. <… 또는 스트로크 스타일을 그라데이션에 적용한 다음 직사각형, 텍스트 또는 선과 같은 모양을 그립니다.

인스턴스

선형 그래디언트를 만들려면 createLinearGradient()를 사용하세요. 사각형을 그라데이션으로 채우기:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,10);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // 充满度
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

프로그램 실행 결과:

예

createRadialGradient()를 사용하여 방사형/원형 그래디언트를 만듭니다. 사각형을 그라데이션으로 채우기:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Create gradient
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

프로그램 실행 결과:

캔버스 - 이미지

캔버스에 그림을 올려서 그림에 대한 작업을 수행하고 텍스트 등 원하는 자료를 추가할 수 있습니다.

캔버스에 이미지 배치 다음 방법 사용:

drawImage(image,x,y)

이미지 사용

인스턴스

이미지 배치 캔버스:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p>使用图像:</p>
<img id="scream" src="http://img.blog.163.com/photo/g8yDNFsGMeq-pzHY2_n3aQ==/356628795492853826.jpg" alt="The Scream" width="220" height="277"><p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    img.onload = function() {
        ctx.drawImage(img,10,10);
    }
</script>
</body>
</html>

프로그램 실행 결과:

HTML 캔버스 참조 매뉴얼

태그의 전체 속성은 캔버스 참조 매뉴얼을 참조하세요.

HTML <캔버스> 标签

标签	描述
<canvas>	HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

标签🎜>

< span style="font-size: 16px;">描述

<🎜>

<캔버스>

HTML5 의 캔버스 元素使에는 JavaScript가 사용됩니다.

<🎜><🎜><🎜>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,30); ctx.strokeText("你好吗！",10,80); </script> </body> </html>

제출하다 코드 재설정

자동운전