Javascript method for drawing circles and rectangles _ javascript skills

This article mainly introduces how to draw circles and rectangles in javascript. It involves operations related to javascript mouse events and page element styles and has some reference value, for more information about how to draw circles and rectangles in Javascript, see the example in this article. Share it with you for your reference. The details are as follows:

Here, JavaScript is used to draw circles and rectangles. the background color of the image can be selected. You can also set the rounded rectangle, radius, positive circle, rectangle, square options. Maybe you don't need these images, but the important thing is to let you learn how to draw them in JavaScript, which is the core of expression.

Shows the running effect:

The Code is as follows:

Js to draw circles and rectanglesScript function $ Id (id) {return document. getElementById (id);} window. onload = function () {var oCanvas = $ Id ('canvas '); var oRoud = $ Id ('roud'); var oRadius = $ Id ('radius '); var oCir = $ Id ('circle'); var oSqu = $ Id ('squ'); var oColors = $ Id ('color'); var aColors = oColors. getElementsByTagName ('lil'); var color = 'red'; var aInputs = document. getElementsByTagName ('input'); var xz = 'roud '; var arr = []; for (var I = 0; ioCanvas. offsetLeft + oCanvas. offsetWidth) {x = oCanvas. offsetLeft + oCanvas. offsetWidth} if (y
 
  
OCanvas. offsetTop + oCanvas. offsetHeight) {y = oCanvas. offsetTop + oCanvas. offsetHeight} oR. style. width = Math. abs (x-disX) + 'px '; oR. style. top = Math. min (disY, y) + 'px'; oR. style. left = Math. min (disX, x) + 'px'; switch (xz) {case 'roud ': oR. style. height = Math. abs (y-disY) + 'px'; oR. style. borderRadius = oRadius. value + 'px '; break; case 'circle': oR. style. height = Math. min (Math. abs (x-disX), Math. abs (y-disY) + 'px '; oR. style. width = Math. min (Math. abs (x-disX), Math. abs (y-disY) + 'px '; oR. style. borderRadius = (Math. min (Math. abs (x-disX), Math. abs (y-disY)/2 + 'px '; break; case 'squ': oR. style. height = Math. abs (y-disY) + 'px '; break; case 'square': oR. style. height = Math. min (Math. abs (x-disX), Math. abs (y-disY) + 'px '; oR. style. width = Math. min (Math. abs (x-disX), Math. abs (y-disY) + 'px ';} document. onmouseup = function () {document. onmousemove = null; document. onmouseout = null; if (oCanvas. releaseCapture) {oCanvas. releaseCapture () ;}} return false ;}} script 
  
Select a color
  
 
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
 
  
 
 
  
  Rounded rectangleRadius  Positive circleRectangleSquare
 
  
 
  
 
 

I hope this article will help you design javascript programs.