I draw circle using canvas in html5, but in gdi+(c#), it can't achieve the same effect?

Question

1.00/5 (1 vote)

See more:

hi all,
My english is not very well,my question is I use HTML5 on the page to draw a circle, and I need to export it for pdf. so I also use c# to draw a circle, but it can't achieve the same effect. Using c# draw a circle, the color of center of cricle is blue(alpha=255), the color of frame of circle is black(alpha=0), but the effect is the blue gradient to blue transparent, not blue fade to black transparent.following is my code.
thanks.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body onload="">
    <canvas id="myCanvas" width="500" height="500">
    Your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">
        function tt()
        {
            var c = document.getElementById("myCanvas");
            var cxt = c.getContext("2d");
            var radGrad = cxt.createRadialGradient(200, 200, 0, 200, 200, 100);
            radGrad.addColorStop(0.0, 'rgba(0,0,255,1)');
            radGrad.addColorStop(1.0, 'rgba(0,0,0,0)');
            cxt.fillStyle = radGrad;
            cxt.fillRect(0, 100, 400, 200);
        }
        tt();
    </script>
</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
        {
            Bitmap bmp = new Bitmap(200, 200);
            Graphics g = Graphics.FromImage(bmp);
            Color cStart = Color.FromArgb(0, 0, 0, 0);
            Color cEnd = Color.FromArgb(255, 0, 0, 255);
            int radius = 100;
            GraphicsPath path = new GraphicsPath();
            path.AddEllipse(0, 0, radius * 2, radius * 2);
            PathGradientBrush pthGrBrush = new PathGradientBrush(path);
            pthGrBrush.CenterColor = cEnd;
            Color[] colors = { cStart };
            pthGrBrush.SurroundColors = colors;
            g.FillEllipse(pthGrBrush, 0, 0, radius * 2, radius * 2);
            bmp.Save("d:\\1.png");
            bmp.Dispose();
            g.Dispose();
        }

Posted 24-Feb-12 4:20am

Member 4715844

Updated 26-Feb-12 16:22pm

v2

Add a Solution

Comments

Ed Nutting 24-Feb-12 15:06pm

Please explain your problem - at the moment this is just a code dump - what exactly isn't working? What error are you getting?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Answer 1 · 2012-02-26T18:33:00

You mean this?

private Bitmap CreateFilledCircle()
{
    Bitmap canvas = new Bitmap(200, 200);

    using (Graphics g = Graphics.FromImage(canvas))
    {
        using (GraphicsPath graphPath = new GraphicsPath())
        {
            graphPath.AddEllipse(0, 0, 199, 199);

            using (PathGradientBrush pathBrush = new PathGradientBrush(graphPath))
            {
                pathBrush.CenterColor = Color.Blue;
                
                Color[] edgeColors = { Color.FromArgb(0, 0, 255, 255) };
                pathBrush.SurroundColors = edgeColors;

                g.FillEllipse(pathBrush, 0, 0, 199, 199);
            }

        }

    }

    return canvas;
}

Member 4715844 · Answer 2 · 2012-02-26T18:58:00

Dave Kreskowiak, thanks.
but it can't solve the problem.you can see two pic following:
gdi+:
http://hi.csdn.net/attachment/201202/27/60193_1330319907389B.png
html5:
http://hi.csdn.net/attachment/201202/27/60193_1330319894TV5u.png

I don't konw how to upload pic in codeproject, so I add two links.
I want to realization of the second image effects.

I draw circle using canvas in html5, but in gdi+(c#), it can't achieve the same effect?

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0