在React中使用Canvas元素，让你的页面背景跳动起来！！！

最新推荐文章于 2023-07-05 16:48:47 发布
最新推荐文章于 2023-07-05 16:48:47 发布
阅读量6.5k 收藏 17
点赞数 4
分类专栏： 前端 文章标签： javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43464088/article/details/108551813
版权

博主在上周第一次上web交互课的时候，老师带着我们做了一个课堂demo，主要使用了canvas绘图元素。给大家看一下demo效果。
在这里插入图片描述
实现这个功能的原生js代码如下

class circle {
    /**
     * 构造器
     * @param color      颜色
     * @param radius     半径
     * @param v          速度
     * @param angle      角度
     * @param x          当前x坐标
     * @param y          当前y坐标
     */
    constructor(color, radius, v, angle, x, y) {
        this.color = color;
        this.radius = radius;
        this.v = v;
        this.angle = angle;
        this.x = x;
        this.y = y
    }
    /**
     * 绘制圆
     * @param  ctx 绘制上下文
     */
    draw(ctx) {
        //开始绘制路径
        ctx.beginPath();
        //绘制圆
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        //关闭绘制路径
        ctx.closePath();
        //设置fill颜色
        ctx.fillStyle = this.color;
        //fill
        ctx.fill();
    }
}

//圆对象数组
let arr = [];
//圆数量
const CNT = 100;
//绘制区域中心点
let centerX, centerY;
//canvas 元素
const canvas = document.querySelector('canvas');
//绘制上下文
const ctx = canvas.getContext('2d');
//设置canvas满屏
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//设置中心点
centerX = canvas.width / 2;
centerY = canvas.height / 2;
//实例化圆
for (let i = 0; i < CNT; i++) {
    let c1 = new circle(
   		//随机颜色
        "rgba(" + 255 * Math.random() + ","  + 255 * Math.random() + "," + 255 * Math.random() + "," +Math.random() +")",
        //随机半径
        66 * Math.random() + 1,
        //随机速度
        4 * Math.random() + 1,
        //随机角度
        360 * Math.random(),
        //x坐标
        centerX,
        //y坐标
        centerY
    );
    arr.push(c1);
}
//绘制方法
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < CNT; i++) {
        //移动x坐标
        arr[i].x += arr[i].v * Math.cos(arr[i].angle);
        //移动y坐标
        arr[i].y += arr[i].v * Math.sin(arr[i].angle);
        //反弹（angle在笛卡尔坐标系）
        if (arr[i].y < arr[i].radius) {//上
            arr[i].angle = 0 - arr[i].angle;
        }
        if (arr[i].y > (canvas.height - arr[i].radius)) {  //下
            arr[i].angle = 0 - arr[i].angle;
        }
        if (arr[i].x < arr[i].radius) { //左
            arr[i].angle = Math.PI - arr[i].angle;
        }
        if (arr[i].x > (canvas.width - arr[i].radius)) {  //右
            arr[i].angle = Math.PI - arr[i].angle;
        }

        //调用圆的绘制方法
        arr[i].draw(ctx);
    }
    //延迟50ms
    setTimeout(draw, 50);
}
//调用绘制
draw();

因为最近实验室有一个项目，传统的登陆注册背景都太过单调，我就想着能不能来点花里胡哨的哈哈，所以就想把这个动态效果作为背景，那么就涉及到了在React中使用canvas元素的知识。

获取真实DOM

我们都知道react虚拟DOM，既然用canvas绘图肯定要获取真实DOM。demo如下：

<canvas ref={this.canvas} width="666" height="999">
    您的浏览器不支持canvas，请更换浏览器.
</canvas>

constructor(){
    super();
    // 创建一个 ref 来存储 canvas 的 DOM 元素
    this.canvas = React.createRef();
}

componentDidMount(){
	//获取当前真实canvasDOM
    const canvas = this.canvas.current;
}

说明：经过这样这个对象的的canvas属性指向被被ref包装了一层的canvas元素。然后在元素被渲染之后通过canvas属性的current获取真实canvasDOM。

ref的用法（英文）：https://reactjs.org/docs/refs-and-the-dom.html
ref的用法（中文）：https://reactjs.bootcss.com/docs/refs-and-the-dom.html

启用绘画

获取当前CanvasRenderingContext2D实例的原型。
componentDidMount() {
    const canvas = this.canvas.current;
    //绘制上下文在这里插入代码片
    const ctx = canvas.getContext("2d");
    console.log(ctx);
    console.log(Object.getPrototypeOf(ctx));
}

