Html5旋转绘画大法

最新推荐文章于 2021-07-03 07:24:28 发布

唐小狼

最新推荐文章于 2021-07-03 07:24:28 发布

阅读量1.2k

点赞数

分类专栏： Html5游戏学习开发系列——学习笔记 html 编程面包屑文章标签： html5

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/50439764

版权

html 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

Html5游戏学习开发系列——学习笔记

2 篇文章 0 订阅

订阅专栏

编程面包屑

2 篇文章 0 订阅

订阅专栏

首先先说明一下问题：

例如：要画这样一个矩形ctx.fillRect(50,50,100,200); ，要实现的目的是让这个矩形旋转一个角度。现在就有问题了，旋转操作的原心是（0，0），也就是画布的坐标原点，而这个矩形的左上顶点是（50，50），直接旋转是出不来我们想要的结果的，这里就需要一个平移操作了，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Rectangle</title>
    <script type="text/javascript">
    var ctx;
    function init(){
        ctx = document.getElementById('canvas').getContext('2d');
        ctx.fillStyle = "rgb(250,0,0)";
        ctx.save(); //保存当前画布属性
        ctx.translate(50,50);   //画布平移
        ctx.rotate(-Math.PI/6); //画布旋转
        ctx.translate(-50,-50); //画布平移回去
        ctx.fillRect(50,50,100,200);    //绘制矩形
        ctx.restore();  //回复之前保存的画布属性
        ctx.fillStyle = "rgb(0,0,250)";
        ctx.fillRect(50,50,5,5);
    }
    </script>
</head>
<body onload="init();">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

这个平移旋转操作貌似以后可以用到，mark一下。

唐小狼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Html5旋转绘画大法

首先先说明一下问题：例如：要画这样一个矩形ctx.fillRect(50,50,100,200); ，要实现的目的是让这个矩形旋转一个角度。现在就有问题了，旋转操作的原心是（0，0），也就是画布的坐标原点，而这个矩形的左上顶点是（50，50），直接旋转是出不来我们想要的结果的，这里就需要一个平移操作了，代码如下：<!DOCTYPE html><html><head> <title>Rec
复制链接

扫一扫