开发者社区> 问答> 正文

JavaScript如何设置画一个圆的背景色

下面的代码只是画了一个圆,请问老师,如何设置能让这个圆的背景色与其他的地方的背景色不一样?谢谢

<style>
    span{position:absolute; color: red}
  </style>
 <script>
    var showCircle = function() {
        var PI = Math.PI;
        return {
            draw: function(r, _x, _y) {
                // 获得x y坐标
                var x, y;
                for(var i = 0; i < 360; i += 6) {
                    x = Math.cos(PI / 180 * i) * r + _x;
                    y = Math.sin(PI / 180 * i) * r + _y;
                    var O = document.createElement('span');
                    O.appendChild(document.createTextNode('.'));
                    document.body.appendChild(O);
                    O.style.left = x + 'px';
                    O.style.top = y + 'px';
                }        
            }
        }
    }();

    showCircle.draw(100, 400, 200);
 </script>

展开
收起
小旋风柴进 2016-03-19 08:53:48 2220 0
1 条回答
写回答
取消 提交回答
  • 用h5

    var canvas=document.getElementById("canvas");
     var cxt=canvas.getContext("2d");
     //画一个空心圆
    cxt.beginPath();
     cxt.arc(200,200,50,0,360,false);
     cxt.lineWidth=5;
     cxt.strokeStyle="green";
     cxt.stroke();//画空心圆
    cxt.closePath();
     //画一个实心圆
    cxt.beginPath();
     cxt.arc(200,100,50,0,360,false);
     cxt.fillStyle="red";//填充颜色,默认是黑色
    cxt.fill();//画实心圆
    cxt.closePath();
     //空心和实心的组合
    cxt.beginPath();
     cxt.arc(300,300,50,0,360,false);
     cxt.fillStyle="red";
     cxt.fill();
     cxt.strokeStyle="green";
     cxt.stroke();
     cxt.closePath();
    
    2019-07-17 19:07:08
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载