HTML reference manual

HTML tag大全

HTML canvas setTransform() method

setTransform() is a Canvas 2The D API uses the unit matrix to reset (overwrite) the current transformation and calls the transformation methods, which are described by the variables of the methods.

HTML canvas reference manual

Online example

Draw a rectangle, use setTransform() to reset and create a new transformation matrix, draw the rectangle again, reset and create a new transformation matrix, and then draw the rectangle again. Note that the red rectangle is not displayed in the following example because it is below the blue rectangle: each time setTransform() is called, it resets the previous transformation matrix and then constructs a new matrix, therefore, the red rectangle is not displayed below the blue rectangle in the following example:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas setTransform() method usage-Basic tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
</script>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support setTransform() Method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

Each object on the canvas has a current transformation matrix.

The setTransform() method resets the current transformation to the unit matrix and then runs transform().

In other words, setTransform() allows you to scale, rotate, move, and skew the current environment.

Note:This transformation will only affect the drawing after the setTransform() method call.

JavaScript syntax:	context.setTransform(a,b,c,d,e,f);

Parameter value

Parameter	Description
a	Horizontal scaling drawing.
b	Horizontal skew drawing.
c	Vertical skew drawing.
d	Vertical scaling drawing.
e	Horizontal movement drawing.
f	Vertical movement drawing.

HTML canvas reference manual

HTML: <template> tag