搜索
查看: 2262|回复: 4

[界面] 如何在AARDIO中实现JS效果

[复制链接]

1

主题

2

帖子

11

积分

新手入门

Rank: 1

积分
11
发表于 2017-11-1 13:43:13 | 显示全部楼层 |阅读模式
我要在AARDIO上实现下面的网页代码要怎么做?  
主要是JS代码不知道如何实现



<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>canvas圆形进度球html5水波动画特效</title>
<style type="text/css">
  #c{
   margin: 0 auto;
   display: block;
  }
  #r{
   display: block;
   margin: 0 auto;
  }
  #r::before{
   color: black;
   content: attr(min);
   padding-right: 10px;
  }
  #r::after{
   color: black;
   content: attr(max);
   padding-left: 10px;
  }  
</style>
</head>
<body>
<canvas id="c"></canvas>
<input type="range" id="r" min="0" max="100" step="1">

<script type="text/javascript">
  var canvas = document.getElementById('c');
  var ctx = canvas.getContext('2d');
  var range = document.getElementById('r');

  //range控件信息
  var rangeValue = range.value;
  var nowRange = 0; //用于做一个临时的range

  //画布属性
  var mW = canvas.width = 250;
  var mH = canvas.height = 250;
  var lineWidth = 2;

  //圆属性
  var r = mH / 2; //圆心
  var cR = r - 16 * lineWidth; //圆半径

  //Sin 曲线属性
  var sX = 0;
  var sY = mH / 2;
  var axisLength = mW; //轴长
  var waveWidth = 0.015 ; //波浪宽度,数越小越宽
  var waveHeight = 6; //波浪高度,数越大越高
  var speed = 0.09; //波浪速度,数越大速度越快
  var xOffset = 0; //波浪x偏移量

  ctx.lineWidth = lineWidth;

  //画圈函数
  var IsdrawCircled = false;
  var drawCircle = function(){

   ctx.beginPath();
   ctx.strokeStyle = '#1080d0';
   ctx.arc(r, r, cR+5, 0, 2 * Math.PI);
   ctx.stroke();
   ctx.beginPath();
   ctx.arc(r, r, cR, 0, 2 * Math.PI);
   ctx.clip();

  }

  //画sin 曲线函数
  var drawSin = function(xOffset){
   ctx.save();

   var points=[]; //用于存放绘制Sin曲线的点

   ctx.beginPath();
   //在整个轴长上取点
   for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
    //此处坐标(x,y)的取点,依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
    var y = -Math.sin((sX + x) * waveWidth + xOffset);

    var dY = mH * (1 - nowRange / 100 );

    points.push([x, dY + y * waveHeight]);
    ctx.lineTo(x, dY + y * waveHeight);  
   }

   //封闭路径
   ctx.lineTo(axisLength, mH);
   ctx.lineTo(sX, mH);
   ctx.lineTo(points[0][0],points[0][1]);
   ctx.fillStyle = '#1c86d1';
   ctx.fill();

   ctx.restore();
  };

  //写百分比文本函数
  var drawText = function(){
   ctx.save();

   var size = 0.4*cR;
   ctx.font = size + 'px Microsoft Yahei';
   ctx.textAlign = 'center';
   ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
   ctx.fillText(~~nowRange + '%', r, r + size / 2);

   ctx.restore();
  };

  var render = function(){
   ctx.clearRect(0, 0, mW, mH);

   rangeValue = range.value;

   if(IsdrawCircled == false){
    drawCircle();
   }

   if(nowRange <= rangeValue){
    var tmp = 1;
    nowRange += tmp;
   }

   if(nowRange > rangeValue){
    var tmp = 1;
    nowRange -= tmp;
   }

   drawSin(xOffset);
   drawText();

   xOffset += speed;
   requestAnimationFrame(render);
  }

  render();  
</script>
</body>
</html>

点评

继续努力: 1.0
继续努力: 1
直接在代码编辑框中 F5 就可以运行查看效果  发表于 2017-11-1 18:22
回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
发表于 2017-11-1 13:47:30 | 显示全部楼层
你那几个效果用plus控件可以做,
但是如果要执行JS,你要放到浏览器控件中才行,例子:
import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
/*}}*/

import web.kit.form;
var wb = web.kit.form(winform);

wb.html =
/**
你的html代码
**/


winform.show()
win.loopMessage();

回复

使用道具 举报

1

主题

2

帖子

11

积分

新手入门

Rank: 1

积分
11
 楼主| 发表于 2017-11-1 19:26:26 | 显示全部楼层
哪网页里面的按钮可不可以控制程序窗口呢
回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
发表于 2017-11-1 20:02:20 | 显示全部楼层
lichao3210 发表于 2017-11-1 19:26
哪网页里面的按钮可不可以控制程序窗口呢

当然可以,看webkit教程里有,js可以直接调用aardio函数
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-12-15 23:05 , Processed in 0.078125 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表