Transparent
The Context object can change the transparency of the Canvas object generated by changing its globalAlpha attribute. The value range of the globalAlpha attribute is [0, 1]. 0 indicates completely transparent, and 1 indicates completely opaque.
Example:
<! Doctype html>
<Html>
<Body>
<Canvas id = "canvas" width = "600" height = "400">
<P> Your browserdoes not support the canvas element! </P>
</Canvas>
<Script type = "text/javascript">
Var canvas = document. getElementById ("canvas ");
Var context2D = canvas. getContext ("2d ");
Const TIME = 1
Var factor = 0;
Function changeAlpha (){
Factor + = TIME/50;
Context2D. globalAlpha = (Math. sin (factor) + 1)/2; // a simple algorithm is used to deploy the file transparently.
}
Function draw (){
Context2D. clearRect (0, 0, canvas. width, canvas. height );
ChangeAlpha ();
// Fill the circle above in gray
Context2D. fillStyle = "# FF0000 ";
Context2D. arc (100,100, 60, 0, Math. PI * 2, false); // note that the parameter here is in radians rather than degrees.
Context2D. fill ();
}
SetInterval (draw, TIME );
</Script>
</Body>
</Html>
<! Doctype html>
<Html>
<Body>
<Canvas id = "canvas" width = "600" height = "400">
<P> Your browserdoes not support the canvas element! </P>
</Canvas>
<Script type = "text/javascript">
Var canvas = document. getElementById ("canvas ");
Var context2D = canvas. getContext ("2d ");
Const TIME = 1
Var factor = 0;
Function changeAlpha (){
Factor + = TIME/50;
Context2D. globalAlpha = (Math. sin (factor) + 1)/2; // a simple algorithm is used to deploy the file transparently.
}
Function draw (){
Context2D. clearRect (0, 0, canvas. width, canvas. height );
ChangeAlpha ();
// Fill the circle above in gray
Context2D. fillStyle = "# FF0000 ";
Context2D. arc (100,100, 60, 0, Math. PI * 2, false); // note that the parameter here is in radians rather than degrees.
Context2D. fill ();
}
SetInterval (draw, TIME );
</Script>
</Body>
</Html>
:
Ps: because it is a dynamic graph, the screenshot effect is only one frame, and the dynamic effect cannot be displayed. You can perform experiments on your own. In addition, there are good ways to create a dynamic graph. You can leave a message, so I am very grateful.
From Feng Xiaowei
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
