h5-5 canvas-阿里云开发者社区

h5-5 canvas

2017-11-15 1147

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');//绘制环境
    oGC.moveTo(200,200);
    //弧度 = 角度*Math.PI/180
    oGC.arc(200,200,150,0,10*Math.PI/180,true);//画园：圆心坐标，半径，开始角度，结束角度，画的方向true为逆时针。
    oGC.stroke();
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    function toDraw(){
        
        var x = 200;
        var y = 200;
        var r = 150;//圆点坐标，半径
        
        oGC.clearRect(0,0,oC.width,oC.height);
        
        var oDate = new Date();
        var oHours = oDate.getHours();
        var oMin = oDate.getMinutes();
        var oSen = oDate.getSeconds();
        
        var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
        var oMinValue = (-90 + oMin*6) * Math.PI/180;
        var oSenValue = (-90 + oSen*6) * Math.PI/180;
        
        
        /*oGC.moveTo(x,y);
        
        oGC.arc(x,y,r,0,6*Math.PI/180,false);
        
        oGC.moveTo(x,y);
        
        oGC.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false);*/
        
        oGC.beginPath();
        
        for(var i=0;i<60;i++){
            oGC.moveTo(x,y);
            oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
        }
        
        oGC.closePath();
        
        oGC.stroke();
        
        
        
        oGC.fillStyle = 'white';
        
        oGC.beginPath();
        
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
        
        oGC.closePath();
        
        oGC.fill();
        
        
        oGC.lineWidth = 3;
        
        oGC.beginPath();
        
        for(var i=0;i<12;i++){
            oGC.moveTo(x,y);
            oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
        }
        
        oGC.closePath();
        
        oGC.stroke();
        
        
        oGC.fillStyle = 'white';
        
        oGC.beginPath();
        
        oGC.moveTo(x,y);
        oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
        
        oGC.closePath();
        
        oGC.fill();
        
        
        oGC.lineWidth = 5;
        
        oGC.beginPath();
        oGC.moveTo(x,y);
        
        oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
        
        oGC.closePath();
        oGC.stroke();
        
        oGC.lineWidth = 3;
        oGC.beginPath();
        oGC.moveTo(x,y);
        
        oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);
        
        oGC.closePath();
        oGC.stroke();
        
        
        oGC.lineWidth = 1;
        oGC.beginPath();
        oGC.moveTo(x,y);
        
        oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);
        
        oGC.closePath();
        oGC.stroke();
        
        
    }
    
    setInterval(toDraw,1000);
    
    toDraw();
    
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.moveTo(100,200);
    oGC.arcTo(100,100,200,100,50);
    oGC.stroke();
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    /*oGC.moveTo(100,200);
    oGC.quadraticCurveTo(100,100,200,100);
    oGC.stroke();*/
    oGC.moveTo(100,200);
    oGC.bezierCurveTo(100,100,200,200,200,100);
    oGC.stroke();
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.translate(100,100);
    oGC.rotate(20*Math.PI/180);
    oGC.rotate(25*Math.PI/180);
    oGC.scale(2,2);
    oGC.fillRect(0,0,100,100);
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    var num = 0;
    var num2 = 0;
    var value = 1;
    setInterval(function(){            
        num++;    
        oGC.save();    
        oGC.clearRect(0,0,oC.width,oC.height);    
        oGC.translate(100,100);    
        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"></canvas>
</body>
</html>