The flag is drawn today:
The code is as follows:
<script>
var col=new Array ("Red", "Brown");
var ticker=0;
var step=0;
function Drawbackground () {
var G=document.getelementbyid ("Background"). GetContext ("2d");
var grd=g.createlineargradient ( -560+ticker, 0, 1400+ticker,0);
for (var i=0; i<10; i++)
Grd.addcolorstop (i/10,col[(i + Step)%col.length]);
ticker=ticker+10;
if (ticker>=196) {
ticker=0;
step++;
}
G.FILLSTYLE=GRD;
G.fillrect (0,0,1000,500); The overall size of the red flag
}
Function preperation () {
SetInterval (' Drawbackground () ', +);
}
</script>
<style type= "Text/css";
#myCanvas {
z-index:2;
Position:absolute; left:0px; top:-5px;
}
#background {
z-index:1;
Position:absolute;
left:0px;
top:0px;
}
</style>
<body onload= "preperation ()"
<canvas id= "MyCanvas" width= "900 "Height=",
Your Browser does not support the HTML5 canvas tag.
<canvas id= "Background" width= "</canvas>" height= "></canvas>";
<script>
var x=new Array (0,12,54,18,28,0,-28,-18,-54,-12,0); Pentagram sample coordinates xx array
var y=new array ( -53,-17,-17,1,45,19,45,1,-17,-17,-53);//pentagram sample coordinate y array
var C=document.getelementbyid ("MyCanvas");
var Ctx=c.getcontext ("2d"); Get brushes
Sample array x-axis coordinates a, and y-axis coordinate B
Specify location [Locationx,locationy]
The size of the true pentagram, compared to the size of the sample pentagram F
When the pentagram is finished, the angle of rotation rotation
Function Star (a,b,locationx,locationy,f,rotation) {
Ctx.save ();//The initial environment for recording paint (brushes)
Ctx.translate (Locationx,locationy);
Ctx.rotate (rotation*math.pi/180.0);
Ctx.beginpath ();
Ctx.moveto (Math.Round (a[0]*f), Math.Round (b[0]*f));
for (Var i=1;i<a.length;i++)
Ctx.lineto (Math.Round (a[i]*f), Math.Round (b[i]*f));
Ctx.closepath ();
Ctx.fillstyle= "Yellow";
Ctx.fill ();
Ctx.restore ();//restore Drawing (brush) Initial environment
}
Star (x,y,165,165,1.4,0);//Draw Big Pentagram
Star (x,y,301,65,0.5,30);//Draw a small pentagram
Star (x,y,362,126,0.5,-30);//Draw a small pentagram
Star (x,y,359,216,0.5,0);//Draw a small pentagram
Star (x,y,301,273,0.5,30);//Draw a small pentagram
</script>
</body>
This is my last two blog post for the summer, tomorrow is the last consecutive record, tomorrow will use canvas to draw a cool graphic style!!
Canvas Draw Flag Style
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
