javascript - canvas中如何在多点之间 平滑的画出一条线，类似动画的那种 急急急！！！

问题描述

问 题

以下是我的代码，

 var content = document.getElementById('weatherForecastCanvas');
    var ctx = content.getContext("2d");
    ctx.strokeStyle = "#fff";
    ctx.fillStyle = "#fff";
    ctx.lineWidth = 3;


//最高1

    ctx.arc(xPoints[0], yPoints[0], 3, 0, Math.PI * 2, true);

////////////////////开始最高温度的线///////////////////////////////

    ctx.fillText("" + a[0] + "℃", xPoints[0] - 10, yPoints[0] + 20);
    ctx.moveTo(xPoints[0], yPoints[0]);
    ctx.lineTo(xPoints[1], yPoints[1]);

//最高2

    ctx.arc(xPoints[1], yPoints[1], 3, 0, Math.PI * 2, true);
    ctx.fillText("" + a[1] + "℃", xPoints[1] - 10, yPoints[1] + 20);
    ctx.moveTo(xPoints[1], yPoints[1]);
    ctx.lineTo(xPoints[2], yPoints[2]);

解决方案

帮你找了几个资源
http://stackoverflow.com/questions/25480506/how-to-progressively-draw-line-animation-in-html5-canvas
http://jsfiddle.net/m1erickson/7faRQ/

这篇关于javascript - canvas中如何在多点之间 平滑的画出一条线，类似动画的那种 急急急！！！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！