当前位置：网站首页>Chapter 7 deformation operation of canvas

Chapter 7 deformation operation of canvas

2022-06-29 14:37:00 【yxqq378287007】

《canvas》 The first 7 Chapter Deformation operation

The first 7 Chapter Deformation operation

7.1 Introduction to deformation operation

Displacement of words or pictures 、 The zoom 、 rotate 、 tilt 、 choice 、 Deformation effects such as tilting .

Deformation operation method

Method explain
translate() translation
scale() The zoom
rotate() rotate
transform()、setTransform() Transformation matrix

7.2 Graph translation

7.2.1 translate() Method

It does not change the shape and size of the graph .

cxt.translate(x, y);

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw a rectangle  cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); // Move rectangle  cxt.translate(50, 50); cxt.fillRect(30, 30, 50, 50); // Repaint , It's still fillRect(30, 30, 50, 50) } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw the initial figure  cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); // Add button click event  $$("btn").onclick = function () {
       cxt.translate(10, 10); //cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value=" Move " />
</body>
</html>

7.2.2 clearRect() Method empty canvas

cxt.clearRect(0, 0, cnv.width, cnv.height);

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw the initial figure  cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); $$("btn").onclick = function () {
       cxt.clearRect(0, 0, cnv.width, cnv.height); cxt.translate(10, 10); //cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value=" Move " />
</body>
</html>

7.3 Graphics zoom

7.3.1 scale() Method 

cxt.scale(x, y);

  • x,y Negative values are acceptable .

  • Scale based on the coordinate origin .

  • Zoom based on the previous state .

  • Graphics zoom 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw the initial figure  cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); // Zoom operation  cxt.scale(1.5, 1.5); cxt.fillStyle = "LightSkyBlue"; cxt.fillRect(30, 30, 50, 50); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
  • Zoom in and out 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw the initial figure  cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); // Zoom in  $$("btn-big").onclick = function () {
       cxt.scale(1.5, 1.5); cxt.fillStyle = "#9966FF"; cxt.fillRect(30, 30, 50, 50); } // Graphics zoom out  $$("btn-small").onclick = function () {
       cxt.scale(0.5, 0.5); cxt.fillStyle = "LightSkyBlue"; cxt.fillRect(30, 30, 50, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas><br />
    <input id="btn-big" type="button" value=" Zoom in " />
    <input id="btn-small" type="button" value=" narrow " />
</body>
</html>

7.3.2 scale() The negative effects of methods

  • The upper left coordinate will be scaled .
  • The line width is also scaled .
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.lineWidth = 4; cxt.strokeStyle = "HotPink"; cxt.strokeRect(30, 30, 50, 50); // Zoom in  $$("btn-big").onclick = function () {
       cxt.scale(1.5, 1.5); cxt.strokeRect(30, 30, 50, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas><br />
    <input id="btn-big" type="button" value=" Zoom in " />
</body>
</html>

7.4 Graphics rotation

7.4.1 rotate() Method 

cxt.rotate(angle);

angle>0, Clockwise , Rotate based on the origin , Rotate based on the last state .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); $$("btn").onclick = function () {
       cxt.rotate(-3 * Math.PI / 180); // Counter clockwise rotation 30° cxt.fillStyle = "LightSkyBlue "; cxt.fillRect(30, 30, 50, 50); // Be careful , It's still fillRect(30, 30, 50, 50) } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value=" rotate " />
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); var degree = 0; setInterval(function () {
       cxt.rotate(degree * Math.PI / 180); cxt.fillRect(30, 30, 50, 50); degree++; }, 1000); // every other 1000ms Call the function once  } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

7.4.2 Change the center of rotation

translate()+rotate().

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var i = 0; var rectWidth = 100; var rectHeight = 50; setInterval(function () {
       i++; cxt.clearRect(0, 0, cnv.width, cnv.height); cxt.save(); cxt.translate(cnv.width/2, cnv.height/2); // Move the coordinates to the center  cxt.rotate(Math.PI*(i/100)); // Progressive rotation  cxt.fillStyle = "HotPink"; cxt.fillRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight); // Filled rectangle  cxt.restore(); }, 10); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

7.5 Transformation matrix

transform() Method

transform() Method to achieve translation 、 Zoom and rotate .

cxt.transform(a, b, c, d, e,f);

a, Scale horizontally .
b, Tilt horizontally .
c, Tilt vertically .
d, Zoom vertical .
e, Move horizontally .
f, Move vertically .

  • Transformation matrix
    ( a c e b d f 0 0 1 ) \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} ⎝⎛​ab0​cd0​ef1​⎠⎞​
  1. translation 
cxt.transform(1, 0, 0, 1, e,f);
cxt.translate(e, f);

( x 1 y 1 1 ) = ( 1 0 e 0 1 f 0 0 1 ) ( x y 1 ) \begin{matrix} \left(\begin{array}{rr} x1 \\ y1 \\ 1 \\ \end{array}\right) & = & \left(\begin{array}{rr} 1 & 0 & e \\ 0 & 1 & f \\ 0 & 0 & 1 \end{array}\right) & \left(\begin{array}{rr} x \\ y \\ 1 \\ \end{array}\right) \end{matrix} ⎝⎛​x1y11​⎠⎞​​=​⎝⎛​100​010​ef1​⎠⎞​​⎝⎛​xy1​⎠⎞​​

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw the initial figure  cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); $$("btn").onclick = function () {
       cxt.clearRect(0, 0, cnv.width, cnv.height); cxt.transform(1, 0, 0, 1, 10, 10); //cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value=" Move " />
</body>
</html>
  1. The zoom 
cxt.transform(a, 0, 0, d, 0, 0);
cxt.scale(a, d);

( x 1 y 1 1 ) = ( a 0 0 0 d 0 0 0 1 ) ( x y 1 ) \begin{matrix} \left(\begin{array}{rr} x1 \\ y1 \\ 1 \\ \end{array}\right) & = & \left(\begin{array}{rr} a & 0 & 0 \\ 0 & d & 0 \\ 0 & 0 & 1 \end{array}\right) & \left(\begin{array}{rr} x \\ y \\ 1 \\ \end{array}\right) \end{matrix} ⎝⎛​x1y11​⎠⎞​​=​⎝⎛​a00​0d0​001​⎠⎞​​⎝⎛​xy1​⎠⎞​​

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } // Define functions for drawing graphics  window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); // Zoom in  $$("btn-big").onclick = function () {
       cxt.transform(1.5, 0, 0, 1.5, 0, 0); cxt.fillStyle = "#9966FF"; cxt.fillRect(30, 30, 50, 50); } // Graphics zoom out  $$("btn-small").onclick = function () {
       cxt.transform(0.5, 0, 0, 0.5, 0, 0); cxt.fillStyle = "LightSkyBlue"; cxt.fillRect(30, 30, 50, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas><br />
    <input id="btn-big" type="button" value=" Zoom in " />
    <input id="btn-small" type="button" value=" narrow " />
</body>
</html>
  1. rotate 
cxt.transform(cos(angle), sin(angle), -sin(angle), cos(angle), 0, 0);
cxt.rotate(angle);

( x 1 y 1 1 ) = ( c o s ( a n g l e ) − s i n ( a n g l e ) 0 s i n ( a n g l e ) c o s ( a n g l e ) 0 0 0 1 ) ( x y 1 ) \begin{matrix} \left(\begin{array}{rr} x1 \\ y1 \\ 1 \\ \end{array}\right) & = & \left(\begin{array}{rr} cos(angle) & -sin(angle) & 0 \\ sin(angle) & cos(angle) & 0 \\ 0 & 0 & 1 \end{array}\right) & \left(\begin{array}{rr} x \\ y \\ 1 \\ \end{array}\right) \end{matrix} ⎝⎛​x1y11​⎠⎞​​=​⎝⎛​cos(angle)sin(angle)0​−sin(angle)cos(angle)0​001​⎠⎞​​⎝⎛​xy1​⎠⎞​​

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css"> body {
       text-align: center; } </style>
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } // Define functions for drawing graphics  window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); $$("btn").onclick = function () {
       var angle = -30 * Math.PI / 180 // Counter clockwise rotation 30° //cxt.rotate(angle); cxt.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0); cxt.fillStyle = "LightSkyBlue "; cxt.fillRect(30, 30, 50, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value=" rotate " />
