HTML의 캔버스 태그는 그래픽을 그리는 데 사용됩니다. 그래픽을 그리려면 스크립트를 사용해야 합니다. HTML5에 도입된 태그입니다. 모든 캔버스에는 캔버스의 높이와 너비, 즉 각각 높이와 너비를 설명하는 두 가지 요소가 있습니다.
다음은 속성입니다 -
- 높이 − 캔버스의 높이(픽셀)
- 너비 − 캔버스의 너비(픽셀)
이제 HTML에서 캔버스 태그를 구현하는 예를 살펴보겠습니다 -
예시
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="600" height="350" style="border −2px solid orange;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); ctx.shadowBlur = 20; ctx.shadowColor = "black"; ctx.fillStyle = "green"; ctx.fillRect(40, 40, 100, 250); ctx.shadowBlur = 30; ctx.shadowColor = "blue"; ctx.fillStyle = "orange"; ctx.fillRect(200, 40, 200, 150); </script> </body> </html>
출력
HTML5에서 2차 곡선을 그리는 또 다른 예를 살펴보겠습니다.
예시
<!DOCTYPE HTML> <html> <head> <style> #test { width − 100px; height −100px; margin − 0px auto; } </style> <script type> function drawShape() { // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext) { // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // Draw shapes ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
출력