The two lines that I complete have after a coment saying that they was added
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas transform</title>
<script>
function draw () {
const ctx = document.getElementById('canvas').getContext('2d');
ctx.save(); // Was missing in the original - added by Rutebmg-coder
const sin = Math.sin(Math.PI/6);
const cos = Math.cos(Math.PI/6);
ctx.translate(100,100);
let c = 0;
for(let i=0; i<=12; i++) {
c= Math.floor(255/12*i);
ctx.fillStyle = 'rgb(' + c + ',' + c + ',' + c + ')';
ctx.fillRect(0, 0, 100, 10);
ctx.transform(cos,sin,-sin,cos,0,0);
}
ctx.restore(); // Was missing in the original - added by Rutebmg-coder
ctx.transform(-1, 0, 0, 1, 100, 100);
ctx.fillStyle = 'rgba(255,128,255,0.5)';
ctx.fillRect(0,50,100,100);
}
</script>
<style>
body {
background-color: aquamarine;
}
canvas {
background-color: rgb(188, 138, 74);
}
</style>
</head>
<body onload="draw();">
<h2>Canvas Transform</h2>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
Rute Bezerra de Menezes Gondim
No comments:
Post a Comment