Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8ffc67d

Browse files
Day 08 - Fun with HTML5 Canvas
1 parent 319d099 commit 8ffc67d

File tree

5 files changed

+80
-0
lines changed

5 files changed

+80
-0
lines changed

‎08_day/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>08 Day</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body>
11+
<p> <em>Move your mouse and draw </em> 💁</p>
12+
<canvas id="draw" width="800" height="800"></canvas>
13+
<script type="text/javascript" src="main.js"></script>
14+
</body>
15+
</html>

‎08_day/main.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const canvas = document.querySelector('#draw');
2+
const ctx = canvas.getContext('2d');
3+
canvas.width = window.innerWidth;
4+
canvas.height = window.innerHeight;
5+
ctx.strokeStyle = '#BADA55';
6+
ctx.lineJoin = 'round';
7+
ctx.lineCap = 'round';
8+
ctx.lineWidth = 100;
9+
// ctx.globalCompositeOperation = 'multiply';
10+
11+
let isDrawing = false;
12+
let lastX = 0;
13+
let lastY = 0;
14+
let hue = 0;
15+
let direction = true;
16+
17+
function draw(e) {
18+
if (!isDrawing) return; // stop the fn from running when they are not moused down
19+
console.log(e);
20+
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
21+
ctx.beginPath();
22+
// start from
23+
ctx.moveTo(lastX, lastY);
24+
// go to
25+
ctx.lineTo(e.offsetX, e.offsetY);
26+
ctx.stroke();
27+
[lastX, lastY] = [e.offsetX, e.offsetY];
28+
29+
hue++;
30+
if (hue >= 360) {
31+
hue = 0;
32+
}
33+
if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
34+
direction = !direction;
35+
}
36+
37+
if (direction) {
38+
ctx.lineWidth++;
39+
} else {
40+
ctx.lineWidth--;
41+
}
42+
43+
}
44+
45+
canvas.addEventListener('mousedown', (e) => {
46+
isDrawing = true;
47+
[lastX, lastY] = [e.offsetX, e.offsetY];
48+
});
49+
50+
51+
canvas.addEventListener('mousemove', draw);
52+
canvas.addEventListener('mouseup', () => isDrawing = false);
53+
canvas.addEventListener('mouseout', () => isDrawing = false);

‎08_day/style.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
html,
2+
body {
3+
margin: 0;
4+
}
5+
p {
6+
text-align: center;
7+
}

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,7 @@ Learned about Fetch API, getting `.json()` from fetch response, ES6 spread opera
4343
### Day 7: 24 Jun 2018
4444
Learned about new array methods like some, every, find, findIndex.
4545
![Day 7 of 30](https://pbs.twimg.com/media/C07gdtqUAAAtlyM.jpg)
46+
47+
### Day 8: 25 Jun 2018
48+
Had so much fun learning today. Canvas and draw.
49+
![Canvas](https://pbs.twimg.com/media/C1QFNMYUsAA9cxC.jpg)

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<a class="active" href="./05_day/index.html">05 Day</a>
1717
<a class="active" href="./06_day/index.html">06 Day</a>
1818
<a class="active" href="./07_day/index.html">07 Day</a>
19+
<a class="active" href="./08_day/index.html">08 Day</a>
1920
</div>
2021
</body>
2122

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /