ホームページ >ウェブフロントエンド >フロントエンドQ&A >Reactでのキャンバスの使用法は何ですか
react では、canvas を使用してさまざまなチャートやアニメーションなどを描画します。React を使用するために使用される Canvas サードパーティ ライブラリである「react-konva」プラグインを使用して Canvas を使用できます。 Canvas を操作して複雑な Canvas グラフィックスを描画し、要素のイベント メカニズムとドラッグ アンド ドロップ操作のサポートを提供します。
このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。
CanvasはHTML5の新しいコンポーネントで、JavaScriptを使ってさまざまなグラフやアニメーションなどを描くことができるカーテンのようなものです。
Canvas の特徴として、js スクリプトのみで動作させることができます。
canvas 要素
<canvas id='mycanvas' width=400 height=400> Your browser does not support the canvas element. </canvas>
canvas をサポートするブラウザは、canvas タグのみを表示し、代替コンテンツを無視します。キャンバスをサポートしていないブラウザでは、代替コンテンツが直接表示されます。
他の DOM 構造をキャンバス内にネストできないことを説明します。
react-konva
React での Canvas のアプリケーションについて学びましょう。 React-konva プラグインを使用します。
react-konva と reverse-canvas は、github で多くのスターが付けられている、react 関連の Canvas サードパーティ ライブラリです。 React-Canvas は 2017 年 3 月以降更新されておらず、React 16 をサポートしていないため、今後は考慮されません。ここでは主にreact-konvaの使い方を紹介します。
React Konva は、React を使用して複雑なキャンバス グラフィックを描画するための JavaScript ライブラリです。これにより、DOM を操作するのと同じようにキャンバスを操作できるようになり、イベント メカニズムやキャンバス内の要素のドラッグ アンド ドロップ操作がサポートされます。
基本的な考え方
視界全体をステージとして考えます。ステージ内の各層をレイヤーとみなします。レイヤーレイヤーには多くのグループがあります。グループ内で絵や絵などの図形を描きます。
例は次のとおりです。
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でのキャンバスの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。