HTML5 画布标签的绘制技巧大揭秘：轻松实现图形效果

一、画布标签基本绘制

1. 基本图形绘制

画布标签提供了多种基本图形绘制方法，包括矩形、圆形、线条、弧线、多边形等。通过设置这些图形的属性，如位置、大小、颜色、填充色等，可以实现简单的图形绘制。

演示代码：

<canvas id="myCanvas" width="500" height="300"></canvas>

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

  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 100, 50);

  ctx.fillStyle = "blue";
  ctx.beginPath();
  ctx.arc(150, 100, 50, 0, 2 * Math.PI);
  ctx.fill();

  ctx.strokeStyle = "green";
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.moveTo(250, 10);
  ctx.lineTo(350, 200);
  ctx.stroke();
</script>

2. 图像和文字绘制

画布标签还支持图像和文字绘制。可以通过使用 ctx.drawImage() 方法将图像绘制到画布上，并使用 ctx.fillText()、ctx.strokeText() 方法绘制文字。

演示代码：

<canvas id="myCanvas" width="500" height="300"></canvas>

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

  var image = new Image();
  image.class="lazy" data-src = "image.png";
  image.onload = function() {
    ctx.drawImage(image, 10, 10, 100, 100);
  };

  ctx.fillStyle = "black";
  ctx.font = "bold 20px Arial";
  ctx.fillText("Hello, world!", 150, 100);
</script>

二、画布标签高级绘制

1. 渐变和阴影

画布标签支持渐变和阴影效果，可以为图形添加更丰富的表现力。通过设置 ctx.createLinearGradient()、ctx.createRadialGradient() 方法可以创建渐变效果，通过设置 ctx.shadowColor、ctx.shadowBlur、ctx.shadowOffsetX、ctx.shadowOffsetY 属性可以创建阴影效果。

演示代码：

<canvas id="myCanvas" width="500" height="300"></canvas>

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

  var gradient = ctx.createLinearGradient(0, 0, 500, 300);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "blue");

  ctx.fillStyle = gradient;
  ctx.fillRect(10, 10, 100, 50);

  ctx.shadowColor = "black";
  ctx.shadowBlur = 10;
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;

  ctx.fillStyle = "white";
  ctx.font = "bold 20px Arial";
  ctx.fillText("Hello, world!", 150, 100);
</script>

2. 路径绘制

路径绘制是画布标签中非常重要的一个概念，通过创建路径并使用 ctx.stroke()、ctx.fill() 方法可以绘制出各种复杂的图形。路径可以由直线、曲线、弧线等组成，使用 ctx.moveTo()、ctx.lineTo()、ctx.quadraticCurveTo()、ctx.bezierCurveTo() 等方法可以创建路径。

演示代码：

<canvas id="myCanvas" width="500" height="300"></canvas>

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

  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(200, 100);
  ctx.quadraticCurveTo(300, 150, 400, 100);
  ctx.bezierCurveTo(450, 50, 500, 200, 400, 250);
  ctx.closePath();

  ctx.fillStyle = "red";
  ctx.fill();

  ctx.strokeStyle = "black";
  ctx.lineWidth = 2;
  ctx.stroke();
</script>

3. 动画和交互

画布标签还支持动画和交互功能。通过使用 setInterval()、requestAnimationFrame() 等方法可以创建动画效果，通过添加事件监听器可以实现交互功能。

演示代码：

<canvas id="myCanvas" width="500" height="300"></canvas>

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

  var x = 0;
  var y = 0;

  function draw() {
    ctx.clearRect(0, 0, 500, 300);

    ctx.fillStyle = "red";
    ctx.fillRect(x, y, 100, 100);

    x += 1;
    y += 1;

    if (x > 400) {
      x = 0;
    }

    if (y > 200) {
      y = 0;
    }

    requestAnimationFrame(draw);
  }

  draw();

  canvas.addEventListener("click", function(e) {
    var rect = canvas.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    ctx.fillStyle = "blue";
    ctx.fillRect(x, y, 100, 100);
  });
</script>

三、结语

HTML5 画布标签提供了强大的图形绘制功能，可以轻松实现各种图形效果。本文介绍了画布标签的基本绘制、高级绘制、动画和交互等技巧，希望对大家有所帮助。