</body>
</html>
  • Center rotation 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var i = 0; var angle = 0; var rectWidth = 100; var rectHeight = 50; setInterval(function () {
       i++; cxt.clearRect(0, 0, cnv.width, cnv.height); cxt.save(); angle = Math.PI * (i / 100); cxt.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), cnv.width / 2, cnv.height / 2); cxt.fillStyle = "HotPink"; cxt.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); // Filled rectangle  cxt.restore(); }, 10); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

7.5.2 setTransform() Method

transfomr() The method is based on the last state transition ,setTransform() Method to set the drawing state directly , Then transform .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.fillStyle = "yellow"; cxt.fillRect(0, 0, 100, 50) cxt.setTransform(1, 0.5, -0.5, 1, 30, 10); cxt.fillStyle = "red"; cxt.fillRect(0, 0, 100, 50); cxt.setTransform(1, 0.5, -0.5, 1, 30, 10); cxt.fillStyle = "blue"; cxt.fillRect(0, 0, 100, 50); cxt.transform(1, 0.5, -0.5, 1, 30, 10); cxt.fillStyle = "red"; cxt.fillRect(0, 0, 100, 50); cxt.transform(1, 0.5, -0.5, 1, 30, 10); cxt.fillStyle = "blue"; cxt.fillRect(0, 0, 100, 50); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

