18. HTML5 Canvas [createRadialGradient, fillStyleStop,fillStyle]

Hello Canvas!!

How to use createRadialGradient, fillStyleStop,fillStyle

소스보기해서 주석을 읽어보자

[SOURCE VIEW]

<canvas id = "myCanvas" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> <script> var canvas = document.getElementById("myCanvas"); var context= canvas.getContext('2d'); /* context.rect(사각형 시작점 x, 사각형 시작 y, 사각형 끝점 x, 사각형 끝점 y); //create radial graient 레디알 그라이언트 생성 var rGrd = context.createRadialGradient( highlight x, highlight y, 하이라이트 크기size of highlight, 중심점center point x, 중심점center point y, 레디얼 그라디언트의 크기size of RadialGradient); //light blue 밝은 청색 지정 rGrd.addColorStop(0, '#8ED6FF'); //dark blue 짙은 청색 지정 rGrd.addColorStop(1, '#004CB3'); */ context.rect(0, 0, canvas.width, canvas.height); //create radial gradient 레디알 그라이언트 생성 var rGrd = context.createRadialGradient(canvas.width/4, canvas.height/4, 10, 150, 100, canvas.width/1.75); //light blue 밝은 청색 지정 rGrd.addColorStop(0, '#8ED6FF'); //dark blue 짙은 청색 지정 rGrd.addColorStop(1, '#004CB3'); context.fillStyle = rGrd; context.fill(); </script>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas