JavaScript Canvas
•Transferir como PPTX, PDF•
0 gostou•93 visualizações
The document discusses the JavaScript Canvas API which allows drawing 2D and 3D graphics on HTML pages. It provides steps to get started with Canvas including creating a <canvas> element, getting the drawing context, and using methods like beginPath(), moveTo(), lineTo(), strokeWidth, and stroke() to draw lines on the canvas.
Recomendados
Mais conteúdo relacionado
Semelhante a JavaScript Canvas
Semelhante a JavaScript Canvas (20)
Mais de jagriti srivastava
Mais de jagriti srivastava (15)
Último
Último (20)
JavaScript Canvas
- 2. Intro.. Used to draw images Came with HTML5 to draw 2d and 3d graphics Used for games and visualization
- 3. How to start Must have concept of HTML and basic Javascript Steps to get started : 1. Create canvas element with attributes – ID, HEIGHT and WIDTH 2. Add Styles(*Optional) 3.Get canvas element using ID 4. Get Canvas Context (2D or 3D) 5. Draw using Context
- 4. Steps 1. Create Canvas // index.html <canvas id="myCanvas" width="800" height="1200"></canvas>
- 5. Step 2 and 3 Add Styles // styles.css body { background: #111; color: #f8f8f8; } #myCanvas { background: #f8f8f8; padding: 0; margin: 0 auto; margin-bottom: 1rem; display: block; }
- 6. Step 3 and 4 Get canvas using Id and canvas context var canvas = document.getElementById("myCanvas"); var ctext = canvas.getContext("2d");
- 7. Step 5 **Draw using context ** ctext.beginPath(); ctext.moveTo(150,10);//moveTo(x,y) - defines the starting point of the line ctext.lineTo(20, 100);//lineTo(x,y) - defines the ending point of the line ctext.lineWidth = 5; ctext.strokeStyle = "blue"; //color of the line ctext.stroke(); // to provide ink to the line
- 8. <!DOCTYPE HTML> <html> <head> <title> Canvas </title> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid red; } </style> <script> window.onload = function() { var canvas = document.getElementById("mCanvas"); var ctext = canvas.getContext("2d"); ctext.beginPath(); ctext.moveTo(150,10);//moveTo(x,y) ctext.lineTo(20, 100);//lineTo(x,y) ctext.lineWidth = 5; ctext.strokeStyle = "blue"; //color of the line ctext.stroke(); // to provide ink to the line }; </script> </head> <body> <canvas id="mCanvas" width="360" height="200"></canvas> </body> </html>
- 9. How to draw Set the style - 1)Begin Path 2)Use functions and Coordinates 3)Draw the path to screen