主页 > 前端 > javascript >
来源：未知 时间：2016-09-28 11:19 作者：xxadmin 阅读:次
[导读] 今天特意学了下三角函数来画一个时钟效果， 公式是： //计算坐标点x1=r+r/2*Math.cos(angle*Math.PI/180);y1=r+r/2*Math.sin(angle*Math.PI/180); 代码： !DOCTYPEhtmlhtmlheadmetacharset=UTF-8titlemt3老玩家回归页/...
|
今天特意学了下三角函数来画一个时钟效果，
公式是： //计算坐标点 x1 = r + r/2 * Math.cos(angle * Math.PI / 180 ) ; y1 = r + r/2 * Math.sin(angle * Math.PI /180 ) ; 代码： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mt3老玩家回归页</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" user-scalable=no />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta content="telephone=no" name="format-detection" />
<meta name="x5-page-mode" content="app" />
<meta name="Robots" content="all" />
<meta name="full-screen" content="yes">
<script type="text/javascript" src="http://update2.locojoy.com/wz/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
</head>
<body>
<canvas id='can' width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("can");
var canvasW = canvas.width;
var canvasH = canvas.height;
console.log(canvas,canvasW,canvasH);
var draw = canvas.getContext("2d");
draw.fillStyle="#f1f1f1";
var angle = 0;
var r = 100;
var x= 0;
var y = 0;
setInterval(function(){
getTriangle();
},30);
function getTriangle(){
draw.clearRect(0,0,canvasW,canvasH);
//画圆
draw.beginPath();
draw.arc(r,r,r/2,0, 2 *Math.PI);
draw.fill();
draw.stroke();
draw.closePath();
//画圆心
draw.beginPath();
// draw.moveTo(r,r);
draw.arc(r,r,10,0, 2 *Math.PI);
//draw.fillStyle="#ff0000";
draw.fill();
draw.stroke();
draw.closePath();
//计算坐标点
x1 = r + r/2 * Math.cos(angle * Math.PI / 180 ) ;
y1 = r + r/2 * Math.sin(angle * Math.PI /180 ) ;
draw.beginPath();
draw.moveTo(r,r);
draw.lineTo(x1,y1);
draw.stroke();
draw.closePath();
// console.log(x1,y1);
angle = angle+ 5;
}
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
