Centre un círculo en un lienzo con un% de ancho

Question

No parece que pueda dibujar un círculo en el centro de un lienzo, si el lienzo tiene un ancho% como% 33.3333 (la idea es tener 3 uno al lado del otro).

¿Por qué es esto? http://jsfiddle.net/n302nsbh/2/

Html

<div id="test">
    <canvas class="myCanvas"></canvas>
</div>

Css

.myCanvas {
    width: 33.3333333333%;
    display: inline-block;
    background-color: red;
}

Js

 var canvas = $('.myCanvas');
 canvas.width = canvas.width();
 canvas.height = canvas.height();

 var context = canvas.get(0).getContext('2d');
 var centerX = canvas.width / 2;
 var centerY = canvas.height / 2;
 var radius = canvas.height/2;

 context.beginPath();
 context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 context.fillStyle = 'blue';
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = '#003300';
 context.stroke();

javascript css html canvas

-1

BarryBones41 11 dic. 2015 a las 18:31

Answer 1

Su problema es que la variable canvas no es su objeto de lienzo, sino que es una instancia de jQuery , por lo que cuando establece sus propiedades de ancho y alto, no pasan correctamente por jQuery a su valor real Elemento de lona.

Cambia tus primeras líneas a algo como:

var jQCanvas = $('.myCanvas');
var canvas = jQCanvas[0];
canvas.width = jQCanvas.width();
canvas.height = jQCanvas.height();
// etc.

Aquí hay un violín fijo: http://jsfiddle.net/rgthree/n302nsbh/8/

Como otros han mencionado, puede compensar el lineWidth de su radio para asegurarse de que todo esté en la pantalla, incluido el borde. He agregado eso al violín, pero esa no es la verdadera razón por la que no está centrado.

3

rgthree 11 dic. 2015 a las 18:06

Answer 2

El problema es que jQuery no calcula correctamente el ancho y la altura del elemento de lienzo. En su caso, creo que sería mejor usar document.querySelector en lugar de $. Ambos tienen una funcionalidad similar, pero document.querySelector es nativo, lo que significa que no necesita incluir todo jQuery para hacer solo esta cosa. document.querySelector devuelve un objeto DOM, que no tiene los métodos width y height, pero tiene las propiedades width y height.

Código corregido:

var canvas = document.querySelector(".myCanvas");

var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = canvas.height /2;

Consulte también violín fijo.

1

Michał Perłakowski 11 dic. 2015 a las 16:18

Answer 3

Un elemento de lienzo es muy parecido a una imagen, solo porque cambie el ancho visible no significa que haya cambiado las dimensiones internas (y no lo ha hecho)

http://jsfiddle.net/n302nsbh/7/

Este ejemplo funciona porque ignora que lo está escalando al 33%.

 var canvas = $('.myCanvas');

 var context = canvas.get(0).getContext('2d');
 var centerX = canvas.get(0).width / 2;
 var centerY = canvas.get(0).height / 2;
 var radius = canvas.get(0).height/2;

0

ericjbasti 11 dic. 2015 a las 15:48

Centre un círculo en un lienzo con un% de ancho

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript