您的位置：首页 > Web前端 > HTML5

h5-5 canvas

2016-04-06 13:14 447 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航