What are the ways to specify color and transparency when drawing Canvas in HTML5
Editor to share with you what are the methods of specifying color and transparency when drawing Canvas in HTML5, I believe most people do not know much about it, so share this article for your reference, I hope you will get a lot after reading this article, let's go to know it!
Specify color
Black is the default color drawn by Canvas. If you want to change the color, you have to specify the color before the actual painting.
JavaScript Code copies content to the clipboard
Ctx.strokeStyle = color
Specify the color of the sketch line:
JavaScript Code copies content to the clipboard
Ctx.fillStyle = color
Specify the color of the fill:
Let's take a look at a practical example:
JavaScript
JavaScript Code copies content to the clipboard
Onload = function () {
Draw ()
}
Function draw () {
Var canvas = document.getElementById ('c1')
If (! Canvas | |! Canvas.getContext) {return false;}
Var ctx = canvas.getContext ('2d')
Ctx.beginPath ()
Ctx.fillStyle = 'rgb (192,80,77)'; / / Red
Ctx.arc (70, 45, 35, 0, Math.PI*2, false)
Ctx.fill ()
Ctx.beginPath ()
Ctx.fillStyle = 'rgb (155,187,89)'; / / Green
Ctx.arc (45, 95, 35, 0, Math.PI*2, false)
Ctx.fill ()
Ctx.beginPath ()
Ctx.fillStyle = 'rgb (128,100,162)'; / / Purple
Ctx.arc (95,95,35,0, Math.PI*2, false)
Ctx.fill ()
}
The effect is as follows:
Specify transparency
As in normal CSS, we can specify a color with an alpha value (but not much, and IE9 didn't support it before). Look at the code:
JavaScript
JavaScript Code copies content to the clipboard
Onload = function () {
Draw ()
}
Function draw () {
Var canvas = document.getElementById ('c1')
If (! Canvas | |! Canvas.getContext) {return false;}
Var ctx = canvas.getContext ('2d')
Ctx.beginPath ()
Ctx.fillStyle = 'rgba (192,80,77,0.7)'; / /
Ctx.arc (70, 45, 35, 0, Math.PI*2, false)
Ctx.fill ()
Ctx.beginPath ()
Ctx.fillStyle = 'rgba (155,187,89,0.7)'; / /
Ctx.arc (45, 95, 35, 0, Math.PI*2, false)
Ctx.fill ()
Ctx.beginPath ()
Ctx.fillStyle = 'rgba (128,100,162,0.7)'; / /
Ctx.arc (95,95,35,0, Math.PI*2, false)
Ctx.fill ()
}
The result is as follows:
And the above code is basically the same, just change rgb (r, g, b) into rgba (r, g, b, a), and the value of an is 0, which means completely transparent, and 1 is completely opaque (so the value of alpha is actually "opaque").
Global transparent globalAlpha
This is also a very simple attribute. The default value is 1.0, which means it is completely opaque. The range of values is 0.0 (fully transparent) ~ 1.0. This property is the same as the shadow setting, and if you don't want to set the opacity globally, you have to reset globalAlpha before the next time you paint.
To sum up: what are the state-based properties?
-- globalAlpha
-- globalCompositeOpeartion
-- strokeStyle
-- textAlign,textBaseline
-- lineCap,lineJoin,lineWidth,miterLimit
-- fillStyle
-- font
-- shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
Let's experience the magic of globalAlpha through a code.
JavaScript Code copies content to the clipboard
Global transparency
Body {background: url (". / images/bg3.jpg") repeat;}
# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}
I can't believe your browser doesn't support Canvasations! Hurry up and change it!
_ window.onload = function () {
Var canvas = document.getElementById ("canvas")
Canvas.width = 800,
Canvas.height = 600,
Var context = canvas.getContext ("2d")
Context.fillStyle = "# FFF"
Context.fillRect (0Pol 0800600)
Context.globalAlpha = 0.5
For (var item0; I
