当前位置：首页 > 资讯 > 系统环境 > windows

《JS原理、方法与实践》- canvas作图（六）- 坐标操作

时间：2021-03-20 20:51 作者：张中华来源：阅读：449
扫一扫，手机访问

摘要：移动坐标原点方法：translate（x，y）：x，y代表移动后x，y坐标旋转坐标系方法：rotate（angle），旋转角度，整数为逆时针，负数为顺时针。实例 !DOCTYPE html html lang=”en” head meta charset=”UTF 8” m

移动坐标原点

方法：translate（x，y）：x，y代表移动后x，y坐标

旋转坐标系

方法：rotate（angle），旋转角度，整数为逆时针，负数为顺时针。

实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <canvas id="c2d" width="500" height="500">不支持canvas</canvas>    <script>        const canvas = document.querySelector('#c2d');        if(canvas.getContext) {            const ctx = canvas.getContext('2d');            ctx.fillRect(0,0,10,30);            ctx.translate(10,30);            ctx.fillRect(0,0,10,30);            ctx.translate(10,30);            ctx.rotate(-Math.PI * 1/2);            ctx.fillStyle='red';            ctx.fillRect(0,0,10,30);        }    </script></body></html>

运行结果

全部评论(0)

上一篇：《JS原理、方法与实践》- canvas作图（二）- 组合、剪切、坐标检测
下一篇：牛笔了！字节跳动大佬整理：CSS 核心知识（万字长文，值得收藏！）

dedecms织梦模板店

店铺

推荐商品