HTML5에서 캔버스 요소를 사용하여 그래픽을 그리는 방법

오늘은 HTML5의 캔버스 요소 사용법을 공유하겠습니다. 이는 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

【추천 코스: HTML5 Tutorial】

canvas element

주로 JavaScript를 사용하여 웹 페이지에 이미지를 그릴 수 있습니다. 캔버스는 각 픽셀을 제어할 수 있는 직사각형 영역입니다. 다양한 경로, 직사각형, 원 그리기 및 이미지 추가 방법은 기사

html code

<canvas id="demo"></canvas>

Rectangle

fillStyle: 그래픽에 색상을 추가하는 데 사용됩니다

fillRect(x ,y)에서 자세히 소개됩니다. ,width,height)

x: 왼쪽 위 모서리의 x 값

y: 왼쪽 위 모서리의 y 값

width, height: 그래픽의 너비와 높이입니다

<script type="text/javascript">
var demo=document.getElementById("demo");
var fang=demo.getContext("2d");
fang.fillStyle="pink";
fang.fillRect(0,0,200,50);
</script>

line

moveTo : 선 시작 위치

lineTo: 끝 위치

lineWidth: 선 너비

StrokeStyle: Color

Stroke: 그리기 시작

 var demo=document.getElementById("demo");
    var xian=demo.getContext("2d");
      xian.moveTo(10,10);
      xian.lineTo(100,100);
      xian.lineWidth=2;
      xian.strokeStyle="pink";
      xian.stroke();

Circle

beginPath() : 시작 경로

arc (x,y,r,sAngle,eAngle,반시계 방향)

x,y: 원의 중심점 좌표

r: 원의 반경

sAngle,eAngle: 시작 그리고 원의 끝 각도

counterclockwise: 쓰기 가능 여부는 그림을 시계 반대 방향으로 그릴지 아니면 시계 방향으로 그릴지를 지정합니다. 거짓 = 시계 방향, 참 = 시계 반대 방향.

var demo=document.getElementById("demo");
    var yuan=demo.getContext("2d");
    yuan.beginPath();
    yuan.arc(100,100,50,0,2*Math.PI);
    yuan.strokeStyle="pink";
    yuan.stroke();

그래픽 삽입

drawImage(img,sx,sy,swidth,height,x,y,width,height)

sx,sy: 전단된 x, y 좌표 위치

swidth,height: 잘라낸 이미지의 너비와 높이

x,y: 캔버스에 배치된 이미지의 x,y 좌표 위치

width,height: 사용할 이미지의 너비와 높이

var demo=document.getElementById("demo");
var img1=document.getElementById("img1");
var img=demo.getContext("2d"); 
img1.onload=function(){  
img.drawImage(img1,10,10,100,120)

요약: 위 내용은 이 글의 전체 내용입니다. 이 글이 모든 분들께 도움이 되기를 바랍니다.

위 내용은 HTML5에서 캔버스 요소를 사용하여 그래픽을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!