ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CANVAS 연습3(그라데이션)
    게임/HTML 연습 2018. 6. 23. 16:43
    반응형
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset = "UTF-8">
    <title>CANVAS연습3</title> 
    </head>
    <body>
    <canvas id="myCanvas" width="800" height="800" style="border: 1px dotted blue"></canvas>

    <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

      

    //Gradient로 내부 채우기
    var grad = ctx.createLinearGradient(50,50,250,50);
    //context.createdLinearGradient(x0(시작하는 점의 x좌표), y0(시작하는 점의 y좌표), x1(끝나는 점의 x좌표), y1(끝나는 점의 y좌표))
    grad.addColorStop(0, "red"); //색 지정
    grad.addColorStop(1/6,"orange");
    grad.addColorStop(2/6,"yellow");
    grad.addColorStop(3/6,"green");
    grad.addColorStop(4/6,"aqua");
    grad.addColorStop(5/6,"blue");
    grad.addColorStop(1,"purple");
    ctx.lineWidth = 5;
    ctx.fillStyle= grad; //그라데이션 색을 지정한 변수를 fillStyle에 대입
    ctx.fillRect(50,50,200,200);
    ctx.strokeRect(50,50,200,200);

    //radial gradient로 내부 채우기
    var grad2 = ctx.createRadialGradient(300,300,0,400,400,300);
    //creataRadialGradient(x0, y0, r0, x1, y1, r1);
    //x0: 시작하는 점의 x좌표, y0:시작하는 점의 y좌표, r0: 시작하는 곳의 반지름
    //x1:끝나는 점의 x좌표 y1: 끝나는 점의 y좌표, r1: 끝나는 곳의 반지름
    grad2.addColorStop(0, "red"); //색 지정
    grad2.addColorStop(0.5, "purple");
    grad2.addColorStop(1, "blue");
    ctx.lineWidth = 5;
    ctx.fillStyle = grad2;
    ctx.fillRect(300,300,300,300);
    ctx.strokeRect(300,300,300,300);
    </script>
    </body>
    </html>

     

     

     

    결과:

     

     

    반응형

    '게임 > HTML 연습' 카테고리의 다른 글

    CANVAS 연습6(글씨 쓰기)  (0) 2018.06.25
    CANVAS 연습5(이미지 그리기)  (0) 2018.06.25
    CANVAS 연습4(이미지 반복)  (0) 2018.06.24
    CANVAS 연습2(사각형, 원)  (0) 2018.06.22
    CANVAS 연습1(선 그리기)  (0) 2018.06.21
Designed by Tistory.