Square div with javascript

Drawing Basic Shapes with HTML Canvas

Since HTML canvas is a graphic tool, it goes without saying that it allows us to draw shapes. We can draw new shapes using a number of different functions available to use via the the context we set. If you’re brand new to HTML canvas, start with my introduction article. In this guide, we’ll cover how to make some of the most basic shapes with HTML canvas — squares, rectangles, circles and triangles.

Creating Rectangles and Squares with HTML Canvas

• rect(x, y, width, height) — outlines where a rectangle or square should be, but does not fill it.
• fillRect(x, y, width, height) — creates a rectangle and immediately fills it.
• strokeRect(x, y, width, height) — creates a rectangle and immediately outlines it with a stroke. As you can see, all of these functions follow the same format — they have an x and y coordinate for where they start, and a width and height within the canvas.

Let’s look at some examples in code.

Clear Rectangle Function

If you want to learn about clearRect, read my tutorial on that here.

Using rect() to create a rectangle

If we want to use rect() to create a rectangle, and then fill and stroke it, we need to define the fillStyle and strokeStyle. For example, the below code will create a rectangle starting at (10, 10), of dimensions 100×150, with a #b668ff background, and 5px wide white stroke:

let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 150); ctx.fillStyle = '#b668ff'; ctx.strokeStyle = 'white'; ctx.lineWidth = 5; ctx.fill(); ctx.stroke(); 

Using fillRect() to create a rectangle

fillRect lets us create a rectangle and automatically fill it with a specific color. That means we don’t have to use fill() separately.

For example, the following will fill a rectangle of the same size as before, with a #b668ff background:

let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.fillStyle = '#b668ff'; ctx.fillRect(10, 10, 100, 150); 

Using strokeRect() to create a rectangle

strokeRect() follows a similar format, only it will create a rectangle which is stroked automatically. For example, the below code will make a rectangle of the same dimensions and position as before, with a 5px wide #b668ff border/stroke:

let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.strokeStyle = '#b668ff'; ctx.lineWidth = 5; ctx.strokeRect(10, 10, 100, 150); 

Creating Circles in HTML Canvas

The easiest way to create a circle in HTML Canvas is to use the arc function. An arc doesn’t have to draw a full circle, though — it can draw only part of a circle by changing the start and end angles. Let’s look at the syntax of ctx.arc, and how to make a circle.

ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise?)

• x — refers to the x coordinate of the center of the circle.
• y — refers to the y coordinate of the center of the circle.
• radius — the radius of the arc we are drawing.
• startAngle — the angle at which the arc starts (in radians).
• endAngle — the angle at which the arc ends (in radians).
• counterClockwise — whether the angle goes counter clockwise (default is false, can be set to true).

If we set our startAngle to 0 Radians , it will start at the center right side of the circle. A circle is 2π radians in diameter. If we want to draw a full circle, our startAngle is 0 , and our endAngle is 2π .

We can represent this in code using Math.PI * 2 . Here is our code to draw a circle, with a 4px wide stroke in #b668ff, with a radius of 90px , where its center point is (100, 100):

let canvas = document.getElementById('canvas4'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 100, 0, Math.PI * 2, false); ctx.strokeStyle = '#b668ff'; ctx.lineWidth = 4; ctx.stroke(); 

Creating Semi-Circles with HTML Canvas

Since we can use arc to draw circles and adjust our endAngle, we can also use it to draw a semi-circle. As a full circle is 2π in diameter, a semi-circle is only 1π radians. The only extra step we have to do here is draw a line from the end of our semi-circle, back to the beginning again.

Since we are going to end at (10, 100) — as our radius is 90px, we draw a line with the lineTo function back to our starting point, which is (190, 100).

let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 90, 0, Math.PI * 1, false); ctx.lineTo(190, 100); ctx.fillStyle = '#b668ff'; ctx.fill(); 

We can flip our semi-circle by changing the counter clockwise option to true:

ctx.arc(100, 100, 90, 0, Math.PI * 1, true); 

Creating Ovals with HTML Canvas

We can draw an oval in HTML5 canvas by using the ellipse() function. It works in a very similar way to arc(), except we have two radius options.

ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise?)

• x — refers to the x coordinate of the center of the circle.
• y — refers to the y coordinate of the center of the circle.
• radiusX — the radius along the X axis of the arc we are drawing.
• radiusY — the radius along the Y axis of the arc we are drawing.
• rotation — how much we wish to rotate our ellipse shape, in radians.
• startAngle — the angle at which the arc starts (in radians).
• endAngle — the angle at which the arc ends (in radians).
• counterClockwise — whether the angle goes counter clockwise (default is false, can be set to true).

Here is an example, using the same concepts as we did before with arc() :

let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.ellipse(100, 60, 90, 60, 0, 0, Math.PI * 2, false); ctx.fillStyle = '#b668ff'; ctx.fill(); 

Creating Triangle Shapes with HTML Canvas

There is no built in triangle function in Javascript, so we have to use the lineTo and moveTo function instead. All these functions do are draw lines on the context, to specific points.

We use moveTo to determine the starting position of our triangle, and then draw lines as appropriate to draw the shape of the triangle we want. Here is an example where we draw a triangle and fill it with #b668ff.

let canvas = document.getElementById('canvas8'); let ctx = canvas.getContext('2d'); ctx.moveTo(20, 0); ctx.lineTo(40, 30); ctx.lineTo(0, 30); ctx.lineTo(20, 0); ctx.fillStyle = '#b668ff'; ctx.fill(); 

