HTML5之Canvas旋转和位移

最新推荐文章于 2024-04-12 08:51:35 发布

oneheart初心

最新推荐文章于 2024-04-12 08:51:35 发布

阅读量513

点赞数

分类专栏： HTML5 文章标签： canvas html5 前端

本文链接：https://blog.csdn.net/qq_34466755/article/details/109547978

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.实现矩形旋转变色

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #canvas {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    canvas.setAttribute("width", "500px")
    canvas.setAttribute("height", "500px")
    canvas.style.border = "1px solid black"
    ctx.translate(250, 250) // 将起始点移动到画布中心
    ctx.fillStyle = "red"
    ctx.fillRect(0, 0, 100, 100)

    ctx.fillStyle = "orange"
    ctx.rotate(45*Math.PI/180)
    ctx.fillRect(0, 0, 100, 100)

    ctx.fillStyle = "yellow"
    ctx.rotate(45*Math.PI/180)
    ctx.fillRect(0, 0, 100, 100)

    ctx.fillStyle = "green"
    ctx.rotate(45*Math.PI/180)
    ctx.fillRect(0, 0, 100, 100)

    ctx.fillStyle = "cyan"
    ctx.rotate(45*Math.PI/180)
    ctx.fillRect(0, 0, 100, 100)

    ctx.fillStyle = "blue"
    ctx.rotate(45*Math.PI/180)
    ctx.fillRect(0, 0, 100, 100)

    ctx.fillStyle = "purple"
    ctx.rotate(45*Math.PI/180)
    ctx.fillRect(0, 0, 100, 100)

    ctx.fillStyle = "black"
    ctx.rotate(45*Math.PI/180)
    ctx.fillRect(0, 0, 100, 100)
  </script>
</body>

</html>

效果如下：
在这里插入图片描述

2.实现矩形实时旋转变色

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #canvas {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    canvas.setAttribute("width", "500px")
    canvas.setAttribute("height", "500px")
    canvas.style.border = "1px solid black"
    ctx.translate(250, 250) // 将起始点移动到画布中心
    const color = ["red", "orange", "yellow", "green", "cyan", "blue", "purple", "black"]
    let number = 0
    setInterval(function () {
      // ctx.clearRect(-250, -250, 500, 500) //加上这行代码清除之前的矩形，每次只留一个矩形。
      ctx.fillStyle = color[number % 7]
      ctx.rotate(15 * Math.PI / 180) // 以起始点为中心，旋转15度
      ctx.fillRect(0, 0, 100, 100)
      number++
    }, 100)
  </script>
</body>

</html>

效果如下：
在这里插入图片描述

oneheart初心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5之Canvas旋转和位移

1.实现矩形变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #canvas { posi
复制链接

扫一扫