HTML5의 캔버스 요소-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5의 캔버스 요소

黄舟

Dec 22, 2016 pm 03:27 PM

캔버스 요소는 웹페이지에 그래픽을 그리는 데 사용됩니다.

캔버스란?

HTML 5의 캔버스 요소는 JavaScript를 사용하여 웹페이지에 이미지를 그립니다.

캔버스는 모든 픽셀을 제어할 수 있는 직사각형 영역입니다.

캔버스에는 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하는 다양한 방법이 있습니다.

캔버스 요소 만들기

HTML 5 페이지에 캔버스 요소 추가, 요소의 ID, 너비 및 높이 지정:

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

로그인 후 복사

JavaScript를 통해 그리기

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

<script type="text/javascript"> 
var c=document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.fillStyle="#FF0000"; 
cxt.fillRect(0,0,150,75); 
</script>

로그인 후 복사

JavaScript는 ID를 사용하여 캔버스 요소를 찾습니다.

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

로그인 후 복사

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

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

로그인 후 복사

getContext("2d") 개체는 경로, 직사각형, 원, 문자 그리기 및 이미지 추가를 위한 여러 메서드가 포함된 내장 HTML 5 개체입니다.

예: 사각형 위에 마우스를 올리면 좌표를 직접 확인할 수 있습니다.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
	margin: 0px;
	font-size: 70%;
	font-family: verdana, helvetica, arial, sans-serif;
}
#coordiv {
	float: left;
	width: 199px;
	height: 99px;
	border: 1px solid #c3c3c3
}
</style>
<script type="text/javascript">  
function cnvs_getCoordinates(e) { 
	x=e.clientX; 
	y=e.clientY; 
	document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; 
} 
function cnvs_clearCoordinates() { 
	document.getElementById("xycoordinates").innerHTML=""; 
} 
</script>
</head>
<body>
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<div id="xycoordinates"></div>
</body>
</html>

로그인 후 복사

위 코드는 다음과 같습니다. HTML5 의 Canvas 요소 내용, 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.