html5 canvas围绕中心点旋转

最新推荐文章于 2024-06-21 15:28:18 发布

weixin_34389926

最新推荐文章于 2024-06-21 15:28:18 发布

阅读量2.7k

点赞数 1

文章标签：移动开发 xhtml javascript ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>围绕中心点旋转</title>
<script src="js/modernizr.js"></script>
</head>

<body>
<script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
    canvasApp();
}
function canvasSupport(){
    return Modernizr.canvas;
}
function canvasApp(){
    if(!canvasSupport()){
        return;
    }else{
        var theCanvas = document.getElementById('canvas')
        var context = theCanvas.getContext("2d")

    }
    drawScreen();
    function drawScreen(){
        context.fillStyle="black";
        context.fillRect(20,20,25,25);
        
        
        context.setTransform(1,0,0,1,0,0);
        var angleInRadians = 45 * Math.PI / 180;
        var x = 100;
        var y = 100;
        var width = 50;
        var height = 50;
        context.translate(x+.5*width,y+.5*height);
        context.rotate(angleInRadians);
        context.fillStyle="red";
        context.fillRect(-.5*width,-.5*height,width,height);
        
    }
    
}


</script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
小白童鞋；你的支持是我最大的快乐！！
</canvas>
</body>
</html>

这一次我们设置了变量。。。是不是感觉看起来莫名的亲切了

        var x = 100;
        var y = 100;
        var width = 50;
        var height = 50;

然后我们用函数context.translate把画布原点平移到红色正方形的中心点。
这个函数可以将画布原点移到（x,y）处。这里将原点X坐标值设为红色正方形的左上角的X值（100）
加上其一半的宽度。使用前面创建的变量即可控制这个红色正方形的属性

X+0.5*width
然后Y坐标
然后执行平移函数
然后旋转

实现canvas以图片中心旋转

利用canvas的roate和translate方法实现按中心旋转的效果

新建html页

定义画布，以及图案的位置和大小参数

obj.x/y为长方形在canvas中的位置

obj.width/height为长方形的宽高

画一个简单的长方形，让它每100毫秒旋转1度

浏览器中打开页面会发现，旋转是以画布的左上角为圆心的

在旋转之前，把画布的中心位置translate到图片的中心

旋转之后，把中心translate回初始的位置，然后再绘制长方形

完成，浏览器打开页面，可以看到图案以中心旋转的效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
    canvas{
        position: absolute;
        border: 1px solid;
    }
    </style>
</head>
<body>
    <canvas id="canvas1" width="800" height="800"></canvas>
    <script type="text/javascript">
        var ctx1=canvas1.getContext('2d');
        var obj={
            x:100,
            y:200,
            width:200,
            height:400
        };
        /**
         * 画一个简单的长方形，让它每100毫秒旋转1度
         */
        //  浏览器中打开页面会发现，旋转是以画布的左上角为圆心的
        function rotate(){
            ctx1.clearRect(0,0,800,800);
            ctx1.fillStyle='blue';
            ctx1.rotate(Math.PI/180);
            ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);
            ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);
        }
        // 在旋转之前，把画布的中心位置translate到图片的中心
        function rotate2(){
            ctx1.clearRect(0,0,800,800);
            ctx1.fillStyle='blue';
            ctx1.translate((obj.x+(obj.width/2)),(obj.y+(obj.height/2)));
            ctx1.rotate(Math.PI/180);
            ctx1.translate(-(obj.x+(obj.width/2)),-(obj.y+(obj.height/2)));
            ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);
            ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);
        }
        // setInterval(rotate,100);
        setInterval(rotate2,100);
    </script>
</body>
</html>

weixin_34389926

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas围绕中心点旋转

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;me
复制链接

扫一扫