translate（）方法

最新推荐文章于 2024-05-22 12:00:48 发布

雅痞子军

最新推荐文章于 2024-05-22 12:00:48 发布

阅读量1w

点赞数

分类专栏： HTML5 JavaScript

本文链接：https://blog.csdn.net/qq_1724201421/article/details/80218792

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML5

5 篇文章 0 订阅

订阅专栏

在canvas中，可以使用translate()方法来平移图形。所谓的平移，是指图形沿着x轴或y轴进行直线运动。平移不会改变图形的形状和大小。

语法：

 cxt.translate(x,y);

说明：

x表示图形在x方向上移动的距离，默认单位是px。当x为正时，图形向x轴正方向移动；当x为负时，图形向x轴反方向移动。

y表示图形在y方向上移动的距离，默认单位是px。当y为正时，图形向y轴正方向移动；当y为负时，图形向y轴反方向移动。

注意：canvas使用的坐标系为W3C坐标系（y轴正方向向下），而不是数学坐标系（y轴正方向向上）。

看下面一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>translate()方法</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.οnlοad=function(){
            var cv=$('canvas');
            var cxt=cv.getContext('2d');

            //绘制矩形
            cxt.fillStyle='skyblue';
            cxt.fillRect(30,30,50,50);
            //移动矩形
            cxt.translate(50,50);
            cxt.fillRect(30,30,50,50); //重绘，这里仍然是fillRect(30,30,50,50)
        };
    </script>
</head>
<body>
    <canvas id="canvas" width='200' height='150' style='border:1px solid grey;'></canvas>
</body>
</html>

在浏览器中的预览效果图如下：

雅痞子军

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
translate（）方法

在canvas中，可以使用translate()方法来平移图形。所谓的平移，是指图形沿着x轴或y轴进行直线运动。平移不会改变图形的形状和大小。语法： cxt.translate(x,y);说明：x表示图形在x方向上移动的距离，默认单位是px。当x为正时，图形向x轴正方向移动；当x为负时，图形向x轴反方向移动。y表示图形在y方向上移动的距离，默认单位是px。当y为正时，图形向y轴正方向移动；当y为负...
复制链接

扫一扫