- Видео 8
- Просмотров 33 235
Dominik
Добавлен 20 май 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)
Просмотров: 456
Видео
5. Restructering Mouse Code
Просмотров 3234 года назад
This video is about 5. Restructering Mouse Code
4. Drawing a line on mouse drag
Просмотров 6 тыс.4 года назад
Code: gist.github.com/dominikkaegi/dd17bf0fc26ceb7170a6b917a8ce58c1#4-drawing-a-line-on-mouse-drag
3. Drawing Points on mouse click
Просмотров 4984 года назад
This video is about 3. Drawing Points on mouse click
2. Deconstructing Objects with Default Values
Просмотров 1914 года назад
This video is about 2. Deconstructing Objects with Default Values
7. Drawing with requestAnimationFrame
Просмотров 2904 года назад
This video is about 7. Drawing with requestAnimationFrame
AIESEC Zurich - Stoff & Schnaps Roll Call
Просмотров 25 тыс.7 лет назад
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
ruclips.net/video/oXlQFlHBzjk/видео.html&ab_channel=RamonStoff tfadhli xD (lc tacapes مر من هنا)
Thanks man
Nicer Roll Call am start :D
So good!
This roll call is my faaav!!!