canvas基础—02变换

最新推荐文章于 2024-08-11 18:03:48 发布

jiaojsun

最新推荐文章于 2024-08-11 18:03:48 发布

阅读量132

点赞数

分类专栏： canvas基础

本文链接：https://blog.csdn.net/jiaojsun/article/details/87105156

版权

canvas基础专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1.变换

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        oGC.translate(100,100) //移动当前坐标位置
        oGC.rotate(45*Math.PI/180)// 以左上角为中心点进行顺时针旋转45度
        oGC.scale(2,1)//(宽的比例，高的比例)
        oGC.fillRect(0,0,100,100)
    }

</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

demo.html(从大到小旋转)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');

        var num = 0
        var num2 = 0
        var value = 1

        oGC.translate(100,100)
        setInterval(function(){
            num++
            oGC.save() //需要封闭起来，要不然旋转的角度会累加
            oGC.clearRect(0, 0, oC.width, oC.height)
            if(num2 == 100){
                value = -1
            }else if(num2 == 0){
                value = 1
            }
            num2 += value
            oGC.scale(num2*1/50,num2*1/50)
            oGC.rotate(num*Math.PI/180)
            oGC.translate(-50,-50) //绕着中心旋转
            oGC.fillRect(0,0,100,100)
            oGC.restore()


        },30)
    }
</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>