HTML5揭秘读书笔记——Canvas

Published: 2016-02-10

Tags: HTML5 Canvas

本文总阅读量
  1. 初始化与长方形与重置

  2. 绘制一个网格坐标系

  3. 颜色渐变

  4. 载入图片


1. 初始化与长方形与重置

HTML5的Canvas是

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type="text/css" media="all">
    .pos {
      text-align: center;
    }
    .canvas {
      border: 1px solid #ccc;
    }
  </style>

  <title>html5 canvas</title>
</head>
<body>
  <div class="pos">
    <canvas id="a1" class="canvas" width="300" height="200"></canvas>
  </div>

</body>
  <script type="text/javascript" charset="utf-8">
    var a_canvas = document.getElementById("a1");
    var a_context = a_canvas.getContext("2d");
    a_context.fillRect(10, 20, 30, 40);
    a_context.clearRect(10, 20, 10, 10);
    setTimeout(function () {
      a_canvas.width = a_canvas.width;
    }, 3000);
  </script>
</html>

首先寻找到canvas的位置,然后使用getContext初始化上下文环境,使用fillRect填充一个矩形,使用clearRect清除矩形,再之后是添加了一个三秒的延时,重置布画

2. 绘制一个网格坐标系

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type="text/css" media="all">
    .pos {
      text-align: center;
    }
    .canvas {
      border: 1px solid #ccc;
    }
  </style>

  <title>html5 canvas</title>
</head>
<body>
  <div class="pos">
    <canvas id="a1" class="canvas" width="500" height="375"></canvas>
  </div>

</body>
  <script type="text/javascript" charset="utf-8">
    var a_canvas = document.getElementById("a1");
    var context = a_canvas.getContext("2d");
    for (var x = 0.5; x < 500; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x, 375);
    }

    for (var y = 0.5; y < 375; y += 10) {
      context.moveTo(0, y);
      context.lineTo(500, y);
    }

    context.strokeStyle = "#eee";
    context.stroke();

    context.beginPath();
    context.moveTo(0, 40);
    context.lineTo(240, 40);
    context.moveTo(260, 40);
    context.lineTo(500, 40);
    context.moveTo(495, 35);
    context.lineTo(500, 40);
    context.lineTo(495, 45);

    context.moveTo(60, 0);
    context.lineTo(60, 153);
    context.moveTo(60, 173);
    context.lineTo(60, 375);
    context.moveTo(65, 370);
    context.lineTo(60, 375);
    context.lineTo(55, 370);

    context.strokeStyle = "#000";
    context.stroke();

    context.font = "bold 12px sans-serif";
    context.fillText("x", 248, 43);
    context.fillText("y", 58, 165);

    context.textBaseline = "top";
    context.fillText("( 0, 0 )", 8, 5);

    context.textAlign = "right";
    context.textBaseline = "bottom";
    context.fillText("( 500, 375 )", 492, 370);

    context.fillRect(0, 0, 3, 3);
    context.fillRect(497, 372, 3, 3);


  </script>
</html>

使用moveTo来定位画笔位置,使用lineTo进行画线,使用strokeStyle进行设置线段样式,调用stroke进行绘制

fillText进行书写文字,textBaseline类似于text-align设置基准

3. 颜色渐变

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type="text/css" media="all">
    .pos {
      text-align: center;
    }
    .canvas {
      border: 1px solid #ccc;
    }
  </style>

  <title>html5 canvas</title>
</head>
<body>
  <div class="pos">
    <canvas id="a1" class="canvas" width="300" height="200"></canvas>
  </div>



</body>
  <script type="text/javascript" charset="utf-8">
    var a_canvas = document.getElementById("a1");
    var context = a_canvas.getContext("2d");

    var my_gradient = context.createLinearGradient(0, 0, 300, 200);

    my_gradient.addColorStop(0, "black");
    my_gradient.addColorStop(1, "white");

    context.fillStyle = my_gradient;
    context.fillRect(0, 0, 300, 200);


  </script>
</html>

4. 载入图片

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type="text/css" media="all">
    .pos {
      text-align: center;
    }
    .canvas {
      border: 1px solid #ccc;
    }
  </style>

  <title>html5 canvas</title>
</head>
<body>
  <div class="pos">
    <img id="img" src="index.jpg" alt="index" width="50" height="50">
    <canvas id="a1" class="canvas" width="300" height="200"></canvas>
  </div>



</body>
  <script type="text/javascript" charset="utf-8">
    var a_canvas = document.getElementById("a1");
    var context = a_canvas.getContext("2d");
    var img = document.getElementById("img");

    setInterval(function () {
      a_canvas.width = a_canvas.width;
      var x = Math.floor((Math.random() * 240));
      var y = Math.floor((Math.random() * 140));
      context.drawImage(img, x, y, 60, 60);
    }, 1000);

  </script>
</html>

想要在canvas中加载图片,首先要在文档中已经加载完成的图片,然后找到它,通过drawImage来加载,添加了随机,还是挺有趣的,canvas是一个很棒的东西,希望可以逐步学习,能表达自己的想法,作出有趣实用的东西