- HTML5 Canvas Cookbook
- Eric Rowell
- 191字
- 2021-08-27 12:08:07
Drawing transparent shapes
For applications that require shape layering, it's often desirable to work with transparencies. In this recipe, we will learn how to set shape transparencies using the global alpha composite.
How to do it...
Follow these steps to draw a transparent circle on top of an opaque square:
- Define a 2D canvas context:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); - Draw a rectangle:
// draw rectangle context.beginPath(); context.rect(240, 30, 130, 130); context.fillStyle = "blue"; context.fill(); - Set the global alpha of the canvas using the
globalAlphaproperty and draw a circle:// draw circle context.globalAlpha = 0.5; // set global alpha context.beginPath(); context.arc(359, 150, 70, 0, 2 * Math.PI, false); context.fillStyle = "red"; context.fill(); }; - Embed the canvas tag inside the body of the HTML document:
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> </canvas>
How it works...
To set the opacity of a shape using the HTML5 canvas API, we can use the globalAlpha property:
context.globalAlpha=[value]
The globalAlpha property accepts any real number between 0 and 1. We can set the globalAlpha property to 1 to make shapes fully opaque, and we can set the globalAlpha property to 0 to make shapes fully transparent.