Draw Circle Using Canvas in Html5
This article will tell y'all how to use Html5 canvas and javascript to draw a rectangle and a circle.
ane. Use Html5 Canvass To Draw Rectangle Steps.
- Become the Html5 canvas object in javascript.
var rectCanvas = document.getElementById(id);
- Modify the canvas properties such as width, height, style, etc.
rectCanvas.width = windowWidth; rectCanvas.style.display = 'block';
- Get the 2d context object from the canvas object.
var ctx = rectCanvas.getContext('second'); - Set the rectangle fill color.
ctx.fillStyle = "yellowish";
- Clear the rectangle in the canvass.
ctx.clearRect(rectX, rectY, rectWidth, rectHeight);
- Fill the rectangle in the sheet with the specified color.
ctx.fillRect(rectX, rectY, rectWidth, rectHeight)
- Set the stroke rectangle border color.
ctx.strokeStyle = "blue";
- Set the stroke rectangle border line width.
ctx.lineWidth = strokeBorderLineWidth;
- Draw the stroke rectangle with the provided border colour and line width.
ctx.strokeRect(rectX, rectY, rectWidth, rectHeight)
- Beneath is the example rectangle image.
2. Use Html5 Canvass To Depict Circle Steps.
- Get the Html5 canvas object past id.
var circleCanvas = certificate.getElementById(id);
- Modify the sail object attributes.
circleCanvas.width = window.innerWidth; circleCanvas.height = window.innerHeight; circleCanvas.style.display = "cake";
- Get the canvass 2d context object.
var ctx = circleCanvas.getContext('2nd'); - Telephone call the context object's beginPath() method to create the path.
ctx.beginPath();
- Depict the radians or circle using the context object'due south arc() method.
ctx.arc(circleCenterX, circleCenterY, circleRadius, startAngle, endAngle, true);
- Shut path by invoking the context object's closePath() method.
ctx.closePath();
- Set the circle color.
ctx.fillStyle = "red";
- Fill the circle with the in a higher place color.
ctx.fill();
- Set the stroke circle border color.
ctx.strokeStyle = "green";
- Gear up the stroke circle border line width.
ctx.lineWidth = 10;
- Draw the stroke circumvolve.
ctx.stroke();
- Below is the circle epitome.
- There is also some other example that shows how to draw multiple circles using Html5 sail, below is the instance image.
three. Html5 Use Canvas To Depict Rectangle & Circle Examples.
- The case demo video URL is https://youtu.be/PbOhUrss1QE.
- This example contains two files html5-canvas-draw-rectangle-circumvolve.html, html5-sheet-depict-rectangle-circle.js.
- On the Html file's onload upshot, it volition phone call the initialize_canvas() method to hibernate all the Html5 canvas on the web page.
- When you lot click the Draw push, it volition draw a rectangle or circle beneath the button, and the button's text will be inverse to Remove. When you click the Remove push button, it will hide the rectangle or circle canvas.
- html5-canvas-depict-rectangle-circumvolve.html.
<!DOCTYPE html> <html> <caput> <meta charset="ISO-8859-i"> <title>How To Use Html5 Canvas To Draw Rectangle And Circle</title> <script blazon="text/javascript" src="html5-canvas-draw-rectangle-circle.js" charset="utf-eight"></script> <style> canvass{ brandish:block; } </style> </caput> <body onload="initialize_canvas()"> <h3>Example Of Describe Rectangle Employ Html5 Sail.</h3> <div> <input type="button" id="draw-rectangle-button" value="Describe Rectangle" onclick="drawRectangle('rectangle-sail', this)" /> <canvas id="rectangle-canvas"></canvas> </div> <h3>Case Of Draw Circle Apply Html5 Canvas.</h3> <div> <input type="push button" id="draw-circle-button" value="Draw Circle" onclick="drawCircle('circle-canvas', this)" /> <canvas id="circle-sheet"></canvas> </div> <h3>Example Of Draw Multiple Circles Employ Html5 Canvas.</h3> <div> <input type="button" id="draw-multiple-circles-button" value="Draw Multiple Circles" onclick="drawMultipleCircles('multiple-circles-canvas', this)" /> <canvass id="multiple-circles-canvas"></canvass> </div> </trunk> </html> - html5-canvas-describe-rectangle-circumvolve.js.
/** * */ // Initialize all the Html canvas objects on the Html page. function initialize_canvas(){ // Become all the sail object list. canvasList = document.getElementsByTagName('canvas'); // Get the canvas object list length. length = canvasList.length; // Loop all the canvas objects in the listing. for(var i=0; i < length; i++){ // Get each cnavas object. canvasObj = canvasList[i]; // Hibernate the canvas object by setting it's display way attribute to 'none'. canvasObj.style.display = 'none'; } } /* This office demo how to describe a rectangle using canvas. */ function drawRectangle(id, src){ /* Calculate the destination rectangle object left, top, width, acme values. */ // The rectangle width and height per centum number of the window's width and height. rectSizePercentage = 0.3; // Become the web browser window's width, tiptop value. windowWidth = window.innerWidth; windowHeight = window.innerHeight; // Set the stroke border line width. strokeBorderLineWidth = 10; // Get the rectangle left, tiptop coordinate value. rectX = strokeBorderLineWidth; rectY = strokeBorderLineWidth; // Calculate the rectangle width and superlative value. rectWidth = parseInt(windowWidth*rectSizePercentage); rectHeight = parseInt(windowHeight*rectSizePercentage); // Go the Html5 Sheet object. var rectCanvas = certificate.getElementById(id); // If not establish the Canvas object and then render false. if(rectCanvas==zippo){ render false; } // Become the canvass display fashion value. canvasDisplay = rectCanvas.mode.display; if(canvasDisplay == 'none'){ src.value = "Remove Rectangle"; // You should starting time modify the Sail object attributes such equally width, height, style. // Then you can call the canvasObject.getContext('2nd') to become the Sail context object. // If you alter the Canvas object'south attributes after you get the Canvas object'southward context, // then you lot will find the change does not take effect. rectCanvas.width = windowWidth; rectCanvas.height = windowHeight*(rectSizePercentage + 0.05); // Set the canvass object's brandish style to 'block' to display it. rectCanvas.fashion.display = 'block'; // Get the Sail context object after change it's attributes. var ctx = rectCanvas.getContext('2nd'); // Then you can modify the context aspect. ctx.fillStyle = "yellow"; // You should articulate canvas after y'all modify it's size to avoid draw black color canvas issue. ctx.clearRect(rectX, rectY, rectWidth, rectHeight); // Describe the rectangle and fill the color. ctx.fillRect(rectX, rectY, rectWidth, rectHeight) // Set the stroke rectangle ( rectamgle without fill up color and only has a border ) manner color. ctx.strokeStyle = "blue"; // Set the stroke rectangle border line width. ctx.lineWidth = strokeBorderLineWidth; // Draw the stoke rectangle. ctx.strokeRect(rectX, rectY, rectWidth, rectHeight) console.log('window.innerWidth = ' + window.innerWidth); panel.log('window.innerHeight = ' + window.innerHeight); console.log('rectX = ' + rectX); console.log('rectY = ' + rectY); console.log('rectWidth = ' + rectWidth); console.log('rectHeight = ' + rectHeight); }else if(canvasDisplay == 'block'){ src.value = "Describe Rectangle"; rectCanvas.style.display = 'none'; } } /* This office demo how to draw a circle using canvass. */ role drawCircle(id, src){ // Get the Html5 Canvas object. var circleCanvas = certificate.getElementById(id); // If not constitute the Canvas object then return false. if(circleCanvas==null){ render simulated; } // Get the canvas brandish way value. canvasDisplay = circleCanvas.style.display; if(canvasDisplay == 'none'){ circleCanvas.width = window.innerWidth; circleCanvas.height = window.innerHeight*0.three; circleCanvas.style.brandish = "cake"; src.value = "Remove Circle"; // Get the Canvas context object subsequently modify it's attributes. var ctx = circleCanvas.getContext('2d'); // Call the context object's beginPath() method to create the path. ctx.beginPath(); // Define the circle center point coordinates. circleCenterX = 100; circleCenterY = 100; circleRadius = 90; startAngle = 0; endAngle = Math.PI * ii; // Draw the radians or circle using the context object's arc() method. ctx.arc(circleCenterX, circleCenterY, circleRadius, startAngle, endAngle, truthful); // Shut path past invoking the context object'due south closePath() method. ctx.closePath(); // Set the circle colour. ctx.fillStyle = "red"; // Fill the circle with the above color. ctx.fill up(); // Fix the stroke circumvolve border colour. ctx.strokeStyle = "green"; // Set the stroke circle border line width. ctx.lineWidth = 10; // Depict the stroke circle. ctx.stroke(); }else if(canvasDisplay == 'block'){ src.value = "Describe Circle"; circleCanvas.way.display = 'none'; } } /* This function demo how to draw multiple circles using sheet. */ function drawMultipleCircles(id, src){ // Get the canvas object beginning. var canvass = certificate.getElementById(id); if(sheet==null){ return false; } // Go the sheet brandish manner value. canvasDisplay = canvas.way.brandish; if(canvasDisplay == 'none'){ sheet.width = window.innerWidth*0.v; sheet.superlative = window.innerHeight*0.5; canvas.style.brandish = "cake"; src.value = "Remove Multiple Circles"; // Get the Canvas context object after modify it's attributes. var ctx = sheet.getContext('2nd'); ctx.fillStyle = "bluish"; ctx.fillRect(0, 0, canvass.width, canvas.height); for(var i=0;i<10;i++) { // Call the context object'south beginPath() method to create the path. ctx.beginPath(); // Define the circle center point coordinates. circleCenterX = i*25; circleCenterY = i*25; circleRadius = i*10; startAngle = 0; endAngle = Math.PI * ii; // Draw the radians or circle using the context object'due 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 circle colour. ctx.fillStyle = "xanthous"; // Make full the circle with the above colour. ctx.fill(); } }else if(canvasDisplay == 'block'){ src.value = "Draw Multiple Circles"; sheet.style.display = 'none'; } }
Source: https://www.dev2qa.com/how-to-use-html5-canvas-to-draw-rectangle-and-circle/
0 Response to "Draw Circle Using Canvas in Html5"
Postar um comentário