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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论