主页 > 教程合集 > 工具推荐 >

react中的canvas怎么用

时间:2022-05-07 阅读:0

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

react中的canvas怎么用

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react中canvas的用法是什么

Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。

只能够js脚本驱动是Canvas的特点。

canvas元素


<canvas id='mycanvas' width=400 height=400>
        Your browser does not support the canvas element.
</canvas>
 

支持canvas的浏览器会只渲染canvas标签,而忽略其中的替代内容。不支持 canvas的浏览器则会直接渲染替代内容。

说明canvas内部是不可以嵌套其他dom结构的。

react-konva

canvas在react里的应用,了解下吧。我们会用到react-konva插件。

react-konva和react-canvas是github上星星比较多的react相关canvas第三方库。由于react-canvas从17年3月之后就没有更新了,且不支持react 16,因此不再考虑。这里主要介绍react-konva的使用。

React Konva是一个JavaScript库,用于使用React绘制复杂的画布图形。可以让我们像操作 DOM 一样来操作 canvas,并提供了对 canvas 中元素的事件机制,拖放操作的支持。

基本概念

把整个视图看做一个舞台stage。而舞台中的每一层,看做layer。layer层中有许多group组。在group中绘制画图、图片等shape。

示例如下;


import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Rect, Text } from "react-konva";
class ColoredRect extends React.Component {
    state = {
        color: "green"
    };
    handleClick = () => {
        this.setState({
            color: Konva.Util.getRandomColor()
        });
    };
    render() {
        return (
            <Rect
                x={20}
                y={20}
                width={50}
                height={50}
                fill={this.state.color}
                shadowBlur={5}
                onClick={this.handleClick}
           />
        );
    }
}
class App extends Component {
    render() {
        return (
            <Stage width={window.innerWidth} height={window.innerHeight}>
                <Layer>
                    <Text text="Try click on rect"/>
                    <ColoredRect/>
                </Layer>
            </Stage>
        );
    }
}
 

开通特权,即可免费下载全站所有千余TB网络资源,点击 >>> 资源目录 查看所有资源,覆盖音乐、影视、有声书、电子书、漫画、动漫、课程等,不限时间次数,永久免费,点击 >>> 特权详情 了解更多!

余斗余斗
  • 版权声明:原创文章由发表在工具推荐分类下,2022-05-07最后更新,转载注明出处。

相关推荐

返回顶部