JavaScript怎样做出一个画圆圈的效果啊,比如一张图片是一个小圆点,怎样让这个小圆点以20p

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript怎样做出一个画圆圈的效果啊,比如一张图片是一个小圆点,怎样让这个小圆点以20p相关的知识,希望对你有一定的参考价值。

JavaScript怎样做出一个画圆圈的效果啊,比如一张图片是一个小圆点,怎样让这个小圆点以20px为半径的大小画圆圈呢

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画圆</title>
<script src="http://apps.bdimg.com/libs/raphael/2.1.2/raphael-min.js"></script>
</head>
<body>

<div id="holder"></div>
<script>
var paper = Raphael( "holder", 400, 400 );
var circle = paper.circle(200, 200, 150);  // 从200,200 开始画一个半径150的圆
circle.attr("fill", "#f00"); //并用红色填充
</script>
</body>
</html>

追问

js里面有circle这个用法啊

参考技术A 你会Java?会c++吗?

试图画一个实心圆圈,但它有一个黑色的背景

【中文标题】试图画一个实心圆圈,但它有一个黑色的背景【英文标题】:Trying to draw a filled circle but it has got a black background 【发布时间】:2014-12-05 11:21:12 【问题描述】:

我想用某种颜色画一个圆,填满整个圆。我正在使用自动布局来确定圆圈的大小。如果我这样做,则绘制圆圈但背景颜色为黑色。它应该是一种清晰的颜色,以便背景可以发光,当然圆圈应该是圆形的。这是我用 C# 编写的代码,但它与 Objective-C 没有太大区别。

public class Circle : UIView
    
        private UIColor color;

        public Circle ()
        
            this.color = UIColor.Red;
        

        public override void Draw (RectangleF rect)
        
            base.Draw (rect);

            this.BackgroundColor = UIColor.Clear;

            float red = 0;
            float green = 0;
            float blue = 0;
            float alpha = 0;
            color.GetRGBA (out red, out green, out blue, out alpha);

            float lineWidth = 2.0f;
            RectangleF borderRect = RectangleF.Inflate (rect, -lineWidth/2, -lineWidth/2);

            // Get the context
            CGContext context = UIGraphics.GetCurrentContext ();

            // Set the border width
            context.SetLineWidth (lineWidth);

            // Set the circle fill color
            context.SetRGBFillColor (red, green, blue, alpha);

            // Set the circle border color
            context.SetRGBStrokeColor (red, green, blue, alpha);

            // Fill the circle with the fill color
            context.FillEllipseInRect (borderRect);

            // Draw the circle border
            //context.StrokeEllipseInRect (borderRect);
        
    

圆比UIView 略小,因此可以正确绘制,不接触边缘(因此切割某些部分)。

但是你可以在这里看到背景是黑色的:

如何画一个实心圆?

【问题讨论】:

【参考方案1】:

看来我得放这个

this.BackgroundColor = UIColor.Clear;

进入构造函数。现在我不再有黑色背景了。

使用这些代码行绘图似乎也足够了:

context.AddEllipseInRect (rect);
context.SetFillColor (color.CGColor);
context.FillPath ();

【讨论】:

以上是关于JavaScript怎样做出一个画圆圈的效果啊,比如一张图片是一个小圆点,怎样让这个小圆点以20p的主要内容,如果未能解决你的问题,请参考以下文章

高一数学韦恩图怎么画?

css3画矩形,矩形里面有多个圆圈,圆圈里面有字,如何实现?

如何使用CSS画一个圆圈?圆圈中间写字?

给定尺寸比时,在预览视图上绘制圆圈不准确

怎么用visio画电路示意图?如何使用visio绘制电路图啊??

怎样用origin7.5 由已知的一些点做出一条折线图,求解折线图转折点的坐标值(未知)?