在 canvas 画板上手动画圆圈，那么如何判断它有多圆

在 canvas 画板上手动画圆圈，那么如何判断它有多圆（参照给出的标准圆，允许误差，自设跟标准圆的匹配度：百分比） 求实例算法

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7756481
• 你也可以参考下这篇文章：基于canvas的图片灰度处理
• 除此之外, 这篇博客: three - 3 - 基础知识（1. three渲染结构，2.对canvas 进行响应式布局，3.让canvas 画布自适应设备分辨率 ）中的 2-示例-绘制多个立方体 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  绘制一个立方体：
  效果如下图：
  

  渲染结构如下：
  

  代码：
  RenderStructure.tsx

  import React, { useRef, useEffect } from "react";
  import { BoxGeometry, DirectionalLight, Mesh, MeshNormalMaterial, MeshPhongMaterial, PerspectiveCamera, Scene, WebGLRenderer } from "three";
  
  const { innerWidth, innerHeight } = window;
  
  const scene = new Scene();
  const camera = new PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
  camera.position.z = 5;
  
  const renderer = new WebGLRenderer();
  renderer.setSize(innerWidth, innerHeight);
  
  const geometry = new BoxGeometry();
  const material = new MeshNormalMaterial();
  const cube = new Mesh(geometry, material);
  scene.add(cube);
  
  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  
  const RenderStructure: React.FC = (): JSX.Element => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
      const { current } = divRef;
      if (current) {
        current.innerHTML = "";
        current.append(renderer.domElement);
        //  执行渲染动画
        animate();
      }
      
    }, []);
    return <div ref={divRef}></div>;
  };
  
  export default RenderStructure;
  

  在上面的代码中，我没有直接建立 ，而是在WebGLRenderer 对象的实例化方法里建立的，在其源码可以找到相关逻辑：

  function WebGLRenderer( parameters = {} ) {
  	const _canvas = parameters.canvas !== undefined ? parameters.canvas : createCanvasElement()
  	……
    this.domElement = _canvas;
    ……
  }
  

  通过WebGLRenderer 对象建立了canvas后，再在react的函数组件的useEffect hook 中，将canvas 添加到div 中。

  const RenderStructure: React.FC = (): JSX.Element => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
      const { current } = divRef;
      current && current.append(renderer.domElement);
      animate();
    }, []);
    return <div ref={divRef}></div>;
  };
  

  当前这个立方体的材质是MeshNormalMaterial，并不受光照影响。

  2.如果想受光源的影响则给立方体换个MeshPhongMaterial 材质，再添加光源。

  const geometry = new BoxGeometry();
  
  // 受光源的影响的材质
  const material = new MeshPhongMaterial({ color: 0x44aa88 });
  
  const cube = new Mesh(geometry, material);
  scene.add(cube);
  
  // 光的颜色
  const color = 0xffffff;
  
  // 光照强度
  const intensity = 1;
  
  // 实例化平行光
  const light = new DirectionalLight(color, intensity);
  
  // 设置光源的位置（x,y,z）
  light.position.set(-1, 2, 4);
  
  //光添加到场景中。
  scene.add(light);
  
  

  渲染效果如下：
  

  

  9. 在场景中添加2个一摸一样的立方体，可以发现：几何体和材质可被多个Mesh 对象共享。

  共享的缺点：如果其中一个材质更改了，其他的也会跟着更改。

  const geometry = new BoxGeometry();
  const material = new MeshPhongMaterial({ color: 0x44aa88 });
  
  // 创建多个立方体。[-2, 0, 2]为立方体的位置
  const cubes = [-2, 0, 2].map((num) => makeInstance(num));
  
  
  // 把立方体添加到场景中
  scene.add(...cubes);
  
  function makeInstance(x: number) {
    const cube = new Mesh(geometry, material);
    cube.position.x = x;
    return cube;
  }
  
  function animate() {
    requestAnimationFrame(animate);
  
    cubes.forEach((cube) => {
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    });
  
    renderer.render(scene, camera);
  }
  

  当前的渲染结构如下所示：
  

  渲染效果如下所示：

  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^