账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    canvas js 写的 怎么运用在 vue中
    25
    0

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>

    body {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

#c {
    margin: 0 auto;
    margin-top:10px;
    margin-bottom: 10px;
    margin-top: 20px;   
    position: absolute;
    left: -32px;
    top:-51px;

}
.ball{
    width:120px;
    height:120px;
    background:rgba(124,68,209,1);
    box-shadow:0px 1px 8px 0px rgba(0,0,0,0.2),0px 0px 13px 0px rgba(255,255,255,0.3);
    border-radius: 50%;
    position: relative;
}

    </style>
    </head>
    <body>

    <div class="ball">
        <canvas id="c">当前浏览器不支持canvas 请升级！</canvas>
</div>

    <!-- <input type="range" name="range" min="0" max="100" step="1"> -->
    </body>

    <script>
    canvas = document.getElementById("c");
    ctx = canvas.getContext("2d");

    M = Math;
    Sin = M.sin;
    Cos = M.cos;
    Sqrt = M.sqrt;
    Pow = M.pow;
    PI = M.PI;
    Round = M.round;

    oW = canvas.width =184;
    oH = canvas.height = 184;

    // 线宽
    lineWidth = 2

    // 大半径
    r = (oW / 2);
    console.log("r",r)

    cR = r - 8*lineWidth;
    console.log("cr",cR)

    ctx.beginPath();

    ctx.lineWidth = lineWidth;

    // 水波动画初始参数
    axisLength = 2r - 16lineWidth; // Sin 图形长度
    unit = axisLength / 9; // 波浪宽
    range = .4 // 浪幅
    nowrange = range;
    xoffset = 8 * lineWidth; // x 轴偏移量
    data = 55 / 100; // 数据量
    sp = 0; // 周期偏移量
    nowdata = 0;
    waveupsp = 0.009; // 水波上涨速度

    // 圆动画初始参数
    arcStack = []; // 圆栈
    bR = r-8*lineWidth;
    soffset = -(PI/2); // 圆动画起始位置
    circleLock = true; // 起始动画锁

    cStartPoint = arcStack.shift(); // 圆起始点

    ctx.strokeStyle = "#1c86d1";

    render(); // 开始渲染

    function drawSine () {
    ctx.beginPath();
    ctx.save();
    var Stack = []; // 记录起始点和终点坐标
    for (var i = xoffset; i<=xoffset + axisLength; i+=20/axisLength) {

    var x = sp + (xoffset + i) / unit;
var y = Sin(x) * nowrange;

var dx = i;

var dy = 2*cR*(1-nowdata) + (r - cR) - (unit * y);

ctx.lineTo(dx, dy);
Stack.push([dx,dy])

    }

    // 获取初始点和结束点
    var startP = Stack[0]
    var endP = Stack[Stack.length - 1]

    ctx.lineTo(xoffset + axisLength,oW);
    ctx.lineTo(xoffset,oW);
    ctx.lineTo(startP[0], startP[1])
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "#FAD961");
    grd.addColorStop(1, "#F76B1C");
    ctx.fillStyle = grd
    ctx.fill()
    ctx.restore();
    }

    function render () {
    ctx.clearRect(0,0,oW,oH);

    if (circleLock) {

    if (arcStack.length) {
  var temp = arcStack.shift();
  ctx.lineTo(temp[0],temp[1])
  ctx.stroke();
} else {
  circleLock = false;
  ctx.stroke();
  arcStack = null;

  ctx.globalCompositeOperation = 'destination-over';
  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.arc(r,r, bR, 0, 2*PI, 1);

  ctx.beginPath();  
  ctx.save();
  ctx.arc(r,r, r-16*lineWidth, 0, 2*PI, 1);
  ctx.restore()
  ctx.clip();

}

    } else {

    // 开始水波动画
// 控制波幅
if (data >= 0.85) {
  if (nowrange > range/4) {
    var t = range * 0.01;
    nowrange -= t;   
  }
} else if (data <= 0.1) {
  if (nowrange < range*1.5) {
    var t = range * 0.01;
    nowrange += t;   
  }
} else {
  if (nowrange <= range) {
    var t = range * 0.01;
    nowrange += t;   
  }      

  if (nowrange >= range) {
    var t = range * 0.01;
    nowrange -= t;
  }
}

if((data - nowdata) > 0) {
  nowdata += waveupsp;      
}

if((data - nowdata) < 0){
  nowdata -= waveupsp
}

sp += 0.07;
drawSine();

    }
    requestAnimationFrame(render)
    }
    </script>

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 塞纳河畔的海底捞 普通会员 1楼

      在 Vue 中，你可以在 canvas 元素上使用 JavaScript 来绘制图形和动画。以下是一个简单的例子：

      ```html

      ```

      在这个例子中，我们首先在 HTML 中创建了一个 canvas 元素，并获取了它的 2D 渲染上下文。然后，我们创建了一个新的 2D 图形，使用 fillRect 方法填充了背景色，然后使用 strokeRect 方法绘制了一个矩形。

      注意，fillRect 方法需要一个函数作为参数，这个函数需要接受两个参数，一个是矩形的左上角坐标，另一个是矩形的右下角坐标。strokeRect 方法不需要任何参数，它会绘制一个矩形。

      此外，你还可以使用 clearRect 方法来清除 canvas 中的图形。clearRect 方法接受四个参数，分别是矩形的左上角坐标、右下角坐标、水平方向和垂直方向。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部