애니메이션 원리 - 그래픽 채우기

책 이름: HTML5-Animation-with-JavaScript
책 원본:https://github.com/lamberta/html5-animation
1. 그라데이션 채우기
그래디언트 채우기에는 선형 그래디언트와 레이디얼 그래디언트 두 가지가 있습니다.용법이기 때문에, 우리가 직접 코드에서 분석하면 더욱 직관적일 것이다
하나.

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Gradient Fill 1</title>

    <link rel="stylesheet" href="../include/style.css">

  </head>  

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>



    <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas'),

          context = canvas.getContext('2d'),

          pt1 = {x: 0, y: 0},               //gradient start point

          pt2 = {x: 100, y: 100},           //gradient end point

          //    ， pt     ，p2     

          gradient = context.createLinearGradient(pt1.x, pt1.y, pt2.x, pt2.y);



      //      ，      

      gradient.addColorStop(0, "#ffffff");

      gradient.addColorStop(1, "#ff0000");

      

      //  

      context.fillStyle = gradient;

      context.fillRect(0, 0, 100, 100);

    };

    </script>

  </body>

</html>

둘.다양한 색상

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Gradient Fill 2</title>

    <link rel="stylesheet" href="../include/style.css">

  </head>  

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>

    

    <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas'),

          context = canvas.getContext('2d'),

          pt1 = {x: 100, y: 100},           //gradient start point

          pt2 = {x: 200, y: 200},           //gradient end point

          gradient = context.createLinearGradient(pt1.x, pt1.y, pt2.x, pt2.y);



      //white to blue to red

      gradient.addColorStop(0, "#ffffff");

      gradient.addColorStop(0.5, "#0000ff");

      gradient.addColorStop(1, "#ff0000");



      context.fillStyle = gradient;

      context.fillRect(100, 100, 100, 100);

    };

    </script>

  </body>

</html>

셋.투명도

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Gradient Fill Radial</title>

    <link rel="stylesheet" href="../include/style.css">

  </head>

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>



    <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas'),

          context = canvas.getContext('2d'),

          c1 = {x: 150, y: 150, radius: 0},  //gradient start circle

          c2 = {x: 150, y: 150, radius: 50}, //gradient end circle

          gradient = context.createRadialGradient(c1.x, c1.y, c1.radius,

                                                    c2.x, c2.y, c2.radius);

      //all black alpha blend

      gradient.addColorStop(0, "#000000");

      gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); //alpha required



      context.fillStyle = gradient;

      context.fillRect(100, 100, 100, 100);

    };

    </script>

  </body>

</html>

애니메이션 원리 - 그래픽 채우기

좋은 웹페이지 즐겨찾기