html5 cavans的小应用

1.canvas鼠标画线，canvas小方块移动，canvas小方块旋转并缩放

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘制方块</title>
<style>
    body{background:#000;}
    #c1{background:#fff;}
    span{background:#fff;}
</style>
<script>
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGc = oC.getContext('2d');
        oGc.fillRect(0,0,100,100);
        var num = 0;
        setInterval(function(){
            num++;
            oGc.clearRect(0,0,oC.width,oC.height);
            oGc.fillRect(num,num,100,100);
        },30);
    };
</script>
</head>

<body>
<!--canvas 的宽高写在行间样式中是画布的大小，写在行间中就是等比缩放-->
<canvas id="c1" width="400" height="400">
    <span>不支持canvas</span>
</canvas>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小方块的缩放和旋转</title>
<style>
body{background:#000;}
#cl{background:#fff;}
span{background:#fff;}
</style>
<script>
    window.onload = function(){
        var oC = document.getElementById('cl');
        var oGc = oC.getContext('2d');
        var num = 0 ;
        var value = 1;
        var num2 = 0;
        
        setInterval(function(){
            num++;
            oGc.clearRect(0,0,oC.width,oC.height);
            oGc.save(); // 注意这个使用的地方，画布清掉的一开始就用
            if(num2 == 100){
                value = -1;
            }else if(num2 == 0){
                value = 1;
            }
            num2 += value;
            oGc.translate(100,100);
            oGc.rotate(num*Math.PI/180);
            oGc.scale(num2*1/50,num2*1/50);
            oGc.translate(-50,-50);
            oGc.fillRect(0,0,100,100);
            oGc.restore();
        },30);
        
    };
</script>
</head>

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    body{background:#000;}
    #c1{background:#fff;}
    span{background:#fff;}
</style>
<script>
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGc = oC.getContext('2d');
        
        oC.onmousedown = function(ev){
            var ev = ev || window.event;
            
            oGc.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
            oC.onmousemove = function(ev){
                var ev = ev || window.event;
                oGc.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
                oGc.stroke();
            };
            oC.onmouseup = function(){
                oC.onmousemove = oC.onmouseup = null;
            };            
            return false;
        };
    };
</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas</span>
</canvas>
</body>
</html>

html5 cavans的小应用

相关推荐