1. We start by using moveTo to determine the starting point of our triangle.
2. Then, we draw a line from (20, 0) to (40, 30) — i.e. 20px to the right, and 30px down from our starting point.
3. Since this triangle will be symmetrical, we draw a 20px to the left, and 30px down, i.e. (0, 30).
4. Finally, we join our shape up by drawing a line back to our starting point, which was (20, 0).
5. Then we fill it, and we have a triangle.

The lineTo() function can be used to draw many more complicated shapes in HTML Canvas, which are not built in by default. Any custom polygons will use lineTo , such as Hexagons, Octagons, or even Parallelograms.

Conclusion

In this guide, we’ve covered how to make some simple shapes in HTML canvas: squares, rectangles, circles and triangles. We’ve also touched upon the fact that lineTo can be used to draw a line anywhere on our canvas, allowing us to make more complicated shapes like hexagons and octagons. I hope you’ve enjoyed this article.

Источник

Draw square in div with js and css

rotates the square to degrees (Note that the parameter is in radians, not degrees) draws the square restores the last state of the coordinate system. js draw square to canvas how to make a rectangle in javascript Solution: You are rotating the whole canvas when you use , and since the pivot point is defaulted at the coordinates (0, 0), your square sometimes will be drawn out of bounds.

Draw square in div with js and css

// canvas context.fillRect(x, y, height, width); ctx.fillRect(20, 20, 150, 100);

const canvas = document.getElementById('pong') // first make a index . html with a canvas height and width and id of pong or whatever // and then we have to get access to our context to draw on it const context = canvas.getContext('2d') // then you do. context.drawRect(20, 20, 150, 150); context.fillStyle = '#fff' // thats white!!

Html — How to draw shape div with css?, How to draw shape div with css? Ask Question Asked 11 months ago. Modified 11 months ago. Viewed 94 times -2 I need to draw shapes as shown here in the image. All what I need is this example. In top I want to set text, bottom input , but I don’t have idea how to shape this ? Using only css html ? Maybe any css …

Draw square and rotate it?

You are rotating the whole canvas when you use context.rotate , and since the pivot point is defaulted at the coordinates (0, 0), your square sometimes will be drawn out of bounds.

By moving the pivot point to the middle of the square, you can then rotate it successfully.

Note : Make sure you rotate the canvas before you draw the square.

// pivot point coordinates = the center of the square var cx = 130; // (60+200)/2 var cy = 130; // (60+200)/2 // Note that the x and y values of the square // are relative to the pivot point. var x = -70; // cx + x = 130 - 70 = 60 var y = -70; // cy + y = 130 - 70 = 60 var w = 140; // (cx + x) + w = 60 + w = 200 var h = 140; // (cy + y) + h = 60 + h = 200 var deg = 45; context.save(); context.translate(cx, cy); context.rotate(deg * Math.PI/180); context.fillRect(x, y, w, h); context.restore(); 

• context.save(); saves the current state of the coordinate system.
• context.translate(cx, cy); moves the pivot point.
• context.rotate(deg * Math.PI/180); rotates the square to deg degrees (Note that the parameter is in radians, not degrees)
• context.fillRect( x, y, w, h ); draws the square
• context.restore(); restores the last state of the coordinate system.

Here is a JS Fiddle example.

Here is another JS Fiddle example that features a HTML5 slider.

HTML Div – What is a Div Tag and How to Style it with CSS, To make a square with div tag, you first need to define an empty div tag and attach a class attribute to it in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it.

Is it possible to draw diagrams using html, css and js

A small demo to get started, but don’t expect to get everything from this site. Explore for yourself:

You have to modify the left and width properties to manipulate the diagram.

This is just the layout; CSS, images and other stuff you have to discover.

Html — Make a div a square in CSS, In your CSS you specified the style. #box .small This style is applied to an element within #box that has the class «small» — for example like this:

Источник

jQuery Square div with width based on percentage height

The following tutorial shows you how to do «jQuery Square div with width based on percentage height».

The result is illustrated in the iframe.

You can check the full source code and open it in another tab using the links.

Javascript Source Code

The Javascript source code to do «jQuery Square div with width based on percentage height» is

$(document).ready(function() < var width = ( $(window).width() / 100) * 10 ; $('.onexone').width(width); $('.onexone').height(width); $(window).resize(function()< var width = ( $(window).width() / 100) * 10 ; >); >);

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > style id="compiled-css" type="text/css"> .onexone!-- w w w . d e mo 2 s . c o m --> < width: 50%; /* Just for looks: */ background-color: cornflowerblue; margin: 25px; >  body> div >"onexone">  script type='text/javascript'> $(document).ready(function() < var width = ( $(window).width() / 100) * 10 ; $('.onexone').width(width); $('.onexone').height(width); $(window).resize(function()< var width = ( $(window).width() / 100) * 10 ; >); >);   

Related

• jQuery split content with jquery and
  

  ---

  tag and put it to another div (Demo 2)

• jQuery Split HTML in divs with Javascript/JQuery based on HR tags
• jQuery Split HTML in divs with Javascript/JQuery based on HR tags (Demo 2)
• jQuery Square div with width based on percentage height
• jQuery Subtract percentage of scrollTop from div’s width on scroll
• jQuery Subtract percentage of scrollTop from div’s width on scroll (Demo 2)
• jQuery switch div tags using javascript doesnt work in xhtml strict

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник