|
整体感知训练holisticPerception.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>整体感知训练</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="返回上一页" 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;">动态感知</p> </div> </div> <!-- 画布--> <div style="height: 50px;border-radius:100px;font-size:1rem;"> <p align="center" style="color:red;font-weight:bold;font-size:26px">盯着中心红点看 </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画布 function clearCanvas(){ $('#can').remove();//移除画布 $('#centerPoint').append('<canvas id="can" width="300px" height="300px" style="border:dashed 2px #CCC"></canvas>'); //画出中心红点 var can = document.getElementById("can"); var cans = can.getContext('2d'); //得到画笔 cans.beginPath();//开始绘制新路径 //arc(x, y, radius, startAngle, endAngle, counterclockwise)： //以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算，值为false表示按顺时针方向计算。 cans.arc(150,150,5,0,2*Math.PI);//参数1：左右移动；参数2：上下移动；参数3：大小；参数4：图形显示百分比 cans.closePath(); cans.fillStyle = 'red'; cans.fill(); } var base=20;//基数 var multiple = 1;//倍数 //画线 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");//每隔一秒自动执行函数 var intr =setInterval(function(){ if (multiple<=7) { clearCanvas();//清除画布 showLogin();//画线 multiple++; }else{ multiple=1; clearCanvas();//清除画布 showLogin();//画线 multiple++; } },1000); //画带箭头的线 function arrow_line(canId,ox,oy,x1,y1,x2,y2){ //参数说明 canvas的 id ，原点坐标 第一个端点的坐标，第二个端点的坐标 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'); //画线 ctx.beginPath(); ctx.translate(ox,oy,0); //坐标源点 ctx.moveTo(sta[0],sta[1]); ctx.lineTo(end[0],end[1]); ctx.fill(); ctx.stroke(); ctx.save(); //画箭头 ctx.translate(end[0],end[1]); //我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号 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);//加个180度，反过来 } ctx.lineTo(-5,-10); ctx.lineTo(0,-5); ctx.lineTo(5,-10); ctx.lineTo(0,0); ctx.fill(); //箭头是个封闭图形 ctx.restore(); //恢复到堆的上一个状态，其实这里没什么用。 ctx.closePath(); } } </script> </body> </html>
|
|
|
来自： 樱花梦_张艺馨 > 《Html5-小程序》
