• 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>
  • 相关阅读:
    【转】BP神经网络
    【转】Matlab的regionprops详解
    【转】本人常用资源整理(ing...)
    【转】LDA-linear discriminant analysis
    [转]推荐几个机器学习算法及应用领域相关的中国大牛:
    【转】机器学习资料推荐
    《转贴》机器学习 机器视觉 图像处理 牛人牛站
    [转]LLE
    UVA10651
    UVA10051
  • 原文地址:https://www.cnblogs.com/moon-yyl/p/9074782.html
Copyright © 2020-2023  润新知