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();
3 respuestas
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.
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.
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;
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.