Skip to content

Instantly share code, notes, and snippets.

@codetricity
Created March 16, 2018 04:26
Show Gist options
  • Save codetricity/1be6a7d866b98d676960112f69c5268e to your computer and use it in GitHub Desktop.
Save codetricity/1be6a7d866b98d676960112f69c5268e to your computer and use it in GitHub Desktop.
function lesson
<meta charset="utf-8">
<canvas id="myCanvas" width="800" height="600"></canvas>
<br>
<button onclick="horizLines()">Horizontal</button>
<button onclick="diagonalLines()">Diagonal</button>
<button onclick="clearScreen()">Clear</button>
<script>
var myCanvas = document.getElementById("myCanvas")
var context = myCanvas.getContext("2d");
var counter = 0;
function horizLines(){
var loop = setInterval( ()=>
{
var moveDistance = 20 * counter;
context.beginPath();
context.moveTo(100, 200 + moveDistance);
context.lineTo(120 + moveDistance, 200 + moveDistance);
context.stroke();
counter +=1;
console.log(counter);
if (counter > 10){
counter = 0;
clearInterval(loop);
}
}, 300);
}
function diagonalLines() {
var drawLine = function(){
var moveY = 20 * counter;
var steepness = 50;
context.beginPath();
context.moveTo(100, 100 + moveY)
context.lineTo(400, 100 + moveY + steepness);
context.stroke();
counter +=1;
console.log(counter);
if (counter > 10) {
counter = 0;
clearInterval(loop);
}
}
var loop = setInterval(drawLine, 300);
}
function clearScreen() {
context.clearRect(0, 0, myCanvas.width, 600)
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment