笔记大全

H5Canvas使用案例详解

更新时间：2023-12-09

第一段：H5+Canvas的基础知识

HTML5中的Canvas是一个非常重要的标签，可以让开发者用JavaScript动态地绘制2D图形，它的优点不仅仅表现在开发上，而且可以用来在网页上进行游戏开发等等。Canvas可以实现动画、游戏、图表等多种效果，也可以进行鼠标交互操作。下面是一个Canvas的基本代码示例：

  <canvas id="game" width="800" height="600"></canvas>

其中，<canvas>标签的id属性为game，宽度为800像素，高度为600像素。我们可以通过JavaScript调用Canvas API来绘制图形。

第二段：绘制多种图形

Canvas能够绘制多种图形，包括直线、矩形、圆形、弧形等等。下面是一个绘制直线的代码示例：

  <canvas id="canvas" width="800" height="600"></canvas>
  <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(500, 100);
    context.stroke();
  </script>

在上述代码中，我们先获取Canvas的DOM元素，并取得绘制上下文对象。然后调用beginPath()函数开始路径绘制，moveTo()函数设置线段起点坐标，lineTo()函数设置线段终点坐标，最后调用stroke()函数绘制直线。

第三段：创建动画效果

Canvas最大的优势是可以进行动态绘制，下面就是一个简单的Canvas动画代码示例：

  <canvas id="canvas" width="720" height="400"></canvas>
  <script>
  var canvas=document.getElementById("canvas");
  var context=canvas.getContext("2d");
  var ball={
      x:200,
      y:200,
      vx:-2,
      vy:4,
      r:10,
      color:"#eee"
  };
  function drawBall() {
      context.beginPath();
      context.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
      context.fillStyle = ball.color;
      context.fill();
      context.closePath();
  }
  function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      ball.x += ball.vx;
      ball.y += ball.vy;
      if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
          ball.vy = -ball.vy;
      }
      if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
          ball.vx = -ball.vx;
      }
  }
  setInterval(draw, 16);
  </script>

在上述代码中，我们定义了一个球的对象，包括它的坐标、大小、速度等信息。然后在draw()中清除上一帧的绘制并绘制新的球。在每一个循环中，我们根据速度更新球的x、y坐标。在球到达画布边缘时，速度会反向，实现球的弹跳效果。最后将方法使用setInterval()函数定时调用，在实现动画效果。

第四段：使用Canvas绘制图表

Canvas还可以用来绘制图表，下面是一个简单的柱状图代码示例：

  <canvas id="canvas" width="800" height="400"></canvas>
  <script>
  var canvas=document.getElementById("canvas");
  var context=canvas.getContext("2d");
  var data=[30, 54, 62, 45, 10, 20, 34, 45];
  var length=data.length;
  var x;
  var y;
  var max=Math.max.apply(null,data);
  var width=40;
  var gap=25;
  function drawBar() {
    context.fillStyle="#17becf";
    for(var i=0;i<length;i++){
        if(max!=0){
            x=i*(width+gap)+gap;
            y=canvas.height*(1-data[i]/max);
            context.fillRect(x,y,width,canvas.height-y);
        }
    }
  }
  function draw() {
    drawBar();
  }
  draw();
  </script>

在上述代码中，我们先定义了柱状图的数据和一些属性，如每个柱子的宽度、间隔等。然后定义绘制柱状图的函数，在drawBar()中遍历数组并按比例计算每个柱子的高度。最后在主函数中调用draw()方法实现绘制。

c语言编程笔录