在react中，canvas用於繪製各種圖表、動畫等；可以利用「react-konva」外掛程式使用canvas，該外掛程式是一個canvas第三方函式庫，用於使用React操作canvas繪製複雜的畫布圖形，並提供了元素的事件機制和拖放操作的支援。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
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>
);
}
}推薦學習：《react影片教學》
以上是react中canvas的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