7.6 Deep deformation operation

  • Deformation operation is used for pictures 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // establish image object  var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       cxt.drawImage(image, 10, 10); cxt.translate(50, 50); cxt.drawImage(image, 10, 10); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • The morph operation is used for text 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var text = " Green leaf learning network "; cxt.font = "bold 20px  Microsoft YaHei "; cxt.strokeStyle = "HotPink"; cxt.strokeText(text, 10, 30); cxt.translate(50, 50); cxt.scale(1.5, 1.5); cxt.rotate(30 * Math.PI / 180); cxt.strokeText(text, 10, 30); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

7.7 Draw gorgeous graphics 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.translate(150, 0); cxt.fillStyle = "rgba(255, 0, 0, 0.25)"; for (var i = 0; i < 50; i++) {
       cxt.translate(25, 25); // Graph translation  cxt.scale(0.95, 0.95); // Graphics zoom  cxt.rotate(Math.PI / 10); // Graphics rotation  cxt.fillRect(0, 0, 100, 50); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="180" style="border:1px dashed gray;"></canvas>
</body>
</html>

7.8 Drawing a rainbow 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Define an array , Storage 7 Color  var colors = ["red", "orange", "yellow", "green", "blue", "navy", "purple"]; var rStep = 12; cxt.lineWidth = rStep; //cxt.translate(50, 0); // Circular arc drawing  for (var i = 0; i < colors.length; i++) {
       // Define each downward movement rStep The transformation matrix of  cxt.translate(0, rStep); // Define color  cxt.strokeStyle = colors[i]; // Draw the arc  cxt.beginPath(); cxt.arc(cnv.width/2, 100, cnv.width/2, 0, 180 * Math.PI / 180, true); cxt.stroke(); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
原网站

版权声明
本文为[yxqq378287007]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/180/202206291355235070.html

边栏推荐

猜你喜欢

随机推荐