- 8
- 32 725
Dominik
Registrace 20. 05. 2013
1. Canvas - Setup and First Line
Code:
const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')
function drawLine(ctx, line) {
ctx.beginPath()
ctx.moveTo(line.start.x, line.start.y)
ctx.lineTo(line.end.x, line.end.y)
ctx.lineWidth = line.lineWidth
ctx.lineCap = line.lineCap
ctx.strokeStyle = line.strokeStyle
ctx.stroke()
}
const line = {
start: {
x: 100,
y: 100
},
end: {
x: 100,
y: 200
},
lineWidth: 50,
strokeStyle: 'blue',
lineCap: 'round',
}
drawLine(ctx, line)
const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')
function drawLine(ctx, line) {
ctx.beginPath()
ctx.moveTo(line.start.x, line.start.y)
ctx.lineTo(line.end.x, line.end.y)
ctx.lineWidth = line.lineWidth
ctx.lineCap = line.lineCap
ctx.strokeStyle = line.strokeStyle
ctx.stroke()
}
const line = {
start: {
x: 100,
y: 100
},
end: {
x: 100,
y: 200
},
lineWidth: 50,
strokeStyle: 'blue',
lineCap: 'round',
}
drawLine(ctx, line)
zhlédnutí: 443
Video
4. Drawing a line on mouse drag
zhlédnutí 6KPřed 4 lety
Code: gist.github.com/dominikkaegi/dd17bf0fc26ceb7170a6b917a8ce58c1#4-drawing-a-line-on-mouse-drag
3. Drawing Points on mouse click
zhlédnutí 484Před 4 lety
This video is about 3. Drawing Points on mouse click
2. Deconstructing Objects with Default Values
zhlédnutí 186Před 4 lety
This video is about 2. Deconstructing Objects with Default Values
7. Drawing with requestAnimationFrame
zhlédnutí 278Před 4 lety
This video is about 7. Drawing with requestAnimationFrame
AIESEC Zurich - Stoff & Schnaps Roll Call
zhlédnutí 25KPřed 7 lety
This video is about Stoff & Schnaps Roll Call
Thanks Dominik!
Can we have the code please?
gist.github.com/dominikkaegi/dd17bf0fc26ceb7170a6b917a8ce58c1#6-drawing-multiple-lines
Good video, they did it a couple of years ago but it explains well the concepts to work with HTML Canvas
How would you go about deleting 1 of the lines through the chart? For example if I drew 10 lines, I want to select the first line I drew with the mouse and delete.
Man, cool and interesting videos, thanks a lot!!
dude, let me download this code
I don't have it in a repo but in a github gist. You can find it here. gist.github.com/dominikkaegi/dd17bf0fc26ceb7170a6b917a8ce58c1 The 4th version on that gist is most likely the one corresponding to this video.
@@dominik3557 Thank you very much!
GOOD OL DAYS !!!!
can you show us the drawLine function please? because without it the program is not working fine
It is shown in a previous video, but here is a link to a gist with the code :) gist.github.com/dominikkaegi/dd17bf0fc26ceb7170a6b917a8ce58c1
lyrics please
czcams.com/video/oXlQFlHBzjk/video.html&ab_channel=RamonStoff tfadhli xD (lc tacapes مر من هنا)
Thanks man
Nicer Roll Call am start :D
So good!
This roll call is my faaav!!!