Draw a Circle Using Html5
This article will tell y'all how to use Html5 canvas and javascript to draw a rectangle and a circumvolve.
1. Use Html5 Canvas To Depict Rectangle Steps.
- Get the Html5 canvas object in javascript.
var rectCanvas = certificate.getElementById(id);
- Modify the sail properties such every bit width, height, style, etc.
rectCanvas.width = windowWidth; rectCanvas.style.brandish = 'block';
- Become the 2d context object from the canvas object.
var ctx = rectCanvas.getContext('2d'); - Gear up the rectangle fill color.
ctx.fillStyle = "yellowish";
- Clear the rectangle in the canvas.
ctx.clearRect(rectX, rectY, rectWidth, rectHeight);
- Fill the rectangle in the canvass with the specified color.
ctx.fillRect(rectX, rectY, rectWidth, rectHeight)
- Set the stroke rectangle edge colour.
ctx.strokeStyle = "bluish";
- Set the stroke rectangle border line width.
ctx.lineWidth = strokeBorderLineWidth;
- Draw the stroke rectangle with the provided edge color and line width.
ctx.strokeRect(rectX, rectY, rectWidth, rectHeight)
- Below is the example rectangle image.
2. Employ Html5 Canvas To Draw Circumvolve Steps.
- Become the Html5 sheet object by id.
var circleCanvas = document.getElementById(id);
- Modify the canvas object attributes.
circleCanvas.width = window.innerWidth; circleCanvas.height = window.innerHeight; circleCanvas.style.display = "block";
- Get the canvas 2d context object.
var ctx = circleCanvas.getContext('2d'); - Call the context object's beginPath() method to create the path.
ctx.beginPath();
- Describe the radians or circumvolve using the context object's arc() method.
ctx.arc(circleCenterX, circleCenterY, circleRadius, startAngle, endAngle, true);
- Close path by invoking the context object'due south closePath() method.
ctx.closePath();
- Set the circle colour.
ctx.fillStyle = "cherry";
- Make full the circle with the above color.
ctx.fill();
- Set the stroke circle border colour.
ctx.strokeStyle = "green";
- Set up the stroke circumvolve edge line width.
ctx.lineWidth = 10;
- Draw the stroke circle.
ctx.stroke();
- Below is the circle epitome.
- There is also another example that shows how to draw multiple circles using Html5 canvas, below is the case prototype.
three. Html5 Use Canvas To Draw Rectangle & Circle Examples.
- The example demo video URL is https://youtu.exist/PbOhUrss1QE.
- This example contains 2 files html5-sail-draw-rectangle-circumvolve.html, html5-canvass-draw-rectangle-circle.js.
- On the Html file's onload result, it will call the initialize_canvas() method to hibernate all the Html5 canvass on the web page.
- When y'all click the Draw button, it will draw a rectangle or circle beneath the push, and the button'south text will be changed to Remove. When you click the Remove button, it will hide the rectangle or circumvolve canvas.
- html5-canvas-draw-rectangle-circle.html.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-one"> <title>How To Use Html5 Canvas To Depict Rectangle And Circle</championship> <script type="text/javascript" src="html5-canvas-draw-rectangle-circumvolve.js" charset="utf-8"></script> <style> canvas{ display:cake; } </way> </head> <body onload="initialize_canvas()"> <h3>Example Of Draw Rectangle Use Html5 Canvas.</h3> <div> <input type="button" id="draw-rectangle-push button" value="Depict Rectangle" onclick="drawRectangle('rectangle-canvass', this)" /> <sheet id="rectangle-sheet"></canvas> </div> <h3>Instance Of Draw Circumvolve Apply Html5 Canvas.</h3> <div> <input blazon="push button" id="describe-circle-button" value="Draw Circumvolve" onclick="drawCircle('circumvolve-canvas', this)" /> <canvass id="circle-canvass"></canvas> </div> <h3>Case Of Describe Multiple Circles Use Html5 Sheet.</h3> <div> <input blazon="push" id="draw-multiple-circles-button" value="Describe Multiple Circles" onclick="drawMultipleCircles('multiple-circles-canvas', this)" /> <canvas id="multiple-circles-canvas"></canvas> </div> </body> </html> - html5-canvas-draw-rectangle-circle.js.
/** * */ // Initialize all the Html canvas objects on the Html page. function initialize_canvas(){ // Get all the sail object listing. canvasList = document.getElementsByTagName('canvas'); // Get the canvass object listing length. length = canvasList.length; // Loop all the canvas objects in the list. for(var i=0; i < length; i++){ // Get each cnavas object. canvasObj = canvasList[i]; // Hide the sail object by setting it'due south display style aspect to 'none'. canvasObj.fashion.display = 'none'; } } /* This function demo how to describe a rectangle using canvas. */ function drawRectangle(id, src){ /* Calculate the destination rectangle object left, top, width, pinnacle values. */ // The rectangle width and height percent number of the window'southward width and superlative. rectSizePercentage = 0.3; // Get the spider web browser window's width, height value. windowWidth = window.innerWidth; windowHeight = window.innerHeight; // Set the stroke border line width. strokeBorderLineWidth = 10; // Get the rectangle left, top coordinate value. rectX = strokeBorderLineWidth; rectY = strokeBorderLineWidth; // Calculate the rectangle width and meridian value. rectWidth = parseInt(windowWidth*rectSizePercentage); rectHeight = parseInt(windowHeight*rectSizePercentage); // Get the Html5 Canvas object. var rectCanvas = document.getElementById(id); // If not establish the Canvass object and so render false. if(rectCanvas==null){ return false; } // Get the canvas brandish style value. canvasDisplay = rectCanvas.style.display; if(canvasDisplay == 'none'){ src.value = "Remove Rectangle"; // Yous should starting time modify the Canvas object attributes such as width, pinnacle, manner. // Then you tin phone call the canvasObject.getContext('2d') to get the Canvass context object. // If y'all modify the Canvas object's attributes after you lot go the Sail object's context, // so you will discover the change does not take effect. rectCanvas.width = windowWidth; rectCanvas.height = windowHeight*(rectSizePercentage + 0.05); // Fix the canvas object's display way to 'block' to brandish it. rectCanvas.style.display = 'block'; // Become the Canvass context object after modify it's attributes. var ctx = rectCanvas.getContext('2nd'); // Then you can modify the context attribute. ctx.fillStyle = "yellowish"; // Yous should clear canvas afterward you lot change information technology's size to avoid draw black colour sail issue. ctx.clearRect(rectX, rectY, rectWidth, rectHeight); // Draw the rectangle and fill the color. ctx.fillRect(rectX, rectY, rectWidth, rectHeight) // Set the stroke rectangle ( rectamgle without fill color and only has a border ) style color. ctx.strokeStyle = "blue"; // Set the stroke rectangle border line width. ctx.lineWidth = strokeBorderLineWidth; // Depict the stoke rectangle. ctx.strokeRect(rectX, rectY, rectWidth, rectHeight) panel.log('window.innerWidth = ' + window.innerWidth); console.log('window.innerHeight = ' + window.innerHeight); console.log('rectX = ' + rectX); panel.log('rectY = ' + rectY); console.log('rectWidth = ' + rectWidth); console.log('rectHeight = ' + rectHeight); }else if(canvasDisplay == 'block'){ src.value = "Depict Rectangle"; rectCanvas.way.display = 'none'; } } /* This function demo how to draw a circumvolve using canvas. */ function drawCircle(id, src){ // Get the Html5 Canvass object. var circleCanvas = document.getElementById(id); // If not plant the Canvas object and so return false. if(circleCanvas==null){ return false; } // Get the canvass display manner value. canvasDisplay = circleCanvas.style.display; if(canvasDisplay == 'none'){ circleCanvas.width = window.innerWidth; circleCanvas.superlative = window.innerHeight*0.3; circleCanvas.style.display = "block"; src.value = "Remove Circle"; // Get the Canvas context object after change it'due south attributes. var ctx = circleCanvas.getContext('2d'); // Call the context object's beginPath() method to create the path. ctx.beginPath(); // Ascertain the circumvolve centre point coordinates. circleCenterX = 100; circleCenterY = 100; circleRadius = 90; startAngle = 0; endAngle = Math.PI * 2; // Draw the radians or circle using the context object'south arc() method. ctx.arc(circleCenterX, circleCenterY, circleRadius, startAngle, endAngle, true); // Shut path past invoking the context object'south closePath() method. ctx.closePath(); // Set the circle color. ctx.fillStyle = "red"; // Fill the circle with the above color. ctx.make full(); // Set the stroke circle edge color. ctx.strokeStyle = "green"; // Set up the stroke circumvolve border line width. ctx.lineWidth = ten; // Draw the stroke circumvolve. ctx.stroke(); }else if(canvasDisplay == 'block'){ src.value = "Describe Circle"; circleCanvas.style.brandish = 'none'; } } /* This function demo how to draw multiple circles using canvas. */ function drawMultipleCircles(id, src){ // Get the canvas object start. var canvas = document.getElementById(id); if(canvass==null){ return false; } // Get the canvass display mode value. canvasDisplay = canvas.fashion.display; if(canvasDisplay == 'none'){ sail.width = window.innerWidth*0.5; sail.tiptop = window.innerHeight*0.v; canvas.manner.brandish = "cake"; src.value = "Remove Multiple Circles"; // Become the Canvas context object after modify it's attributes. var ctx = canvas.getContext('2d'); ctx.fillStyle = "blueish"; ctx.fillRect(0, 0, canvas.width, canvas.height); for(var i=0;i<x;i++) { // Phone call the context object'south beginPath() method to create the path. ctx.beginPath(); // Define the circumvolve center point coordinates. circleCenterX = i*25; circleCenterY = i*25; circleRadius = i*10; startAngle = 0; endAngle = Math.PI * 2; // Draw the radians or circumvolve using the context object'south arc() method. ctx.arc(circleCenterX, circleCenterY, circleRadius, startAngle, endAngle, true); // Close path by invoking the context object's closePath() method. ctx.closePath(); // Prepare the circumvolve color. ctx.fillStyle = "yellow"; // Fill the circle with the to a higher place color. ctx.fill(); } }else if(canvasDisplay == 'block'){ src.value = "Depict Multiple Circles"; canvas.style.display = 'none'; } }
Source: https://www.dev2qa.com/how-to-use-html5-canvas-to-draw-rectangle-and-circle/
0 Response to "Draw a Circle Using Html5"
Post a Comment