Definition of 1,canvas
<canvas id= "MyCanvas" width= "height=" >
The default <canvas> canvas displays a blank, borderless rectangle on the page. To make the outline visible, add a dotted border to it by defining the style rule:
Canvas {
border:1px dashed black;
}
2, gets the canvas context object
To complete the drawing task, first we have to get the <canvas> object and then get the two-dimensional drawing context.
The following sample demonstrates getting the drawing context when the page finishes loading:
<script>
Window.onload = function () {
var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");
Write the drawing code here
}
</script>
3, draw a straight line
(1) Draw a starting point below (50,50), the end point is (150,150) line line
Context.moveto (50, 50);
Context.lineto (150, 150);
Context.stroke ();
(2) Use LineWidth, Strokestyle properties to set the width and color of the line, respectively
Line width
Context.linewidth = 10;
Line Color (support for color encoding and RGB () functions)
Context.strokestyle = "#cd2828";
Context.strokestyle = "RGB (205,40,40)";
Context.moveto (50, 50);
Context.lineto (150, 150);
Context.stroke ();
(3) Use the LineCap property to set the shape (thread type) at both ends of the line:
Butt: Square head (default value)
Round: Round Head
Square: Plus rectangular head (the effect is similar to butt, but will increase the length of the line width at both ends of the line)
var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");
Line width
Context.linewidth = 10;
Line Color
Context.strokestyle = "#cd2828";
First line, default square head
Context.moveto (50, 50);
Context.lineto (250, 50);
Context.stroke ();
Second line, using round Head
Context.beginpath ();
Context.moveto (50, 100);
Context.lineto (250, 100);
Context.linecap = "Round";
Context.stroke ();
The third line, using the extra rectangular head
Context.beginpath ();
Context.moveto (50, 150);
Context.lineto (250, 150);
Context.linecap = "Square";
Context.stroke ();
Note: the Beginpath () method of the drawing context
The example above can see that the Beginpath () method is invoked each time the drawing of a new segment is started.
Without this step, each call to stroke () will redraw the original line segment on the canvas. In particular, as in the example above, the context attribute is modified when the new segment is drawn, and if the Beginpath () method is not invoked, the original line is drawn with the new style.
HTML5 Canvas Multi-layer ring animation
1.HTML and CSS Preparation
<! DOCTYPE html>
<title>rotate circlr</title>
<style type= ' text/css ' rel= ' stylesheet ' >
body{
margin:0px;
}
#canvas {
Background: #dddddd;
margin:0px;
}
</style>
</HEAD>
<BODY>
<canvas id= ' canvas ' width= "1366" height= "576" > Canvas cannot supported! </canvas>
</BODY>
</HTML>
Written by 2,js
var canvas = document.getElementById (' canvas ');
var context = Canvas.getcontext (' 2d ');
Parameter definition
var Circleradius = 10,//radius of Small Circle
rgb,//Color
Angle,//Angle
Counter
Numofsmallcircle=7,//The number of the innermost small circle
Numofring=6,//circular ring number
Anglechangesize = 0,//degree of angle rotation
Direction,//Circle turn direction, 1 clockwise,-1 counterclockwise
The trajectory radius is calculated (because the distance between the center of any two circles on the trajectory is equal to the center of the circle), so three points
Can constitute a isosceles, we are based on the isosceles to calculate the length of the formula.
Pathradius = (circleradius*2+1)/2/(Math.sin (MATH.PI*2/NUMOFSMALLCIRCLE/2));
function Drawcircle (anglechange) {
for (Var i=1;i<=numofring;i++)
{
The decision setting for the direction of the picture rotation
if (i%2==1)
{
Direction=1;
} else {
Direction=-1;
}
RGB = Math.floor (Math.random () *255);
for (Var j=1;j<=numofsmallcircle*i;j++)
{
Calculation angle
Angle = (math.pi*2/numofsmallcircle/i*j) + (math.pi*2/360*anglechange*direction);
Context.beginpath ();
Draw a small circle position
Context.arc (canvas.width/2+pathradius* (i) *math.cos (Angle),
canvas.height/2+pathradius* (i) *math.sin (Angle), circleradius,0,math.pi*2,true);
Set RGB values for changes
Context.fillstyle = ' rgb (' +rgb+ ', ' +math.floor (RGB/4) + ', ' + (255-RGB) + ') ';
Context.fill ();
}
}
}
function Draw () {
Erase the result of the last drawing circle so that the change of the small circle seems to be dynamic
If you do not understand, comment out the following line, and then look at the effect
Context.clearrect (0,0,canvas.width,canvas.height);
For scrolling settings
Anglechangesize==360? anglechangesize=0:anglechangesize++;
Drawcircle (anglechangesize);
}
var LOOP = setinterval (' Draw () ', 150);
In fact, the principle of this is simply: the transformation of the position to draw a circle, and the transformation of the rules are based on the trajectory of another circle. In other words, all the centers of the small circle are on the track of the Great circle. It is controlled by a time function, allowing the position of the small circle to change over time, and to zero the scrolling value after a week of rotation, and circle the circles. In this example, the number of circles per layer is increased in multiples, and this method of calculating the increased circle of each layer can be set itself, and here is just a demo. As for the angle change method is to use math.pi*2/n here N refers to the number of circles per layer
HTML5 Canvas Flame Animation
<! DOCTYPE html>
<meta Charset=utf-8 "/>
<title> a cool flame effect </title>
<style type= "Text/css" >
body{
margin:0; padding:0;
}
#canvas-keleyi-com {Display:block}
</style>
<body>
<canvas id= "canvas-keleyi-com" ></canvas>
<script type= "Text/javascript" >
Window.onload = function () {
var Keleyi_canvas =
document.getElementById ("Canvas-kel" + "eyi-com");
var ctx = Keleyi_canvas.getcontext ("2d");
var W = window.innerwidth, H = window.innerheight;
Keleyi_canvas.width = W;
Keleyi_canvas.height = H;
var particles = [];
var mouse = {};
Lets create some particles now
var particle_count = 100;
for (var i = 0; i < Particle_count; i++)
{
Particles.push (new particle ());
}
Keleyi_canvas.addeventlistener (' MouseMove ', Track_mouse, false);
function Track_mouse (e)
{
mouse.x = E.pagex;
Mouse.y = E.pagey;
}
function particle ()
{
This.speed = {x: -2.5+math.random () *5, Y: -15+math.random () *10};
Location = Mouse coordinates
Now the flame follows the mouse coordinates
if (mouse.x && mouse.y)
{
This.location = {x:mouse.x, y:mouse.y};
}
Else
{
This.location = {X:W/2, Y:H/2};
}
Radius range = 10-30
This.radius = 10+math.random () *20;
Life range = 20-30
This.life = 20+math.random () *10;
This.remaining_life = This.life;
Colors
THIS.R = Math.Round (Math.random () *255);
THIS.G = Math.Round (Math.random () *255);
this.b = Math.Round (Math.random () *255);
}
function Draw ()
{
Ctx.globalcompositeoperation = "Source-over";
Ctx.fillstyle = "BLACK";
Ctx.fillrect (0, 0, W, H);
Ctx.globalcompositeoperation = "Lighter";
for (var i = 0; i < particles.length; i++)
{
var p = particles[i];
Ctx.beginpath ();
p.opacity = Math.Round (p.remaining_life/p.life*100)/100
var gradient = ctx.createradialgradient (p.location.x, P.LOCATION.Y, 0, p.location.x, P.LOCATION.Y, P.radius);
Gradient.addcolorstop (0, "Rgba" ("+p.r+", "+p.g+", "+p.b+", "+p.opacity+") ");
Gradient.addcolorstop (0.5, "Rgba" ("+p.r+", "+p.g+", "+p.b+", "+p.opacity+") ");
Gradient.addcolorstop (1, "Rgba" ("+p.r+", "+p.g+", "+p.b+", 0) ");
Ctx.fillstyle = gradient;
Ctx.arc (p.location.x, P.LOCATION.Y, P.radius, math.pi*2, false);
Ctx.fill ();
p.remaining_life--;
p.radius--;
P.location.x + = p.speed.x;
P.LOCATION.Y + = P.speed.y;
if (P.remaining_life < 0 | | P.radius < 0)
{
Particles[i] = new particle ();
}
}
}
SetInterval (draw, 86);
}
</script>
</body>
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
