文档介绍：The CanvasCreating Graphics for the Web Doncho MinkovTelerik Software Academy Technical Trainer of Contents?Overview and usage of the canvas?Drawing shapes?Rectangles, arcs and ellipses?Lines, paths and Bézier curves?Per-pixel manipulationsTable of Contents (2)?Canvas styles?fillColor and strokeColor?Gradients, patterns and shadows?Transformations?Save and restore context state?TranslateThe CanvasThe Canvas?The Canvas is the way to draw in the browser?Uses JavaScript for the drawing?Enables high-performance drawing?The Canvas is part of the HTML5 specification?Supported in most browsers?Both desktop and mobileUsing the Canvas?The Canvas is a rectangular sheet?All the drawing is done inside this sheet?The canvas consists of:?<canvas> HTML element?JavaScript API for the drawing<canvas id="the-canvas" width="100" height="100" />var canvas = ("the-canvas");varcanvasCtx = ("2d");(10, 10, 30, 30);Set width and heightThe Canvas Context?The canvas HTML element provides many ways for drawing?Rectangular 2d drawing?3d drawing?WebGL drawing?HTML5 provides APIs for all these types of drawing?The way to use a specific canvas API is to get the corresponding contextUsing the CanvasLive DemoDrawing ShapesCanvas Shapes?The Canvas provides ways to draw all kinds of shapes?Rects, arcs, ellipses, lines, etc…?Each of these shapes can be either?Drawn in full color (. filled)?Drawn only their border (. stroked)var canvas = ("the-canvas");varcanvasCtx = ("2d");(10, 10, 25, 25);(10, 10, 25, 25);