HTML Canvas Graphics - Dofactory
Có thể bạn quan tâm
A canvas in HTML is an area where graphics can be drawn with Javascript.
The <canvas> tag creates the graphic container.
JavaScript then draws paths, shapes, text, images, etc. inside this container.
Example
#
A <canvas> element with JavaScript drawing code.
<canvas id="can-id" width="120" height="120"></canvas> <script> ( () => { let canvas = document.getElementById("can-id"); let context = canvas.getContext("2d"); context.fillStyle = "orangered"; context.fillRect(10, 10, 100, 100); context.fillStyle = "purple"; context.fillRect(30, 30, 60, 60); } )(); </script> Try it liveUsing canvas
#
The <canvas> tag creates a graphics container of a given width and height.
JavaScript draws shapes, such as lines, circles, text, and images inside the container.
Canvas supports advanced drawing functions including shapes, clipping, transformations, and more.
Drawing a line with Canvas
#
Using moveto, lineto, and stroke functions to draw a diagonal line across the canvas.
<canvas id="canvas1" width="200" height="100" style="border:1px solid slategray;"> </canvas> <script> (() => { let canvas = document.getElementById("canvas1"); let context = canvas.getContext("2d"); context.moveTo(0, 0); context.lineTo(200, 100); context.stroke(); })(); </script> Try it liveDrawing a circle with Canvas
#
Using beginPath, arc, and stroke functions to draw a circle on the canvas.
<canvas id="canvas2" width="200" height="100" style="border:1px solid slategray;"> </canvas> <script> (() => { let canvas = document.getElementById("canvas2"); let context = canvas.getContext("2d"); context.beginPath(); context.arc(95, 50, 40, 0, 2 * Math.PI); context.stroke(); })(); </script> Try it liveDrawing text with Canvas
#
Using the fillText function to draw text on a canvas.
<canvas id="canvas3" width="200" height="100" style="border:1px solid slategray;"> </canvas> <script> (() => { let canvas = document.getElementById("canvas3"); let context = canvas.getContext("2d"); context.font = "28px Arial"; context.fillText("Hello Canvas", 10, 50); })(); </script> Try it liveDrawing stroke text with Canvas
#
Using the strokeText function to draw stroke text (i.e. vector-based text) on the canvas.
<canvas id="canvas4" width="200" height="100" style="border:1px solid slategray;"> </canvas> <script> (() => { let canvas = document.getElementById("canvas4"); let context = canvas.getContext("2d"); context.font = "28px Arial"; context.strokeText("Hello Canvas", 10, 50); })(); </script> Try it liveDrawing a linear gradient color with Canvas
#
This example fills a rectangle with a linear color gradient. JavaScript first creates a linear color gradient with createLinearGradient and addColorStop. This gradient it then used to fill and draw the rectangle with the fillRect function.
<canvas id="canvas5" width="200" height="100" style="border:1px solid slategray;"> </canvas> <script> (() => { let canvas = document.getElementById("canvas5"); let context = canvas.getContext("2d"); let gradient = context.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, "lightblue"); gradient.addColorStop(1, "white"); context.fillStyle = gradient; context.fillRect(10, 10, 150, 80); })(); </script> Try it liveDrawing a circular gradient color with Canvas
#
This example fills a rectangle with a circular color gradient. JavaScript first creates a circular color gradient with createCircularGradient and addColorStop. This gradient it then used to fill and draw the rectangle with the fillRect function.
<canvas id="canvas6" width="200" height="100" style="border:1px solid slategray;"> </canvas> <script> (() => { let canvas = document.getElementById("canvas6"); let context = canvas.getContext("2d"); let gradient = context.createRadialGradient(75, 50, 5, 90, 60, 100); gradient.addColorStop(0, "lightblue"); gradient.addColorStop(1, "white"); context.fillStyle = gradient; context.fillRect(10, 10, 150, 80); })(); </script> Try it liveDid you know?
#
Using canvas to create fast animations
Canvas is very fast, which allows you to create interesting animations. Below is an animation of the solar system created with <canvas>, CSS, and JavaScript. Try it live
Animation courtesy of www.mozilla.org.
Browser Support
#
Here is when <canvas> support started for each browser:
Chrome | 4.0 | Jan 2010 |
Firefox | 2.0 | Oct 2006 |
IE/Edge | 9.0 | Mar 2011 |
Opera | 9.0 | Jun 2006 |
Safari | 3.1 | Mar 2008 |
For details on <canvas>, see our HTML canvas Tag Reference.
You may also like
#
- Our HTML canvas Tag Reference
- Our HTML img Tag Reference
- Our HTML SVG Tutorial
- Our CSS Images Tutorial
Từ khóa » Html Canvas Graphics
-
HTML Canvas Graphics - W3Schools
-
HTML Canvas Drawing - W3Schools
-
Canvas Tutorial - Web APIs | MDN
-
The Graphics Canvas Element - HTML: HyperText Markup Language
-
How To Draw Graphics On HTML5 Canvas - Tutorial Republic
-
25 Ridiculously Impressive HTML5 Canvas Experiments
-
HTML Canvas Tutorial For Beginners - Simplilearn
-
Draw On HTML5 Canvas Using A Mouse - Stack Overflow
-
Drawing On Canvas - Eloquent JavaScript
-
Create Graphics With HTML Canvas
-
Learn HTML5 Canvas By Creating A Drawing App - YouTube
-
HTML5 Canvas Graphics And Animations - Udemy
-
Canvas - Dive Into HTML5