Question

所以，我用HTML5 Canvas创建了一系列5个嵌套圈子。每个圆圈都有16个圆点，均匀分布在圆周上。

我的想法是让人们能够从5个点中的一个点拖动到另外5个点，依此类推，在已经连接的点之间描绘一条线。

此外，每次用户从一个点拖动到另一个点时，都应该调用回调函数。

我不确定使用HTML Canvas是否是做这种事情的正确方法，我想知道你会用什么来解决这个问题，因为我真的此刻坚持下去。

中生成滚轮的代码

ngAfterViewInit() {
        let ctx: CanvasRenderingContext2D = this.circleCanvas.nativeElement.getContext("2d");
        // happy drawing from here on
        ctx.lineWidth=1.5;
        var width = window.screen.width;
        var height = window.screen.height;
        var initOuterRadius = width/2-10;
        var cacheRadius = initOuterRadius;
        var wheelCategories = 16;
        var fullAngle = 360;
        //Draws the 5 circles
        for (var i = 1; i<=5; i++){
          ctx.beginPath();
          ctx.arc(width/2,height/2,cacheRadius,0,2*Math.PI);
          ctx.stroke();

          var angles = 360/wheelCategories;

          var dots = [];
          for (var b = 0; b<=wheelCategories; b++){
            var originX = width/2;
            var originY = height/2;
            var initXCoordinate = originX + cacheRadius * Math.cos(this.getRadians(angles));
            var initYCoordinate = originY + cacheRadius * Math.sin(this.getRadians(angles));
            dots.push({
              xCoord: initXCoordinate,
              yCoord: initYCoordinate,
              radius: cacheRadius
            });
            //Draws the dots
            ctx.beginPath();
            ctx.arc(initXCoordinate,initYCoordinate,2,0,2*Math.PI);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();
            //Draws the lines 
            if (i == 1){
              ctx.lineWidth=0.6;

              ctx.beginPath();
              ctx.moveTo(originX,originY);
              ctx.lineTo(initXCoordinate,initYCoordinate);
              ctx.stroke();
              ctx.lineWidth=1.5;

            }
            angles+=360/wheelCategories;


          }
          cacheRadius-= width/10;
        }

      }

Answer 1

也许你可以使用嵌入式SVG来更轻松地解决问题。 SVG形状的管理方式与DOM项目相同，也有事件和样式。

Answer 2

Canvas和JavaScript，但是......

最好的方式非常依赖于您和您的经验和优势。如果你几乎没有编程经验，但有足够的HTML / CSS / SVG经验，并且觉得使用它们很舒服，那么这是一个小Javascript的最佳选择。

如果您是一名强大的程序员，并且拥有丰富的动画制作和创建可视化的经验，并且具有有限的HTML / CSS体验，那么画布和所有Javascript驱动。

如果您正在部分学习，那么您应该考虑您想要学习的内容。

如果你有很多经验，那么你就不会问。：）

如果您想知道什么是最佳做法，从您提供的非常有限的信息中，并且不知道目标客户端基础/使用类型/平台类型/ s，我犹豫地推荐基于画布的Javascript驱动的界面用于语义上下文的HTML / CSS顶部。因为这将提供最高性能，最灵活性和行为选择，并且最容易维护和修改。

在HTML / JS中绘制交互式内容的最佳方式

2 个答案:

Canvas和JavaScript，但是......