整體感知訓(xùn)練holisticPerception.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>整體感知訓(xùn)練</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<script src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<div align="left" >
<img height="50" width="50" src="../img/tubiao/1.png" border="0" title="返回上一頁(yè)" style="background-repeat: no-repeat" onClick="javascript:history.back(-1);">
<div style="position:absolute;z-index: 10;left: 150px;top: -20px;">
<p align="center" style="font-size: 30px;color: black;font-weight:bold;">動(dòng)態(tài)感知</p>
</div>
</div>
<!-- 畫(huà)布-->
<div style="height: 50px;border-radius:100px;font-size:1rem;">
<p align="center" style="color:red;font-weight:bold;font-size:26px">盯著中心紅點(diǎn)看 </p>
</div>
<div id="centerPoint" align="center" style="max-width: 100%;height: auto;display: block;background-size: contain;">
<canvas id="can" width="300px" height="300px" style="border:dashed 2px #CCC"></canvas>
</div>
<script type="text/javascript">
window.onload = function(){
//擦除canvas畫(huà)布
function clearCanvas(){
$('#can').remove();//移除畫(huà)布
$('#centerPoint').append('<canvas id="can" width="300px" height="300px" style="border:dashed 2px #CCC"></canvas>');
//畫(huà)出中心紅點(diǎn)
var can = document.getElementById("can");
var cans = can.getContext('2d'); //得到畫(huà)筆
cans.beginPath();//開(kāi)始繪制新路徑
//arc(x, y, radius, startAngle, endAngle, counterclockwise)：
//以(x,y)為圓心繪制一條弧線，弧線半徑為radius，起始和結(jié)束角度（用弧度表示）分別為startAngle 和endAngle。最后一個(gè)參數(shù)表示startAngle 和endAngle 是否按逆時(shí)針?lè)较蛴?jì)算，值為false表示按順時(shí)針?lè)较蛴?jì)算。
cans.arc(150,150,5,0,2*Math.PI);//參數(shù)1：左右移動(dòng)；參數(shù)2：上下移動(dòng)；參數(shù)3：大小；參數(shù)4：圖形顯示百分比
cans.closePath();
cans.fillStyle = 'red';
cans.fill();
}
var base=20;//基數(shù)
var multiple = 1;//倍數(shù)
//畫(huà)線
function showLogin(){
arrow_line("can",150,150,0,0,base*multiple,0); //橫 （向右）
arrow_line("can",0,0,0,0,-(base*multiple/1.5),base*multiple/1.5); //左斜下
arrow_line("can",-(base*multiple),0,base*multiple,0,0,0); //橫 （向左）
arrow_line("can",base*multiple,-(base*multiple),0,base*multiple,0,0); //豎 (向上)
arrow_line("can",0,0,0,base*multiple,(base*multiple)/1.5,((base*multiple)/5)); //右斜上
arrow_line("can",0,0,0,base*multiple,(base*multiple)-((base*multiple)/5),((base*multiple)+((base*multiple)/1.5))); //右斜下
arrow_line("can",-(base*multiple),0,base*multiple,base*multiple,(base*multiple/3),(base*multiple/4)); //左斜上
arrow_line("can",0,-(base*multiple),(base*multiple),(base*multiple*2),(base*multiple),(base*multiple*3)); //豎 (向下)
}
//setInterval("","1000");//每隔一秒自動(dòng)執(zhí)行函數(shù)
var intr =setInterval(function(){
if (multiple<=7) {
clearCanvas();//清除畫(huà)布
showLogin();//畫(huà)線
multiple++;
}else{
multiple=1;
clearCanvas();//清除畫(huà)布
showLogin();//畫(huà)線
multiple++;
}
},1000);
//畫(huà)帶箭頭的線
function arrow_line(canId,ox,oy,x1,y1,x2,y2){
//參數(shù)說(shuō)明 canvas的 id ，原點(diǎn)坐標(biāo) 第一個(gè)端點(diǎn)的坐標(biāo)，第二個(gè)端點(diǎn)的坐標(biāo)
var sta = new Array(x1,y1);
var end = new Array(x2,y2);
var canvas = document.getElementById(canId);
if(canvas == null)return false;
var ctx = canvas.getContext('2d');
//畫(huà)線
ctx.beginPath();
ctx.translate(ox,oy,0); //坐標(biāo)源點(diǎn)
ctx.moveTo(sta[0],sta[1]);
ctx.lineTo(end[0],end[1]);
ctx.fill();
ctx.stroke();
ctx.save();
//畫(huà)箭頭
ctx.translate(end[0],end[1]);
//我的箭頭本垂直向下，算出直線偏離Y的角，然后旋轉(zhuǎn) ,rotate是順時(shí)針旋轉(zhuǎn)的，所以加個(gè)負(fù)號(hào)
var ang=(end[0]-sta[0])/(end[1]-sta[1]);
ang=Math.atan(ang);
if(end[1]-sta[1] >= 0){
ctx.rotate(-ang);
}else{
ctx.rotate(Math.PI-ang);//加個(gè)180度，反過(guò)來(lái)
}
ctx.lineTo(-5,-10);
ctx.lineTo(0,-5);
ctx.lineTo(5,-10);
ctx.lineTo(0,0);
ctx.fill(); //箭頭是個(gè)封閉圖形
ctx.restore(); //恢復(fù)到堆的上一個(gè)狀態(tài)，其實(shí)這里沒(méi)什么用。
ctx.closePath();
}
}
</script>
</body>
</html>
聯(lián)系客服
