[HTML/canvas] 스타일과 색 적용하기

mdn의 캔버스 튜토리얼 따라하기
참고 : 캔버스 튜토리얼

function draw() {
    var ctx = document.getElementById("styleCanvas").getContext("2d");

    // fillStyle
    for(var i=0;i<6;i++) {
        for(var j=0;j<6;j++) {
            ctx.fillStyle = 
                "rgb(" +
                Math.floor(255-42.5*i) +
                ", " +
                Math.floor(255-42.5*j) +
                ", 0)";
            ctx.fillRect(j*25, i*25, 25, 25);
        }
    }

    // strokeStyle
    for(var i=0;i<6;i++) {
        for(var j=0;j<6;j++) {
            ctx.strokeStyle = 
                "rgb(0, " +
                Math.floor(255-42.5*i) +
                ", " +
                Math.floor(255-42.5*j) +
                ")";
            ctx.beginPath();
            ctx.arc(175 + j * 25, 11 + i * 25, 10, 0, Math.PI * 2, true);
            ctx.stroke();
        }
    }

    // globalAlpha
    ctx.fillStyle = "#FD0";
    ctx.fillRect(320, 0, 75, 75);
    ctx.fillStyle = "#6C0";
    ctx.fillRect(395, 0, 75, 75);
    ctx.fillStyle = "#09F";
    ctx.fillRect(320, 75, 75, 75);
    ctx.fillStyle = "#F30";
    ctx.fillRect(395, 75, 75, 75);
    ctx.fillStyle = "#FFF";

    ctx.globalAlpha = 0.2;

    for(var i=0;i<7;i++) {
        ctx.beginPath();
        ctx.arc(395, 75, 10+10*i, 0, Math.PI *2, true);
        ctx.fill();
    }

    ctx.globalAlpha = 1;

    // rgba
    ctx.fillStyle = "#FD0";
    ctx.fillRect(490, 0, 150, 37.5);
    ctx.fillStyle = "#6C0";
    ctx.fillRect(490, 37.5, 150, 37.5);
    ctx.fillStyle = "#09F";
    ctx.fillRect(490, 75, 150, 37.5);
    ctx.fillStyle = "#F30";
    ctx.fillRect(490, 112.5, 150, 37.5);
    ctx.fillStyle = "#FFF";

    for(var i=0;i<10;i++) {
        ctx.fillStyle = "rgba(255,255,255," + (i+1)/10 + ")";
        for(var j=0;j<4;j++) {
            ctx.fillRect(495+i*14, 5+j*37.5, 14, 27.5);
        }
    }

    ctx.strokeStyle = "black";

    // lineWidth
    for(var i=0;i<10;i++) {
        ctx.lineWidth = 1 + i;
        ctx.beginPath();
        ctx.moveTo(5+i*14, 165);
        ctx.lineTo(5+i*14, 300);
        ctx.stroke();
    }
    ctx.lineWidth = 1;

    // linrCap
    var lineCap = ["butt", "round", "square"];
    // 안내선
    ctx.strokeStyle = "#09f";
    ctx.beginPath();
    ctx.moveTo(160, 165);
    ctx.lineTo(320, 165);
    ctx.moveTo(160, 300);
    ctx.lineTo(320, 300);
    ctx.stroke();

    ctx.strokeStyle = "black";
    for(var i=0;i<lineCap.length;i++) {
        ctx.lineWidth = 15;
        ctx.lineCap = lineCap[i];
        ctx.beginPath();
        ctx.moveTo(190+i*50, 165);
        ctx.lineTo(190+i*50, 300);
        ctx.stroke();
    }

    // lineJoin
    var lineJoin = ["round", "bevel", "miter"];
    ctx.lineWidth = 10;
    for(var i=0;i<lineJoin.length;i++) {
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(330, 165+i*40);
        ctx.lineTo(370, 205+i*40);
        ctx.lineTo(405, 165+i*40);
        ctx.lineTo(440, 205+i*40);
        ctx.lineTo(475, 165+i*40);
        ctx.stroke();
    }

    ctx.lineWidth = 1;

    // gradient
    var lineargradient = ctx.createLinearGradient(400,165,400,230); // 시작점, 종료점 선형 그라디언트
    var radialgradient = ctx.createRadialGradient(560,225,15,560,225,40); // 내부원1(중심좌표x,y,반지름), 외부원2(중심좌표x,y,반지름)
    lineargradient.addColorStop(0, "white");
    lineargradient.addColorStop(1, "black");

    radialgradient.addColorStop(0, "yellow"); // 0 원의 중심
    radialgradient.addColorStop(0.2, "white");
    radialgradient.addColorStop(1, "blue"); // 1 원의 바깥

    ctx.fillStyle = lineargradient;
    ctx.fillRect(500,165,130,130);

    ctx.fillStyle = radialgradient;
    ctx.fillRect(520,185,80,80);

    // createLinearGradient
    var lingrad = ctx.createLinearGradient(5,330,5,465);
    lingrad.addColorStop(0, "#00ABEB");
    lingrad.addColorStop(0.5, "#fff");
    lingrad.addColorStop(0.5, "#26C000");
    lingrad.addColorStop(1, "#fff");

    var lingrad2 = ctx.createLinearGradient(5, 380, 5, 420);
    lingrad2.addColorStop(0, "#000");
    lingrad2.addColorStop(1, "rgba(0, 0, 0, 0)");

    ctx.fillStyle = lingrad;
    ctx.strokeStyle = lingrad2;

    ctx.fillRect(5, 330, 130, 130);
    ctx.strokeRect(45,370,50,50);

    // createRadialGradient
    var radgrad = ctx.createRadialGradient(195,375,10,202,380,30);
    radgrad.addColorStop(0, "#A7D30C");
    radgrad.addColorStop(0.9, "#019F62");
    radgrad.addColorStop(1, "rgba(1,159,98,0)"); // 1 원의 바깥에 불투명도 0으로 주면 배경 없어짐(원만 남음)

    var radgrad2 = ctx.createRadialGradient(255, 435, 20, 262, 450, 50);
    radgrad2.addColorStop(0, "#FF5F98");
    radgrad2.addColorStop(0.75, "#FF0188");
    radgrad2.addColorStop(1, "rgba(255,1,136,0)");

    var radgrad3 = ctx.createRadialGradient(245, 345, 15, 252, 350, 40);
    radgrad3.addColorStop(0, "#00C9FF");
    radgrad3.addColorStop(0.8, "#00B5E2");
    radgrad3.addColorStop(1, "rgba(0,201,255,0)");

    var radgrad4 = ctx.createRadialGradient(150, 480, 50, 150, 470, 90);
    radgrad4.addColorStop(0, "#F4F201");
    radgrad4.addColorStop(0.8, "#E4C700");
    radgrad4.addColorStop(1, "rgba(228,199,0,0)");

    ctx.fillStyle = radgrad4;
    ctx.fillRect(150, 330, 150, 150);
    ctx.fillStyle = radgrad3;
    ctx.fillRect(150, 330, 150, 150);
    ctx.fillStyle = radgrad2;
    ctx.fillRect(150, 330, 150, 150);
    ctx.fillStyle = radgrad;
    ctx.fillRect(150, 330, 150, 150);

    // createConicGradient
    const conicCrad1 = ctx.createConicGradient(8.3,367,375); // 각, 중심좌표x,y
    conicCrad1.addColorStop(0, "#A7D30C");
    conicCrad1.addColorStop(1, "#fff");

    const conicCrad2 = ctx.createConicGradient(0,482,375); // 각, 중심좌표x,y
    conicCrad2.addColorStop(0, "black");
    conicCrad2.addColorStop(0.25, "black");
    conicCrad2.addColorStop(0.25, "white");
    conicCrad2.addColorStop(0.5, "white");
    conicCrad2.addColorStop(0.5, "black");
    conicCrad2.addColorStop(0.75, "black");
    conicCrad2.addColorStop(0.75, "white");
    conicCrad2.addColorStop(1, "white");

    ctx.fillStyle = conicCrad1;
    ctx.fillRect(320,325,100,100);
    ctx.fillStyle = conicCrad2;
    ctx.fillRect(430,325,100,100);

    // createPattern
    var img = new Image();
    img.src = "images/pattern.png";
    img.onload = function () {
        // 패턴생성
        var ptrn = ctx.createPattern(img, "repeat");
        ctx.fillStyle = ptrn;
        ctx.fillRect(540, 325, 150,150);
    }

    // 그림자
    ctx.font = "20px Times New Roman";
    ctx.fillStyle = "Black";

    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = "rgba(0,0,0,0.5)";

    ctx.fillText("SHINee", 5, 510);

    // 그림자 초기화
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 0;

    // 채우기 규칙
    ctx.beginPath();
    ctx.arc(40,555,30,0,Math.PI * 2, true);
    ctx.arc(40,530,15,0,Math.PI * 2, true);
    ctx.fill("evenodd");
}

var globalCtx = document.getElementById("styleCanvas").getContext("2d");
function setLineDash() {
    var canvas = document.getElementById("styleCanvas");
    // setLineDash
    globalCtx.clearRect(0,0,canvas.width, canvas.height);
    globalCtx.setLineDash([4,2]);
    globalCtx.lineDashOffset = -offset; // -시계방향, +반시계방향
    globalCtx.strokeRect(10, 10, 100, 100);
}

function march() {
    offset++;
    if(offset > 16) {
        offset = 0;
    }
    setLineDash();
    setTimeout(march, 50);
}