如何用javascript画两个圆，找到两个圆心，将圆心连线，找到这条线的中点（坐标）

JavaScript028

如何用javascript画两个圆，找到两个圆心，将圆心连线，找到这条线的中点（坐标）,第1张

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        html,body{

            width: 100%

            height: 100%

            padding: 0

            margin: 0

        }

        #canv{

            border: 1px solid

            border-radius: 10px

        }

    </style>

</head>

<body>

<canvas width="500px" height="300px" id="canv"></canvas>

<script>

    var canv = document.getElementById("canv")

    var context = canv.getContext("2d")

    var count = 0

    var point = []

    canv.onclick = function(e){

        if(count==2){

            return

        }

        if(count<2){

            var obj = {}

            obj.x = e.clientX

            obj.y = e.clientY

            context.fillText("X:"+obj.x  + ", Y:"+obj.y ,obj.x,obj.y - 15)

            context.beginPath()

            context.arc(obj.x,obj.y,3,0,Math.PI*2,true)

            context.fill()

            context.closePath()

            point.push(obj)

            count++

            context.beginPath()

            context.arc(e.clientX, e.clientY,50,0,Math.PI*2,true)

            context.stroke() 

            context.closePath()

        }

        if(count==2){

            context.beginPath()

            context.strokeStyle = "blue"

            context.moveTo(point[0].x,point[0].y)

            context.lineTo(point[1].x,point[1].y)

            context.stroke()

            context.closePath()

            var centerPoint = {}

            centerPoint.x = (point[0].x + point[1].x)/2

            centerPoint.y = (point[0].y + point[1].y)/2

            context.beginPath()

            context.fillStyle = "red"

            context.arc(centerPoint.x , centerPoint.y,3,0,Math.PI*2,true)

            context.fillText("X:"+centerPoint.x  + ", Y:"+centerPoint.y,centerPoint.x,centerPoint.y-15 )

            context.fill()

            context.closePath()

        }

    }

</script>

</body>

</html>

方法只有一个：

    通过canvas的方式，在画布上画图

步骤：

1、定义一个canvas

2、获取canvas，然后通过画图

示例：canvas 元素来显示一个红色的矩形

<canvas id="myCanvas"></canvas>//定义一个canvas

<script type="text/javascript">

var canvas=document.getElementById('myCanvas')//获取canvas

var ctx=canvas.getContext('2d')

ctx.fillStyle='#FF0000' //图形填充色

ctx.fillRect(0,0,80,100) //绘制一个红色矩形

</script>

按照你的要求编写的Java程序如下：

import java.awt.BorderLayout

import java.awt.Color

import java.awt.Component

import java.awt.Container

import java.awt.Graphics

import java.awt.GridLayout

import java.util.ArrayList

import java.util.Dictionary

import java.util.Hashtable

import java.util.List

import javax.swing.JFrame

import javax.swing.JLabel

import javax.swing.JPanel

import javax.swing.JSlider

import javax.swing.event.ChangeEvent

import javax.swing.event.ChangeListener

public class KKK extends JFrame implements ChangeListener{

 Container con

 JLabel jl1=new JLabel("a value")

 JLabel jl2=new JLabel("b value")

 JLabel jl3=new JLabel("c value")

 JPanel jp=new JPanel()

 JPanel jp1=new JPanel()

 JPanel jp2=new JPanel()

 JPanel jp3=new JPanel()

 JCurvePanel jcp=new JCurvePanel()

 JSlider js1=new JSlider(JSlider.HORIZONTAL,0,100,50)

 JSlider js2=new JSlider(JSlider.HORIZONTAL,0,100,50)

 JSlider js3=new JSlider(JSlider.HORIZONTAL,0,100,50)

 int a=1

 int b=2

 int c=1

 KKK(){

  js1.setPaintTicks(true) 

  js1.setMinorTickSpacing(5) 

  js1.setMajorTickSpacing(100) 

  js1.setPaintLabels(true) 

        Dictionary<Integer, Component> labels = new Hashtable<Integer, Component>() 

        labels.put(0, new JLabel("0")) 

        labels.put(20, new JLabel("20")) 

        labels.put(40, new JLabel("40")) 

        labels.put(60, new JLabel("60")) 

        labels.put(80, new JLabel("80")) 

        labels.put(100, new JLabel("100")) 

        js1.setLabelTable(labels) 

        js2.setPaintTicks(true) 

        js2.setMinorTickSpacing(5) 

        js2.setMajorTickSpacing(100) 

        js2.setPaintLabels(true)

        js2.setLabelTable(labels) 

        js3.setPaintTicks(true) 

        js3.setMinorTickSpacing(5) 

        js3.setMajorTickSpacing(100) 

        js3.setPaintLabels(true)

        js3.setLabelTable(labels) 

  js1.addChangeListener(this)

  js2.addChangeListener(this)

  js3.addChangeListener(this)

  jp.setLayout(new GridLayout(3,1))

  jp1.add(js1)jp1.add(jl1)

  jp2.add(js2)jp2.add(jl2)

  jp3.add(js3)jp3.add(jl3)

  jp.add(jp1)jp.add(jp2)jp.add(jp3)

  con=getContentPane()

  jp.setBackground(Color.WHITE)

  con.add(jp,BorderLayout.EAST)

  con.add(jcp,BorderLayout.CENTER)

  setSize(700,500)

  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)

  setLocationRelativeTo(null)

  setVisible(true)

 }

 public static void main(String[] args) {

  new KKK()

 }

 @Override

 public void stateChanged(ChangeEvent ce) {

  if(ce.getSource()==js1){

   a=js1.getValue()

  }

  if(ce.getSource()==js2){

   b=js2.getValue()

  }

  if(ce.getSource()==js3){

   c=js3.getValue()

  }

  repaint()

 }

 class JCurvePanel extends JPanel{

  JCurvePanel(){

   this.setBackground(Color.BLACK)

   this.setForeground(Color.WHITE)

  }

  public void paint(Graphics g){

   super.paint(g)

   int x0, y0 

   x0 = this.getWidth() / 2 

   y0 = this.getHeight() / 2

   int triangleYX[]={x0-5,x0+5,x0}

   int triangleYY[]={50,50,45}

   g.setColor(Color.WHITE) 

   g.drawLine(x0, 50, x0, y0 * 2-50)

   g.fillPolygon(triangleYX, triangleYY, 3)

   for(int i=y0i>50i-=10){

    g.drawLine(x0,i,x0+5,i)

   }

   for(int i=y0i<y0*2-50i+=10){

    g.drawLine(x0,i,x0+5,i)

   }

   int triangleXX[]={x0*2-50,x0*2-50,x0*2-45}

   int triangleXY[]={y0-5,y0+5,y0}

   g.drawLine(50, y0, x0 * 2-50, y0)

   g.fillPolygon(triangleXX, triangleXY, 3)

   for(int i=x0i>50i-=10){

    g.drawLine(i,y0,i,y0-5)

   }

   for(int i=x0i<x0*2-50i+=10){

    g.drawLine(i,y0,i,y0-5)

   }

   List<Integer> listx=new ArrayList<Integer>()

   List<Integer> listy=new ArrayList<Integer>()

   

   for(int j=-200j<200j++){

    listx.add(j)

    listy.add(-(a*j*j+b*j+c))

   }

   for (int i = 0 i < listx.size()-1 i++) {

    g.drawLine(listx.get(i)+x0,listy.get(i)+y0, listx.get(i+1)+x0, listy.get(i+1)+y0)

   }

  }

 }

}

运行结果：