[Html]
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> HTML5 radial gradient drawing </title>
<Script type = "text/javascript">
Window. onload = function ()
{
Var canvas = document. getElementById ("canvas ");
Var context = canvas. getContext ("2d ");
Var g1 = context. createRadialGradient (400, 0, 0,400, 0,400 );
G1.addColorStop (0.1, "rgb (255,255, 0 )");
G1.addColorStop (0.3, "rgb (255, 0,255 )");
G1.addColorStop (1, "rgb (0,255,255 )");
Context. fillStyle = g1;
Context. fillRect (0, 0,400,350 );
Var g2 = context. createRadialGradient (250,250, 0,250,250,300 );
G2.addColorStop (0.1, "rgba (255, 0, 0, 0.5 )");
G2.addColorStop (0.7, "rgba (255,255, 0, 0.5 )");
G2.addColorStop (1, "rgba (0, 0,255, 0.5 )");
For (var I = 0; I <10; I ++)
{
Context. beginPath ();
Context. fillStyle = g2;
Context. arc (I * 25, I * 25, I * 10, 0, Math. PI * 2, true );
Context. closePath ();
Context. fill ();
}
}
</Script>
</Head>
<Body>
<Canvas id = "canvas" width = "600" height = "400"> </canvas>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
