Canvas draws the zodiac signs
-
- renderings
- Comparison chart
- Preparation
- Start coding
- The code of the author of free whoring
Renderings
Comparison picture
Preparation
(All the following snippets of code are typed by hand, and there will inevitably be grammatical errors. Please do not copy, the entire code will be published at the end of the article)
First prepare a “cosmic starry sky map” and set it as the background
<style>
* {<!-- -->
margin:0;
padding:0;
}
body {<!-- -->
background: url(./bg.jpg)
}
</style>
<body>
<canvas id=""constellation>
Your browser does not support canvas, please upgrade your browser
</canvas>
<body>
Start coding
Observing the comparison chart, you can see that all constellations are connected lines between “points” and “points” (draw small circles to achieve the effect of points)
Guess: Can’t we just draw a few circles and connect them?
function draw() {<!-- -->
var canvas = document.getElementById('constellation');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//Draw dots directly
ctx.beginPath()
ctx.arc(100,100,4,0,Math.PI*2,true)
ctx.arc(400,100,4,0,Math.PI*2,true)
ctx.arc(100,400,4,0,Math.PI*2,true)
ctx.fill(); //fill
ctx.beginPath()
ctx.arc(500,100,4,0,Math.PI*2,true)
ctx.arc(800,100,4,0,Math.PI*2,true)
ctx.arc(500,400,4,0,Math.PI*2,true)
ctx.stroke();//Connection
}
Effect
In a beginPath(), using the fill method (ctx.fill) will call the closing method (ctx.closePath) by default.
The connection method can realize the connection between “point” and “point”, but the “point” is hollow and does not achieve the desired effect (solid point)
Guess
Plot each point individually, using fill method,
Then draw them together, using the connection method
function draw() {<!-- -->
var canvas = document.getElementById('constellation');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
// Draw dots individually
ctx.beginPath()
ctx.arc(100,100,4,0,Math.PI*2,true)
ctx.fill(); //fill
ctx.beginPath()
ctx.arc(400,100,4,0,Math.PI*2,true)
ctx.fill(); //fill
ctx.beginPath()
ctx.arc(100,400,4,0,Math.PI*2,true)
ctx.fill(); //fill
// draw together
ctx.beginPath()
ctx.arc(500,100,4,0,Math.PI*2,true)
ctx.arc(800,100,4,0,Math.PI*2,true)
ctx.arc(500,400,4,0,Math.PI*2,true)
ctx.stroke();//Connection
}
Effect
You can see that the point on the left is satisfied,
Coincide the coordinates of “points drawn together” with the coordinates of “points drawn individually”,
Can’t we simulate the connection between “points” and “points” (coordinate coincidence diagram)
Improvements
Change “Commonly drawn points” to “Commonly drawn lines”
// Draw together
ctx.beginPath()
// Here are the parameters, X axis, Y axis, radius, starting arc, ending arc, clockwise/counterclockwise,
// There are too many parameters, and I only need lines, not dots
// ctx.arc(100,100,4,0,Math.PI*2,true)
// ctx.arc(400,100,4,0,Math.PI*2,true)
// ctx.arc(100,400,4,0,Math.PI*2,true)
//Change to draw line
// A starting point is needed here. The method I use is the coordinates of point 1. Because it is the same point, it has no impact on the page.
//Written like this to make subsequent method calls more convenient
ctx.moveTo(100,100);//Starting point
ctx.lineTo(100,100)
ctx.lineTo(400,100)
ctx.lineTo(100,400)
ctx.stroke();
Style
The “point-line connection” of the main body has been realized, so the next step is to make it look good, add a background image to the body, and add colors to the drawn points and lines.
function draw() {<!-- -->
var canvas = document.getElementById('constellation');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//Set the connection color and fill color
ctx.font = "40px sans-serif"//Text font
ctx.strokeStyle = '#bedff8' //Connection color
ctx.fillStyle = '#96d0fc' //Coordinate point color
ctx.shadowBlur = 10; //Set the blur level of coordinate point shadow
ctx.shadowColor = "#fff" //Set blur color
// Draw dots individually
ctx.beginPath()
ctx.arc(100,100,4,0,Math.PI*2,true)
ctx.fill(); //fill
ctx.beginPath()
ctx.arc(400,100,4,0,Math.PI*2,true)
ctx.fill(); //fill
ctx.beginPath()
ctx.arc(100,400,4,0,Math.PI*2,true)
ctx.fill(); //fill
// draw lines individually
ctx.beginPath()
ctx.moveTo(100,100);//Starting point
ctx.lineTo(100,100)
ctx.lineTo(400,100)
ctx.lineTo(100,400)
ctx.stroke();
}
Effect
Extract public methods
Because we need to draw the zodiac, 12 figures, and there are many coordinates of points, it is necessary to extract the common parts and write them as method calls
The method of passing parameters using variables is used here. First draw an Aries to see the effect.
const coordinatePoint = {<!-- -->
Aries:{<!-- -->
name:"Aries",//Constellation name
offsetX: 100,//X-axis offset, used for positioning
offsetY: 0, //y-axis offset, used for positioning
point:[//Coordinate point collection,
{<!-- -->x:0,y:220},
{<!-- -->x:120,y:250},
{<!-- -->x:170,y:280},
{<!-- -->x:180,y:300},
],
} ,
}
function draw() {<!-- -->
var canvas = document.getElementById('constellation');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//Set the connection color and fill color
ctx.font = "40px sans-serif"//Text font
ctx.strokeStyle = '#bedff8' //Connection color
ctx.fillStyle = '#96d0fc' //Coordinate point color
ctx.shadowBlur = 10; //Set the blur level of coordinate point shadow
ctx.shadowColor = "#fff" //Set blur color
Constellation(ctx, coordinatePoint.Aries) //Aries
}
draw()
// draw graphics
function Constellation(ctx, coordinate) {<!-- -->
// draw text
ctx.fillText(coordinate.name, coordinate.offsetX, coordinate.offsetY + 400);
// draw points
for (let i of coordinate.point) {<!-- -->
ctx.beginPath()
ctx.arc(coordinate.offsetX + i.x, coordinate.offsetY + i.y, 4, 0, Math.PI * 2, true)
ctx.fill(); //fill
}
// draw line
ctx.beginPath()
// The drawn line must have a starting point. The coordinates of [0] are used directly here.
ctx.moveTo(coordinate.offsetX + coordinate.point[0].x,coordinate.offsetY + coordinate.point[0].Y)
// In the following loop, the coordinates of [0] are also drawn. Since the coordinates overlap, the page does not change.
// In the constellation graphics, there are multiple bifurcated lines, which are also repeated coordinates used
for (let i of coordinate.point) {<!-- -->
ctx.lineTo(coordinate.offsetX + i.x, coordinate.offsetY + i.y)
}
ctx.stroke(); //Connect
}
Aries renderings
Repeated calculation of coordinates
The next step is to calculate the coordinates of other constellations. I observed them with the naked eye. The approximate position calculated is not accurate.
(After calculating for 2 hours, my eyes are already blind)
The code of the author of free prostitution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>constellation constellation</title>
<style>
* {<!-- -->
margin: 0;
padding: 0;
}
body {<!-- -->
background: url(./bg.jpg);
}
</style>
</head>
<body>
<canvas id="constellation">
Your browser does not support canvas, please upgrade your browser
</canvas>
</body>
<script type="text/javascript">
const coordinatePoint = {<!-- -->
Aries:{<!-- -->
name:"Aries",
offsetX: 100,
offsetY: 0,
point:[
{<!-- -->x:0,y:220},
{<!-- -->x:120,y:250},
{<!-- -->x:170,y:280},
{<!-- -->x:180,y:300},
],
} ,
Taurus:{<!-- -->
name:"Taurus",
offsetX: 400,
offsetY: 0,
point:[
{<!-- -->x:180,y:300},
{<!-- -->x:178,y:285},
{<!-- -->x:120,y:235},
{<!-- -->x:90,y:205},
{<!-- -->x:75,y:195},
{<!-- -->x:60,y:185},
{<!-- -->x:-10,y:115},
{<!-- -->x:60,y:185},
{<!-- -->x:75,y:195},
{<!-- -->x:90,y:205},
{<!-- -->x:95,y:185},
{<!-- -->x:85,y:180},
{<!-- -->x:85,y:165},
{<!-- -->x:70,y:130},
{<!-- -->x:30,y:70},
],
},
Gemini:{<!-- -->
name:"Gemini",
offsetX: 700,
offsetY: 0,
point:[
{<!-- -->x:160,y:300},
{<!-- -->x:170,y:270},
{<!-- -->x:50,y:230},
{<!-- -->x:0,y:210},
{<!-- -->x:-5,y:185},
{<!-- -->x:15,y:140},
{<!-- -->x:30,y:140},
{<!-- -->x:55,y:145},
{<!-- -->x:150,y:185},
{<!-- -->x:190,y:195},
{<!-- -->x:210,y:190},
{<!-- -->x:190,y:195},
{<!-- -->x:170,y:270},
],
},
Cancer:{<!-- -->
name:"Cancer",
offsetX:1000,
offsetY: 0,
point:[
{<!-- -->x:70,y:270},
{<!-- -->x:65,y:210},
{<!-- -->x:150,y:240},
{<!-- -->x:65,y:210},
{<!-- -->x:50,y:190},
{<!-- -->x:15,y:150},
],
},
Leo:{<!-- -->
name:"Leo",
offsetX: 1300,
offsetY: 0,
point:[
{<!-- -->x:80,y:50},
{<!-- -->x:60,y:55},
{<!-- -->x:55,y:100},
{<!-- -->x:70,y:120},
{<!-- -->x:100,y:115},
{<!-- -->x:130,y:135},
{<!-- -->x:40,y:235},
{<!-- -->x:10,y:285},
{<!-- -->x:10,y:200},
{<!-- -->x:70,y:120},
],
},
virgo:{<!-- -->
name:"virgo",
offsetX: 1600,
offsetY: 0,
point:[
{<!-- -->x:80,y:50},
{<!-- -->x:85,y:90},
{<!-- -->x:75,y:120},
{<!-- -->x:40,y:130},
{<!-- -->x:-10,y:120},
{<!-- -->x:40,y:130},
{<!-- -->x:45,y:190},
{<!-- -->x:10,y:220},
{<!-- -->x:-20,y:280},
{<!-- -->x:10,y:220},
{<!-- -->x:45,y:190},
{<!-- -->x:100,y:210},
{<!-- -->x:80,y:260},
{<!-- -->x:60,y:255},
{<!-- -->x:45,y:305},
{<!-- -->x:60,y:255},
{<!-- -->x:80,y:260},
{<!-- -->x:100,y:210},
{<!-- -->x:80,y:175},
{<!-- -->x:75,y:120},
],
},
Libra: {<!-- -->
name:"Libra",
offsetX: 100,
offsetY: 400,
point:[
{<!-- -->x:30,y:220},
{<!-- -->x:60,y:210},
{<!-- -->x:70,y:200},
{<!-- -->x:90,y:160},
{<!-- -->x:130,y:200},
{<!-- -->x:120,y:260},
{<!-- -->x:80,y:280},
{<!-- -->x:78,y:300},
{<!-- -->x:80,y:280},
{<!-- -->x:120,y:260},
{<!-- -->x:90,y:160},
],
},
Scorpio: {<!-- -->
name:"Scorpio",
offsetX: 400,
offsetY: 400,
point:[
{<!-- -->x:30,y:220},
{<!-- -->x:10,y:240},
{<!-- -->x:0,y:250},
{<!-- -->x:20,y:270},
{<!-- -->x:60,y:275},
{<!-- -->x:90,y:265},
{<!-- -->x:100,y:240},
{<!-- -->x:110,y:210},
{<!-- -->x:150,y:160},
{<!-- -->x:160,y:150},
{<!-- -->x:180,y:140},
{<!-- -->x:220,y:120},
{<!-- -->x:210,y:100},
{<!-- -->x:220,y:120},
{<!-- -->x:225,y:140},
{<!-- -->x:225,y:160},
],
},
Sagittarius: {<!-- -->
name:"Sagittarius",
offsetX: 700,
offsetY: 400,
point:[
{<!-- -->x:100,y:250},
{<!-- -->x:70,y:270},
{<!-- -->x:105,y:280},
{<!-- -->x:70,y:270},
{<!-- -->x:45,y:230},
{<!-- -->x:20,y:180},
{<!-- -->x:25,y:165},
{<!-- -->x:55,y:130},
{<!-- -->x:105,y:150},
{<!-- -->x:130,y:140},
{<!-- -->x:110,y:100},
{<!-- -->x:95,y:95},
{<!-- -->x:65,y:75},
{<!-- -->x:95,y:95},
{<!-- -->x:110,y:100},
{<!-- -->x:125,y:85},
{<!-- -->x:110,y:100},
{<!-- -->x:130,y:140},
{<!-- -->x:145,y:140},
{<!-- -->x:145,y:140},
{<!-- -->x:180,y:130},
{<!-- -->x:195,y:80},
{<!-- -->x:180,y:130},
{<!-- -->x:190,y:160},
{<!-- -->x:220,y:170},
{<!-- -->x:225,y:160},
{<!-- -->x:265,y:130},
{<!-- -->x:225,y:160},
{<!-- -->x:220,y:170},
{<!-- -->x:190,y:160},
{<!-- -->x:190,y:190},
{<!-- -->x:200,y:200},
{<!-- -->x:190,y:190},
{<!-- -->x:190,y:160},
{<!-- -->x:180,y:130},
{<!-- -->x:145,y:140},
{<!-- -->x:120,y:170},
{<!-- -->x:105,y:150},
],
},
Gapricorn:{<!-- -->
name:"Gapricorn",
offsetX:1000,
offsetY: 400,
point:[
{<!-- -->x:30,y:290},
{<!-- -->x:35,y:270},
{<!-- -->x:50,y:250},
{<!-- -->x:70,y:220},
{<!-- -->x:100,y:120},
{<!-- -->x:150,y:220},
{<!-- -->x:155,y:240},
{<!-- -->x:130,y:250},
{<!-- -->x:90,y:275},
{<!-- -->x:55,y:280},
{<!-- -->x:30,y:290},
],
},
Aquarius:{<!-- -->
name:"Aquarius",
offsetX:1300,
offsetY: 400,
point:[
{<!-- -->x:150,y:280},
{<!-- -->x:110,y:250},
{<!-- -->x:100,y:240},
{<!-- -->x:60,y:245},
{<!-- -->x:55,y:280},
{<!-- -->x:0,y:200},
{<!-- -->x:5,y:185},
{<!-- -->x:20,y:170},
{<!-- -->x:15,y:140},
{<!-- -->x:70,y:160},
{<!-- -->x:120,y:150},
{<!-- -->x:70,y:160},
{<!-- -->x:15,y:140},
{<!-- -->x:80,y:90},
{<!-- -->x:150,y:30},
],},
Pisces:{<!-- -->
name:"Pisces",
offsetX:1600,
offsetY: 400,
point:[
{<!-- -->x:-40,y:300},
{<!-- -->x:-20,y:320},
{<!-- -->x:0,y:295},
{<!-- -->x:60,y:295},
{<!-- -->x:100,y:295},
{<!-- -->x:150,y:310},
{<!-- -->x:110,y:260},
{<!-- -->x:80,y:230},
{<!-- -->x:65,y:200},
{<!-- -->x:40,y:130},
{<!-- -->x:30,y:100},
{<!-- -->x:15,y:80},
{<!-- -->x:20,y:50},
{<!-- -->x:40,y:35},
{<!-- -->x:70,y:55},
{<!-- -->x:75,y:80},
{<!-- -->x:60,y:105},
{<!-- -->x:30,y:100},
],
},
}
function draw() {<!-- -->
var canvas = document.getElementById('constellation');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//Set the connection color and fill color
ctx.font = "40px sans-serif"//Text font
ctx.strokeStyle = '#bedff8' //Connection color
ctx.fillStyle = '#96d0fc' //Coordinate point color
ctx.shadowBlur = 10; //Set the blur level of coordinate point shadow
ctx.shadowColor = "#fff" //Set blur color
Constellation(ctx, coordinatePoint.Aries) //Aries
Constellation(ctx, coordinatePoint.Taurus) //Taurus
Constellation(ctx, coordinatePoint.Gemini) //Gemini
Constellation(ctx, coordinatePoint.Cancer) //Cancer
Constellation(ctx, coordinatePoint.Leo) //Leo
Constellation(ctx, coordinatePoint.virgo) //Virgo
Constellation(ctx, coordinatePoint.Libra) //Libra
Constellation(ctx, coordinatePoint.Scorpio) //Scorpio
Constellation(ctx, coordinatePoint.Sagittarius) //Sagittarius
Constellation(ctx, coordinatePoint.Gapricorn) //Capricorn
Constellation(ctx, coordinatePoint.Aquarius) //Aquarius
Constellation(ctx, coordinatePoint.Pisces) //Pisces
}
draw()
//Draw graphics
function Constellation(ctx, coordinate) {<!-- -->
// draw text
ctx.fillText(coordinate.name, coordinate.offsetX, coordinate.offsetY + 400);
// draw points
for (let i of coordinate.point) {<!-- -->
ctx.beginPath()
ctx.arc(coordinate.offsetX + i.x, coordinate.offsetY + i.y, 4, 0, Math.PI * 2, true)
ctx.fill(); //fill
}
// draw line
ctx.beginPath()
// The drawn line must have a starting point. The coordinates of [0] are used directly here.
ctx.moveTo(coordinate.offsetX + coordinate.point[0].x,coordinate.offsetY + coordinate.point[0].Y)
// In the following loop, the coordinates of [0] are also drawn. Since the coordinates overlap, the page does not change.
// In the constellation graphics, there are multiple bifurcated lines, which are also repeated coordinates used
for (let i of coordinate.point) {<!-- -->
ctx.lineTo(coordinate.offsetX + i.x, coordinate.offsetY + i.y)
}
ctx.stroke(); //Connect
}
</script>
</html>
I just started working with canvas for a day and then made a demo. I hope you guys can give me suggestions for improvements.