小编Man*_*ish的帖子

我想在随机位置的div内显示随机数而不重叠.我能够在随机位置显示随机数,但它在盒子外面并相互重叠.

这是我的代码:

JS小提琴

var width = $('.container').innerWidth();
var height = $('.container').innerHeight();

(function generate() {     // vary size for fun
    for (i = 0; i < 15; i++) {
        var divsize = 12;
        var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
        $newdiv = $('<div/>').css({
            'width': divsize + 'px',
                'height': divsize + 'px'
        });

        // make position sensitive to size and document's width
        var posx = (Math.random() * (width - divsize)).toFixed();
        var posy = (Math.random() * (height - divsize)).toFixed();

        $newdiv.css({
            'position': 'absolute', …

我试图在鼠标移动时旋转画布中的圆弧，但它不起作用。

这是我的代码：

http://jsfiddle.net/nNffu/

        var c=document.getElementById("c");
        var ctx=c.getContext('2d');
        c.width=window.innerWidth;
        c.height=window.innerHeight;

        var width=c.width;
        var height=c.height;

        draw();

        function draw(){
            var cx=width/2;
            var cy=height/2;

            ctx.beginPath();
            ctx.strokeStyle="#fff";
            ctx.arc(cx,cy,100,0,Math.PI);
            ctx.stroke();

        }

        document.addEventListener("mousemove",function(e){

            var p1=(width/2)-e.clientX;
            var p2=(height/2)-e.clientY;
            var angle=Math.atan2(p2, p1);
            ctx.clearRect(0,0,width,height);
            ctx.beginPath();
            ctx.strokeStyle="#fff";
            ctx.arc(width/2,height/2,100,0,Math.PI);
            // ctx.translate(width/2,height/2);
            ctx.rotate(angle);
            //ctx.translate(0,0);
            ctx.stroke();
           // ctx.restore();
        },false);

它不起作用。后来我想添加更多对象，但它们不应该旋转，只有这个半圆应该根据鼠标移动进行旋转。我尝试了其他翻译示例，我已对其进行了评论，因为它不起作用。我该如何修复我的代码来做到这一点？