我正在尝试将圆形div拖动到画布组件，即维恩图。我想将圆圈放到画布内部的维恩图中的左右圆圈。 我在div上添加了拖动功能，但是canvas元素上只有一个放置功能。如何在画布内维恩图中的左右圆上应用该放置函数？
var canvas = document.getElementById('canvas');
canvas.width = 624;
canvas.height = 468;
var context = canvas.getcontext('2d');
var radius = 180;
function redraw()
{
context.beginPath();
context.arc(420,240,radius,2 * Math.PI,false);
context.fillStyle = "rgb(0,250,0)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#ffffff';
context.stroke();
context.globalCompositeOperation="lighter";
}
var c1 = function circle1 () {
context.beginPath();
context.arc(420,false);
context.fillStyle = "rgba(0,0.1)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#ffffff';
context.stroke();
context.globalCompositeOperation = "lighter";
};
var c2 = function circle2 () {
context.beginPath();
context.arc(210,0.1)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#ffffff';
context.stroke();
context.globalCompositeOperation = "lighter";
}
c1();
c2();
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text",ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
redraw();
} body {
color: #ffffff;
background-color: #ffffff;
font-family: arial;
margin: auto;
padding: 0px;
overflow: hidden;
}
input[type=range]:focus {
outline: none;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 14px 0;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
background: rgba(255,255,0);
border-radius: 1px;
border: 0px solid #000101;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: rgba(125,125,0);
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
box-shadow: 1px 1px 1px silver,0);
border-radius: 1px;
border: 0px solid #000101;
}
input[type=range]::-ms-fill-lower {
background: rgba(252,252,0);
border: 0px solid #000101;
border-radius: 2px;
box-shadow: 1px 1px 1px #000000,0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: rgba(255,0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 2px 2px 2px #000000,0px 0px 2px #0d0d0d;
border: 4px solid #ffffff;
height: 32px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
height: 4px;
}
input[type=range]:focus::-ms-fill-lower {
background: rgba(255,0);
}
input[type=range]:focus::-ms-fill-upper {
background: rgba(255,0);
}
.circle{
margin: auto;
display: grid;
grid-template-columns: 3fr 3fr 3fr 3fr;
justify-items: center;
position: relative;
top: 17vh;
}
.circle > div {
border-radius: 50%;
border: 10px solid transparent;
width: 200px;
height: 200px;
}
#circle1{
background: red;
}
#circle2{
background: green;
}
#circle3{
background: blue;
}
#circle4{
background: yellow;
}<!DOCTYPE HTML>
<html>
<head>
<title>color mixer</title>
</head>
<body >
<center>
<canvas id="canvas" width="" height="" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></canvas>
</center>
<div class="circle">
<div id="circle1" draggable="true" ondragstart="dragStart(event)"></div>
<div id="circle2" draggable="true" ondragstart="dragStart(event)"></div>
<div id="circle3" draggable="true" ondragstart="dragStart(event)"></div>
<div id="circle4" draggable="true" ondragstart="dragStart(event)"></div>
</div>
</body>
</html>
强文本