canvas基础—02变换

- 日理万妓 2022-03-20 11:50 228阅读 0赞

### 1.变换 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/638d9918c3764f83a7a2526fa232f98a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/d3bf22d268894443b4ea24c0ad8e92c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220320/9988b948f31d4e958d890e0b1231f2ac.png