利用Canvas制作旋转的矩形

最新推荐文章于 2024-04-11 17:52:38 发布

OhDurianMonkey

最新推荐文章于 2024-04-11 17:52:38 发布

阅读量648

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_46623277/article/details/130676302

版权

利用Canvas制作旋转的矩形

HTML5 Canvas API提供了强大的图形绘制功能，包括形状、颜色、线条样式等。在本文中，我将展示如何使用Canvas API创建一个旋转的矩形。

一、HTML结构

首先，我们需要在HTML文档中创建一个<canvas>元素。这个元素将用作我们绘制图形的区域：

<!DOCTYPE html>
<html>
<head>
  <title>旋转的矩形</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="rotateRect.js"></script>
</body>
</html>

二、JavaScript代码

接下来，我们需要编写JavaScript代码来控制矩形的旋转。首先，我们需要获取到我们刚刚创建的<canvas>元素，然后创建一个2D渲染上下文，我们将在这个上下文上绘制我们的图形：

// 获取canvas元素
var canvas = document.getElementById('myCanvas');

// 创建2D渲染上下文
var ctx = canvas.getContext('2d');

然后，我们可以开始绘制我们的矩形。为了让矩形旋转，我们需要使用requestAnimationFrame()函数来不断重绘我们的画布。

var rotation = 0;

function draw() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 将坐标系的原点移动到画布中心
  ctx.translate(canvas.width / 2, canvas.height / 2);

  // 旋转坐标系
  ctx.rotate(rotation);

  // 绘制矩形
  ctx.fillStyle = 'blue';
  ctx.fillRect(-50, -50, 100, 100);

  // 将坐标系的原点移回左上角
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  // 更新旋转角度
  rotation += 0.01;

  // 请求下一帧
  requestAnimationFrame(draw);
}

// 开始绘制
draw();