Canvas: implement transformation matrix reset.

This commit is contained in:
Mátyás Mustoha 2015-05-05 15:39:35 +02:00
parent ccf1e6b9a7
commit 9302aaab96
6 changed files with 72 additions and 7 deletions

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<body>
<style>
html, body, div {
margin: 0;
padding: 0;
}
div {
width: 75px;
height: 75px;
float: left;
}
</style>
<div style="background-color:red"></div>
<div style="clear:left"></div>
<div style="background-color:blue"></div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="canvas_transformations_reset_001-ref.htm">
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
<canvas id="c" width="150" height="150"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.translate(75, 75);
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 75, 75);
ctx.resetTransform();
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 75, 75);
</script>