Cómo dibujar una forma de corazón usando un lienzo HTML5
?
*?{
?
margen:?
relleno:?0;?
}?
html{?
altura:?100%;?
margen:?
}?
cuerpo?{?
altura:?
color-de fondo:blanco;?
}?
#canvasZone?{?
ancho:?
alto:?100%;?
alineación de texto: ?
color de fondo:?negro;?
}?
#myCanvas?{?
alto:100%;?
display:?block;?
/*background-color:aqua;*/?
}?
>
var?arr?=?[];// Guarde todas las coordenadas XY solo con fines de verificación. Se puede eliminar en el programa real.
var?
var?
var?i;?
var?
var?
var?
var?
var?startRadian?=?Math.PI;?
var?
window.onload?{función?
startAnimation();?
}?
función?{
ctx =?document. getElementById("myCanvas").getContext("2d");?
// Deje que el lienzo ocupe toda la pantalla -20 es la posición de la barra de desplazamiento, que debe excluirse. Si aparecen barras de desplazamiento, aprietan el lienzo.
WINDOW_HEIGHT=document.documentElement.clientHeight-20;?
WINDOW_WIDTH=document.documentElement.clientWidth-20;?
ctx.width?=?WINDOW_WIDTH ;?
ctx.height?=?WINDOW_HEIGHT;?
drawHeart();?
}?
función?drawHeart( )?{
ctx.strokeStyle?
ctx.lineWidth?=?1;// ¿Establecer el ancho de la línea?
radian?=?startRadian;//¿Establecer radianes como radianes iniciales?
radianDecrement?=?Math.PI?/?num?
ctx.moveTo(getX(radian),?getY(radian));// ¿Mover al punto inicial?
i?=?0;?
intervalId?=?setInterval("printHeart()",?time);?
}?
/x =?(13?cos?t?-?5?cos?2t?-?2?cos?3t?-?cos?4t)?
función?{
radian?
ctx.lineTo(getX(radian),?getY(radian)); // ¿Una línea recta que conecta el punto antiguo y el nuevo?
//arr.push("X:"?+?getX(radián)?+?"
Y:"?+?getY(radián)?+?"
");?
i++;?
ctx.stroke();//¿dibujar una línea?
if(i?>=?num)? {
clearInterval(intervalId);?
//document.getElementById("bs").innerHTML?=?arr.join("");//Imprimir todas las coordenadas XY punto.
}?
}?
función?getX(t)?{// ¿Obtener la coordenada X a partir de radianes?
retorno?(16?*?Math.pow(Math.sin(t),?3));?
}?
función?getY (t)?{
función?getY(t)?
retorno?(13?*?Math.cos(t)?-?5?*?Math.cos( 2?*?t)?-?2?*?Math.cos(3?*?t)? -?2?*?Math.cos(3?*?t)? -?Math.cos(4?* ?t));?
}?
?
? html>;.