P5.js图片旋转，自旋

最新推荐文章于 2023-03-12 10:21:15 发布

执笔看墨花开

最新推荐文章于 2023-03-12 10:21:15 发布

阅读量946

点赞数

分类专栏： JavaScript Canvas 文章标签： Canvas P5JS 图片

本文链接：https://blog.csdn.net/qq_31201781/article/details/117824847

版权

JavaScript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

Canvas

1 篇文章 0 订阅

订阅专栏

预览

Demo

代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
  <title>Title</title>
</head>
<body>
<script>
  var schnauzer;
  const p5 = new P5();

  function preload() {
    schnauzer = loadImage("../../love.png");
  }

  function setup() {
    createCanvas(1200, 600);
    background(120, 120, 255);
    // noLoop()
  }


  function draw() {
    clear()
    push()
    const _width = schnauzer.width * 1/2
    const _height = schnauzer.height * 1/2
    translate(400, 100);
    // rotate(radians(degrees));
    rotate(frameCount / -100.0);
    translate(-400, -100);
    image(schnauzer, 400-_width, 100-_height);
    pop()


    push()
    translate(200, 100);
    // rotate(radians(degrees));
    rotate(frameCount / -100.0);
    translate(-200, -100);
    image(schnauzer, 200-_width, 100-_height);
    pop()

  }

</script>
</body>
</html>

优惠劵

执笔看墨花开

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
P5.js图片旋转，自旋

预览Demo代码<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/p5.js/1.3.1/p5.min.js"&
复制链接

扫一扫