在ReactJS中,在画布上画4个圆可以通过以下步骤实现:
import React from 'react';
class Canvas extends React.Component {
render() {
return (
<div>
<canvas id="myCanvas" width="400" height="400"></canvas>
</div>
);
}
}
export default Canvas;
import React from 'react';
class Canvas extends React.Component {
componentDidMount() {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制第一个圆形
ctx.beginPath();
ctx.arc(50, 50, 20, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
// 绘制第二个圆形
ctx.beginPath();
ctx.arc(100, 100, 20, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
// 绘制第三个圆形
ctx.beginPath();
ctx.arc(150, 150, 20, 0, 2 * Math.PI);
ctx.fillStyle = 'green';
ctx.fill();
// 绘制第四个圆形
ctx.beginPath();
ctx.arc(200, 200, 20, 0, 2 * Math.PI);
ctx.fillStyle = 'yellow';
ctx.fill();
}
render() {
return (
<div>
<canvas id="myCanvas" width="400" height="400"></canvas>
</div>
);
}
}
export default Canvas;
import React from 'react';
import Canvas from './Canvas';
class App extends React.Component {
render() {
return (
<div>
<h1>在ReactJS中画4个圆</h1>
<Canvas />
</div>
);
}
}
export default App;
这样,当App组件被渲染时,Canvas组件会在画布上绘制4个圆形。每个圆形的位置、颜色等可以根据需求进行调整。
领取专属 10元无门槛券
手把手带您无忧上云