HTML5画布rotate旋转 scale缩放 translate平移
1、画布旋转rotate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; } </style> </head> <body> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var cv = canvas.getContext('2d'); cv.strokeStyle = 'yellow'; cv.lineWidth = 10; // 设置一个空心的正方形 // 距离左边是10,是面是10,大小100X100 cv.strokeRect(300,200,100,100); // rotate旋转 30度 (旋转 是旋转 整个画布30度出来的结果) cv.rotate(30*Math.PI/180); cv.strokeRect(300,200,100,100); </script> </body> </html> 
2、scale缩放画布
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; } </style> </head> <body> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var cv = canvas.getContext('2d'); cv.strokeStyle = 'yellow'; cv.lineWidth = 10; // 设置一个空心的正方形 // 距离左边是0,是面是0,大小100X100 cv.strokeRect(0,0,100,100); // scale缩放画布 #####和原来一样大小是1(100%) ，2就是原来的2倍(200%)，宽、高 连边框大小也跟着变大 cv.scale(2,2); cv.strokeRect(0,0,100,100); // scale再缩放画布 cv.scale(2,2); cv.strokeRect(0,0,100,100); </script> </body> </html> 
3、translate平移
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; } </style> </head> <body> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var cv = canvas.getContext('2d'); cv.strokeStyle = 'yellow'; cv.lineWidth = 10; // 设置一个空心的正方形 // 距离左边是10,是面是10,大小100X100 cv.strokeRect(10,10,100,100); // translate 平移 向左移200，向下移200 cv.translate(200,200); cv.strokeRect(10,10,100,100); </script> </body> </html> 
原文链接：https://www.qiquanji.com/post/7497.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知