Object.getPrototypeOf()用于获取对象的原型，自己可以在浏览器上打印对比上面两的输出项的区别.

给CanvasRenderingContext2D原型添加方法
componentDidMount() {
    //获取真实canvasDOM
    const canvas = this.canvas.current;
    //圆对象数组
    let arr = [];
    //圆数量
    const CNT = 50;
    //绘制区域中心点
    let centerX, centerY;
    //绘制上下文
    const ctx = canvas.getContext("2d");
    //设置canvas满屏
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    //设置中心点
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;
    //实例化圆
    for (let i = 0; i < CNT; i++) {
      let c1 = new Circle(
        //随机颜色
        "rgba(" +
        255 * Math.random() +
        "," +
        255 * Math.random() +
        "," +
        255 * Math.random() +
        "," +
        Math.random() +
        ")",
        //随机半径
        66 * Math.random() + 1,
        //随机速度
        4 * Math.random() + 1,
        //随机角度
        360 * Math.random(),
        //x坐标
        centerX,
        //y坐标
        centerY
      );
      arr.push(c1);
    }

    function draw() {
      //清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < CNT; i++) {
        //移动x坐标
        arr[i].x += arr[i].v * Math.cos(arr[i].angle);
        //移动y坐标
        arr[i].y += arr[i].v * Math.sin(arr[i].angle);
        //反弹（angle在笛卡尔坐标系）
        if (arr[i].y < arr[i].radius) {
          //上
          arr[i].angle = 0 - arr[i].angle;
        }
        if (arr[i].y > canvas.height - arr[i].radius) {
          //下
          arr[i].angle = 0 - arr[i].angle;
        }
        if (arr[i].x < arr[i].radius) {
          //左
          arr[i].angle = Math.PI - arr[i].angle;
        }
        if (arr[i].x > canvas.width - arr[i].radius) {
          //右
          arr[i].angle = Math.PI - arr[i].angle;
        }
        //调用圆的绘制方法
        arr[i].draw(ctx);
      }
      //延迟50ms
      setTimeout(draw, 42);
    }
    //调用绘制
    draw();
  }

注意：执行画圆的draw(ctx)函数不能放在componentDidMount()里面，否则无法绘制。
最后在render()里面渲染就可以了，这样就实现了在react中渲染canvas元素效果：
在这里插入图片描述
附上在react中实现的js代码：

import React, { Component } from "react";

class Circle extends Component {
  constructor(color, radius, v, angle, x, y) {
    super();
    this.color = color;
    this.radius = radius;
    this.v = v;
    this.angle = angle;
    this.x = x;
    this.y = y;
    // 创建一个 ref 来存储 canvas 的 DOM 元素
    this.canvas = React.createRef();
  }

  componentDidMount() {
    //获取真实canvasDOM
    const canvas = this.canvas.current;
    //圆对象数组
    let arr = [];
    //圆数量
    const CNT = 50;
    //绘制区域中心点
    let centerX, centerY;
    //绘制上下文
    const ctx = canvas.getContext("2d");
    //设置canvas满屏
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    //设置中心点
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;
    //实例化圆
    for (let i = 0; i < CNT; i++) {
      let c1 = new Circle(
        //随机颜色
        "rgba(" +
        255 * Math.random() +
        "," +
        255 * Math.random() +
        "," +
        255 * Math.random() +
        "," +
        Math.random() +
        ")",
        //随机半径
        66 * Math.random() + 1,
        //随机速度
        4 * Math.random() + 1,
        //随机角度
        360 * Math.random(),
        //x坐标
        centerX,
        //y坐标
        centerY
      );
      arr.push(c1);
    }

    function draw() {
      //清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < CNT; i++) {
        //移动x坐标
        arr[i].x += arr[i].v * Math.cos(arr[i].angle);
        //移动y坐标
        arr[i].y += arr[i].v * Math.sin(arr[i].angle);
        //反弹（angle在笛卡尔坐标系）
        if (arr[i].y < arr[i].radius) {
          //上
          arr[i].angle = 0 - arr[i].angle;
        }
        if (arr[i].y > canvas.height - arr[i].radius) {
          //下
          arr[i].angle = 0 - arr[i].angle;
        }
        if (arr[i].x < arr[i].radius) {
          //左
          arr[i].angle = Math.PI - arr[i].angle;
        }
        if (arr[i].x > canvas.width - arr[i].radius) {
          //右
          arr[i].angle = Math.PI - arr[i].angle;
        }
        //调用圆的绘制方法
        arr[i].draw(ctx);
      }
      //延迟50ms
      setTimeout(draw, 42);
    }
    //调用绘制
    draw();
  }

  /**
   * 绘制圆
   * @param  ctx 绘制上下文
   */
  draw(ctx) {
    //开始绘制路径
    ctx.beginPath();
    //绘制圆
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    //关闭绘制路径
    ctx.closePath();
    //设置fill颜色
    ctx.fillStyle = this.color;
    //fill
    ctx.fill();
  }

  render() {
    return <canvas ref={this.canvas} className="circle"></canvas>;
  }
}

