Cómo dibujar un círculo en el código web de la pantalla

JavaScript es un lenguaje de secuencias de comandos literal que es un lenguaje de tipo dinámico, de tipo débil y basado en prototipos con soporte integrado para tipos. Su intérprete, llamado motor JavaScript, es parte del navegador y se usa ampliamente en lenguajes de secuencias de comandos del lado del cliente. Se utilizó por primera vez en páginas web HTML (una aplicación del lenguaje de marcado universal estándar) para agregar funciones dinámicas a las páginas web HTML. ?

Paso uno: realizar la idea.

1. Introduzca una imagen en la página, colóquela en una etiqueta div y establezca el tamaño del div para que sea coherente con la imagen.

2. Utilice la herramienta de dibujo de círculos de jquery para dibujar un círculo en el div y afectar visualmente la imagen.

2

Paso 2: Descargue el paquete jquery.min.js.

Paso 2: descargue el método de operación específico de jquery, luego ingrese "descarga de jquery" en el navegador Baidu o Sogou y haga clic en el botón de búsqueda para obtener los resultados de la consulta e ingresar a la interfaz de descarga.

Paso 2: Edita el código.

Abra la herramienta de edición - introduzca jquery - escriba el código de la siguiente manera:

lt! DOCTYPE html gt

lthtml gt

lthead gt

ltmeta charset="UTF-8 "

lttitle gtDibujar un círculo

p>

ltstyle gt

#Drawing{

Ancho: 500px

Alto: 500px

Borde: 1px sólido <; /p>

Posición: relativa;

Desbordamiento: oculto;

}

. Círculo{

Color de fondo: verde;

Posición: absoluta;

}

lt/style gt;

ltscript src = " js/jquery-3 . 3 . 1 . js " > lt/script gt;

ltscript gt

$(documentación). listo(función() {

//Círculo

var $ círculo = null

//Canvas

var $ dibujo = $ (" #dibujo ");

//Posición central

var centex = 0;

var centerY = 0;

/ /¿Estás dibujando un círculo?

var isDrawing = false

//Presiona el mouse para comenzar a dibujar un círculo

$drawing.mousedown(function(. evento) ){

$ círculo = $(' lt;div gt lt/div gt;');

centex = evento . pagex-$ dibujo offset() izquierda;

centroY = evento . pakey-$ dibujo . offset()

$(este

isDrawing = true

evento). .prevenir default();

});

//Arrastra el mouse

$(documento).

mousemove(función(evento){

if (dibujo){

var radioX = math . ABS(evento . pagex-$ dibujo . offset() . left-centex);

var radioY = math . ABS(event . pakey-$ dibujo . offset().

var radio = math sqrt(radiusX * radioX radioY * radioY); //Radio, teorema de Pitágoras

//Las siguientes cuatro condiciones determinan que el círculo no puede exceder el área del lienzo. Si esta restricción no es necesaria, este código se puede eliminar

si. (centroX-radio lt; 0) {

radio = centroX

}

if(centroY-radio lt; 0) {

Radio = centro;

}

if(centex radio gt;$dibujo.ancho()) {

radio = $ ancho de dibujo()-. centex;

}

if(centro radio gt$drawing.height()) {

Radio=? $ dibujo.height()-centerY;

}

//Establece el tamaño y la posición del círculo

$circle.css("left",centex-radius "px");

$circle.css("arriba ", radio central " px ");

$circle.css("ancho ", 2 * radio " px ");

$circle.css("altura ", 2 * radio " px ");

$circle.css("border-radius ", radio " px "); > }

});

//Suelta el ratón para dejar de dibujar el círculo.

$(documentación). mouseup(función() {

isDrawing = false

});

});

lt/script gt;

p>

lt/head gt;

ltbody gt

ltdiv id = " dibujo " gt

ltimg width = " 502px " altura = " 502px "src = " img/cartoon/huoying.jpg jpg "/ gt;

lt/div gt;

lt/body gt;

lt/html gt;

Paso 4: Prueba.

1. Abre la página, que muestra una imagen de Naruto.

2. Haga clic izquierdo, mantenga presionado y tire, y extienda el círculo en un círculo con la primera posición del clic izquierdo como centro.

3. Actualiza la página y la imagen se restaurará a su estado original.