HTML5 Canvas
HTML5 Canvas
The HTML <canvas> element is used to draw graphics on a web page.
Canvas :- It is a rectangular area on an HTML page.
Example,
<canvas id = 'canvas1' width = '200px' height = '200px' style = 'border : 2px solid black;'></canvas>
Draw a rectangle
<html><head><title>HTML5 Canvas</title><head><body><canvas id = 'canvas1' width = '200px' height = '200px' style = 'border : 2px solid black;'></canvas><script>c1 = document.getElementById('canvas1');c1_x = c1.getContext('2d');c1_x.fillStyle = 'orange';c1_x.fillRect(50,100,200,100);</script></body></html>
Draw a line
<html><head><title>HTML5 Canvas</title><head><body><canvas id = 'canvas2' width = '200px' height = '200px' style = 'border : 2px solid black;' ></canvas><script>c2 = document.getElementById('canvas2');c2_x = c2_x.getContext('2d');c2_x.beginPath();c2_x.moveTo(50,50);c2_x.lineTo(150,100);c2_x.lineWidth = 5;c2_x.strokeStyle = 'blue';c2_x.stroke();</script></body></html>
Draw a Circle
<html><head><title>HTML5 Canvas</title><head><body><canvas id = 'canvas3' width = '200px' height = '200px' style = 'border : 2px solid black;' ></canvas><script>c3 = document.getElementById('canvas3');c3_x = c3.getContext('2d');c3_x.beginPath();c3_x.arc(100,100,50,0,2*Math.PI);c3_x.stroke();</script></body></html>
Draw a Quadratic Curve
<html><head><title>HTML5 Canvas</title><head><body><canvas id = 'canvas4' width = '200px' height = '200px' style = 'border : 2px solid black;' ></canvas><script>c4 = document.getElementById('canvas4');c4_x = c4.getContext('2d');c4_x.beginPath();c4_x.moveTo(50,100);c4_x.quadraticCurveTo(150,100,120,200);c4_x.stroke();</script></body></html>
Draw a Bezier Curve
<html><head><title>HTML5 Canvas</title><head><body><canvas id = 'canvas5' width = '200px' height = '200px' style = 'border : 2px solid black;' ></canvas><script>c5 = document.getElementById('canvas5');c5_x = c5.getContext('2d');c5_x.beginPath();c5_x.moveTo(50,150);c5_x.bezierCurveTo(50,150,100,180,150,100);c5_x.stroke();</script></body></html>
Example
<html><head><title>HTML5 Canvas</title><head><body><canvas id = 'canvas6' width = '400px' height = '400px' style = 'border : 2px solid black;' ></canvas><script>c6 = document.getElementById('canvas6');c6_x = c6.getContext('2d');c6_x.beginPath();c6_x.moveTo(30,300);c6_x.lineTo(50,100);c6_x.bezierCurveTo(150,50,200,100,150,180);c6_x.bezierCurveTo(250,150,300,200,250,280);c6_x.lineTo(30,300);c6_x.stroke();</script></body></html>
Worthful💯💯
ReplyDeleteAwesome����
ReplyDeleteShaaadaar ❤️💯
ReplyDelete