export default Circle;
AngleCavalier
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
干货 | React 中的 Canvas 动画
携程技术
12-09 1193
作者简介掺水的酱油，携程软件技术专家，关注大前端及移动端相关技术。移动端硬件性能越来越好的今天，页面的交互也越来越丰富，Web 体验在不断向原生应用靠拢，加入了越来越多的手势与动画。除了...
babel-plugin-react-pug：在React组件中使用哈巴狗！
01-31
babel-plugin-react-pug 拿出JSX并使用Pug！ 一个微型的高性能babel插件，可让您在JSX上使用Pug，为定义React Component模板提供了高效且易读的选择。 本质上，该插件将Pug模板转换为React函数调用。 支持React Native！ 这不是用于将Pug转换为JSX的官方Pug插件。 请参阅 ！ 例 在 class Profile extends React . Component { ... render ( ) { return pug ` #profile.profile__container h1.profile__name ${ this . state . name } ` } } 出 class Profile extends React . Component { ... render ( ) { return React . createElement ( 'div' ,
canvas图片背景实现(React)
m0_46623078的博客
08-24 2142
canvas画布背景基本为透明色，给画布增加背景图片，可以创建一个Image对象，将Image对象src设置为背景图片的地址，在对象加载完成后 使用drawImage在画布上绘制图片即可。 示例如下： const elem = canvasRef.current; const canvas = elem.getContext('2d'); let img = new Image(); img.src = "./1.jpg"
react-reactcanvas一个高性能canva渲染的React组件
08-15
react-canvas 一个高性能canva渲染的React组件
react中使用canvas，将canvas区域保存成图片
最新发布
小白菜的博客
07-05 1460
react中使用canvas，将canvas区域保存成图片。
react星星评价展示组件，具体到小数点
weixin_72081046的博客
11-28 620
可以将星星的渲染精确到小数位，和组件库中的组件不同，组件库中组件只可精确到一半，在很多项目中我们都需要进行精确到小数位。
在React上用canvas实现图片的截取和旋转
weixin_45770902的博客
05-06 1074
这里的截取没用使用canvas而是用了cropperjs 这里只展示js部分 实现图片旋转代码 const imgRotate = ()=>{ const pic = document.getElementById("pic"); const canvas = document.createElement("canvas"); var width = imageDimensions.width; var height = imageDimensions.hei
react小项目 - canvas海报生成器
weixin_34233421的博客
05-02 2117
1.背景   之前做过一个营销类移动端h5项目-海报生成器，上传用户本地图片合成海报并支持下载，这次有时间了整理整理。 2.几个重点 上传本地图片并支持预览 处理ios照片翻转 使用canvas对图片等比拉伸缩放并居中裁剪 使用canvas绘制图片以及文本 输出base64并支持下载 3.上传图片   废话不多说，使用html的 &lt;input type="file" ...
react-polymer：在React中使用Polymer元素
03-02
React聚合物 在React中使用聚合物元素react-polymer现在支持Polymer 2.0！ 如果需要使用Polymer 1.0，请使用v3 由于您可以将Polymer元素放入React组件中，乍看之下它就可以正常工作： < paper> click me < / ...
react-sketch-canvas：使用SVG绘制的React组件
02-06
要求需要React 16.4 取决于和想在使用之前测试React Sketch Canvas吗？ 试试安装如果您使用npm npm i react-sketch-canvas 或与纱线yarn add react-sketch-canvas例常见用法示例import React from "react" ;import {...
react封装canvas进度条组件，可自定义宽高、颜色、字体等样式
01-11
react封装canvas进度条组件，可自定义宽高、颜色、字体等样式
react-canvas-poster:基于react+canvas通过简单类CSS数据生成canvas图片海报的组件(･(ง •_•)งﾟ✧ A super easy create canvas poster for React!)
05-06
react-canvas-poster 一个基于react+canvas通过类CSS数据生成canvas图片的组件 (･(ง •_•)งﾟ✧ A super easy create canvas poster for React!) 生成效果 安装 npm i react-canvas-poster 使用组件 注册 import CanvasPoster from 'react-canvas-poster'; 使用 <CanvasPoster drawData={this.state.drawData} success={this.success.bind(this)}/> // return base64类型图片文件 success(res) {} demo数据例子（点击展开） { width: 360, height: 667,
React + 画布 = 爱。 使用 React 绘制复杂画布图形的 JavaScript 库。
06-08
React Konva React Konva 是一个 JavaScript 库，用于使用 React 绘制复杂的画布图形。 它为 Konva 框架提供声明式和React式绑定。 OPEN DEMO 尝试使 React 与 HTML5 画布库一起工作。 目标是拥有与普通 React 类似的声明性标记和类似的数据流模型。 目前，React Native 环境不支持 react-konva。 目前，您可以将所有 Konva 组件用作 React 组件，并且它们支持所有 Konva 事件，就像支持普通浏览器事件一样。 安装 npm install react-konva konva --save 教程和文档示例 import React, { Component } from 'react'; 从'react-dom'导入{渲染}； 从'react-konva'导入{舞台、图层、矩形、文本}； 从'konva'导入Konva； class ColoredRect extends React.Component { state = { color: 'green' }; handleClick
react-konva：React + Canvas = Love。 JavaScript库，用于使用React绘制复杂的画布图形
02-05
React康瓦 React Konva是一个JavaScript库，用于使用绘制复杂的画布图形。 它提供了声明性和React性绑定。 尝试使与HTML5画布库一起使用。 目标是具有与常规React类似的声明性标记，并具有相似的数据流模型。 目前，React Native环境不支持react-konva 。 当前，您可以将所有Konva组件用作React组件，并且支持所有Konva事件的方式与支持常规浏览器事件的方式相同。 安装 npm install react-konva konva --save 例 import React , { Component } from 'react'
在React中使用Sanely管理选项卡的可访问性和useTabIndex挂钩！-React开发
05-27
在React中使用Sanely管理选项卡的可访问性 和useTabIndex挂钩！ react-tabindex使用以下命令巧妙地管理React中的Tab可访问性 和useTabIndex挂钩！ 支持嵌套的Tabbable状态-嵌套的手风琴，菜单，模态等。不执行手动...
react-native-plotly:在React Native中使用plotly.js！
05-02
在React Native中使用 ！ （plotly.js v1.50.1） 安装 $ npm install react-native-plotly 如何 在react-native-plotly ， react-native-plotly只是一个已将plotly.js注入其中的plotly.js 。 plotly.js代码存储在...
canvas学习笔记
山雀的博客
05-16 1088
canvas学习笔记
如何在 React 中使用装饰器-即@修饰符
itclanCoder
12-09 2322
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知...
如何再React项目中使用动态的背景效果
m0_59993469的博客
12-20 1077
就像这样的 已进入页面等 就会发现有很多动态的背景啊 粒子效果啊 很多 其实这就是一个插件 再github官网上 搜索react-particle 地址：Search · react-particle · GitHub 进来之后下载你需要的版本 以及样式 其中 他给你了很多中样式 但是要靠后期你自己去选择相对应得样式 就可以有好看的样式啦 按照人家里面给的方法 下载引入模块就好啦 ...
react怎么使用Canvas
03-25
在React中使用Canvas可以通过创建一个React组件并在其中使用Canvas元素来实现。 首先，在组件的render方法中创建一个Canvas DOM元素: ``` render() { return ( <canvas ref={canvas => this.canvas = canvas} /> ); } ``` 接着，在组件挂载时获取canvas上下文，可以是2D或者WebGL上下文: ``` componentDidMount() { const ctx = this.canvas.getContext('2d'); // Do something with the context } ``` 接下来可以在上下文中进行绘制，例如用2D上下文中的fillRect来绘制矩形: ``` componentDidMount() { const ctx = this.canvas.getContext('2d'); ctx.fillRect(0, 0, 100, 100); } ``` 为了更好的组织代码，可以将绘制相关的逻辑封装在函数中，并在组件挂载时调用: ``` componentDidMount() { const ctx = this.canvas.getContext('2d'); this.draw(ctx); } draw(ctx) { ctx.fillRect(0, 0, 100, 100); } ``` 这样就可以在React中使用Canvas元素来进行绘制了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值