我需要每个用户单击按钮的多个图像-它应该是jQuery
||
单击按钮时，我需要获取多个圆形图像。我只用一张图像就做到了，那也是可拖动的。
但我需要每个用户单击按钮的多个图像。
我们应该使用append函数来做到这一点。我在使用画布标签。如果是这样，我们如何实现这一目标。
<script>
$(document).ready(function() {
$(\'#pink-circle-button\').click(function() {
$(\'#currentCircle\').show();
});
});
$(function() {
$( \"#currentCircle\" ).draggable();
});
$(document).ready(function(){
$(\"button#pink-circle-button\").click(function(){
$(\"p\").append(\"<canvas id=\'currentCircle\' class=\'drawCircle\'/>\");
});
});
</script>
<style>
.drawCircle{border: 2px solid rgb(255, 0, 255);background-color:black; position: fixed; display: none; top: 97px; left: 572px; width: 153px; height: 150px; border-radius: 76.5px 76.5px 76.5px 76.5px;}
</style>
<canvas id=\"currentCircle\" class=\'drawCircle\'/></canvas>
没有找到相关结果
已邀请:
1 个回复
讼乐
var ctx = $(\'#cv\').get(0).getContext(\'2d\'); $(\'body\').bind(\'selectstart\', function() {return false}); var Circle = function() { this.x = Math.random() * 400; this.y = Math.random() * 400; this.c = \'rgb(\' + Math.floor(Math.random() * 256) + \',\' + Math.floor(Math.random() * 256) + \',\' + Math.floor(Math.random() * 256) + \')\'; }; var circles = []; function d(xp, yp, x, y) { return Math.sqrt((x-xp)*(x-xp) + (y-yp)*(y-yp)); } $(\'button\').click(function() { circles.push(new Circle); render(); }); var currindex = -1; $(\'#cv\').mousedown(function(e) { bx = e.offsetX, by = e.offsetY; for(var i = 0; i < circles.length; i++) { if(d(circles[i].x, circles[i].y, e.offsetX, e.offsetY) < 50) { currindex = i; tx = circles[i].x; ty = circles[i].y; } } }); var bx = 0, by = 0, tx = 0, ty = 0; $(\'#cv\').mouseup(function(e) { currindex = -1; }); $(\'#cv\').mousemove(function(e) { if(currindex > -1) { circles[currindex].x = tx + (e.offsetX - bx); circles[currindex].y = ty + (e.offsetY - by); } render(); }); function render() { ctx.clearRect(0, 0, 400, 400); for(var i = 0; i < circles.length; i++) { ctx.beginPath(); ctx.arc(circles[i].x, circles[i].y, 50, 0, Math.PI*2); ctx.fillStyle = circles[i].c; ctx.fill(); } }