If we want to color the graph, there are two important properties to do: FillStyle and Strokestyle.
FillStyle = Color
Strokestyle = Color Strokestyle is the color used to set the outline of a graphic, and FillStyle is used to set the fill color. Color can be a string that represents a CSS color value, a gradient object, or a pattern object. By default, both the line and fill color are black (CSS color values #000000). The following examples all represent the same color.
The values for these fillStyle are ' orange '
Ctx.fillstyle = "Orange";
Ctx.fillstyle = "#FFA500";
Ctx.fillstyle = "RGB (255,165,0)";
Ctx.fillstyle = "Rgba (255,165,0,1)"; Note: Currently, the Gecko engine does not provide support for all CSS 3 color values. For example, HSL (100%,25%,0) or RGB (0,100%,0) are not available. Note: Once you set the value of Strokestyle or FillStyle, the new value becomes the default for the newly drawn drawing. If you want to give a different color to each graphic, you need to reset the value of FillStyle or Strokestyle.
|
|
Canvas Fill Style FillStyle
Description
In this example, I'm going to use the two-layer for loop again to draw a grid array of different colors for each square. Results, but the code used for the implementation is less brilliant. I used two variables I and j to produce a unique RGB color value for each square, where only the values of the red and green channels are modified, and the value of the blue channel remains the same. You can create a variety of swatches by modifying the values of these color channels. By increasing the frequency of the gradients, you can also draw a palette like the one in Photoshop.
Code:
<meta http-equiv= "Content-type" content= "TEXT/HTML;CHARSET=GBK"/>
<script type= "Text/javascript" >
function Draw () {
var ctx = document.getElementById (' canvas '). GetContext (' 2d ');
for (Var i=0;i<6;i++) {
for (Var j=0;j<6;j++) {
Ctx.fillstyle = ' rgb (' + Math.floor (255-42.5*i) + ', ' +math.floor (255-42.5*j) + ', 0) ';
Ctx.fillrect (j*25,i*25,25,25);
}
}
}
</script>
<title> Test fillstyle</title>
<body onload= "Draw ();" >
<canvas id= "Canvas" width= "height=" >
</canvas>
</body>
effect
Canvas Strokestyle Case
Description
This example is somewhat similar to the above, but this time using the Strokestyle attribute, and not the square, but the arc method to draw the circle.
Code
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<script type= "Text/javascript" >
function Draw () {
var ctx = document.getElementById (' canvas '). GetContext (' 2d ');
for (Var i=0;i<6;i++) {
for (Var j=0;j<6;j++) {
Ctx.strokestyle = ' rgb (0, ' + math.floor (255-42.5*i) + ', ' + Math.floor (255-42.5*j) + ') ';
Ctx.beginpath ();
Ctx.arc (12.5+j*25,12.5+i*25,10,0,math.pi*2,true);
Ctx.stroke ();
}
}
}
</script>
<title> Test strokestyle</title>
<body onload= "Draw ();" >
<canvas id= "Canvas" width= "height=" >
</canvas>
</body>
====================================================
effect
Transparency Transparency
In addition to rendering solid-color graphics, we can also use canvas to draw translucent graphics. By setting the Globalalpha property or using a translucent color as the outline or fill style.
Globalalpha = transparency Value
The Globalalpha property is quite efficient when you need to draw lots of graphics with the same transparency. However, I think the following method is more operable.
Because the Strokestyle and FillStyle properties accept color values that conform to the CSS3 specification, we can use the following notation to set the color with transparency.
Ctx.strokestyle = "Rgba (255,0,0,0.5)";
Ctx.fillstyle = "Rgba (255,0,0,0.5)";
The Rgba () method is similar to the RGB () method, with one more parameter for setting the color transparency. Its effective range is from 0.0 (fully transparent) to 1.0 (completely opaque). Canvas Transparency Globalalpha
Description
In this example, I use a four-color lattice as the background, set Globalalpha to 0.2, and draw a series of translucent circles with a radius increment. The end result is a radial gradient effect. The more the circle is superimposed, the less transparent the previously drawn circle will be. By increasing the number of loops and drawing more circles, the central part of the background image disappears completely.
Code
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<script type= "Text/javascript" >
function Draw () {
var ctx = document.getElementById (' canvas '). GetContext (' 2d ');
Draw background
Ctx.fillstyle = ' #FD0 ';
Ctx.fillrect (0,0,75,75);
Ctx.fillstyle = ' #6C0 ';
Ctx.fillrect (75,0,75,75);
Ctx.fillstyle = ' #09F ';
Ctx.fillrect (0,75,75,75);
Ctx.fillstyle = ' #F30 ';
Ctx.fillrect (75,75,150,150);
Ctx.fillstyle = ' #FFF ';
Ctx.globalalpha = 0.2;
Draw Semi Transparent Circles
for (Var i=0;i<7;i++) {
Ctx.beginpath ();
Ctx.arc (75,75,10+10*i,0,math.pi*2,true);
Ctx.fill ();
}
}
</script>
<title> Test strokestyle</title>
<body onload= "Draw ();" >
<canvas id= "Canvas" width= "height=" >
</canvas>
</body>
==================================================== Effect:
Draw a triangle on the Web page (HTML5 canvas Drawing)Simplify the drawing process and re-write the diagram function (draw a triangle): function Drawtriangle (canvas,a,b,c) { Draw a triangle, "A, B, C" is the vertex With (Canvas) { MoveTo (a[0],a[1]); LineTo (b[0],b[1]); LineTo (c[0],c[1]); LineTo (a[0],a[1]); } } Write this function in "bigengineer.js". Here are a few more examples, all of which are representative, follow: 4. Draw a triangle: <title>Google search:HTML 5 Hydrakan </title> <script type= "text/javascript" src= "bigengineer.js" ></script> <body><canvas id= "CC" width= "height=" ></canvas> <script type= "Text/javascript" > var C=document.getelementbyid ("CC"); var Hb=c.getcontext ("2d"); Hb.beginpath (); var a=new Array (10,10); var b=new Array (50,40); var c=new Array (80,80); Drawtriangle (HB,A,B,C); Hb.stroke (); Hb.endpath (); </script> </body> The triangle I drew myself ///////
<! DOCTYPEHtml>
<Html>
<Headlang="EN">
<Metacharset="UTF-8">
<Title></Title>
<ScriptType="Text/javascript"Src="Bigengineer.js"></Script>
</Head>
<Body>
<CanvasId="CC"Width="800"height="200"></Canvas>
<ScriptType="Text/javascript">
VarC=Document.getElementById ("CC");
Varhb=C.GetContext ("2d");
Hb.Beginpath ();
VarA=New Array (10,10);
Varb=New Array (40,10);
VarC=New Array (70,70);
Hb.Closepath ();
Hb.strokestyle="Red";
Hb.fillstyle="Red";
Drawtriangle (HbAB,C);
HB. stroke ();
HB. Fill ();
Hb.endpath ();
</Script>
</Body>
</HTML>
</HTML>
Js
/**
* Created by ice on 2016/1/17.
*/
functionDrawtriangle (CANVAS,A,B,C)
{
Draw a triangle, "A, B, C" is the vertex
With (Canvas)
{
moveTo (a[0],a[1]);
lineTo (b[0],b[1]);
lineTo (c[0],c[1]);
lineTo (a[0],a[1]);
}
}
Excerpt from Blog
|
