Shulou(Shulou.com)06/01 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.