세상과 연결

SVG LogoSVGExample SVG Sorry, your browser does not support inline SVG. SVGSorry, your browser does not support inline SVG.

SVG StarExample Sorry, your browser does not support inline SVG.

SVG Rounded RectangleExample Sorry, your browser does not support inline SVG.

SVG Rectangle Example Sorry, your browser does not support inline SVG.

What is SVG? - SVG는 확장 가능한 벡터 그래픽- SVG는 웹용 그래픽을 정의하는 데 사용됩니다.- SVG는 W3C 권장 사항입니다. HTML 요소HTML 요소는 SVG 그래픽의 컨테이너입니다. SVG는 경로, 상자, 원, 텍스트 및 그래픽 이미지를 그리는 몇 가지 방법을 가지고 있습니다. SVG Circle Example

HTML5 Canvas Draw Image var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var img = document.getElementById("scream");ctx.drawImage(img,10,10); Image to use: Canvas to fill:Your browser does not support the HTML5 canvas tag. Try it

HTML5 Canvas Draw Circular Gradient Examplevar c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); // Create gradientvar grd = ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white"); // Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80); Your browser does not support the HTML5 canvas tag.

HTML5 Canvas Draw Linear Gradient Examplevar c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); // Create gradientvar grd = ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white"); // Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80) Your browser does not support the HTML5 canvas tag.

HTML5 Canvas Stroke Text Examplevar c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.font = "30px Arial";ctx.strokeText("Hello World",10,50); Your browser does not support the HTML5 canvas tag.

HTML5 Canvas Draw a Text Examplevar c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.font = "30px Arial";ctx.fillText("Hello World",10,50); Your browser does not support the HTML5 canvas tag.