如何使用 JavaScript 实现图片的曲线运动？

JavaScript021

如何使用 JavaScript 实现图片的曲线运动？,第1张

思路：使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作，在执行的动作中循环替换图片的src属性。树立演示如下：

1、HTML结构

<img src="1.png" id="test">

2、javascript代码

function change(n){

if(n>5) n=1 // 一共5张图片，所以循环替换

document.getElementById("test").setAttribute("src", n+".png")

n++

setTimeout("change("+n+")",1000)

}

window.onload = function(){

setTimeout("change(1)", 1000)

}

用canvas吧 html5的 很好弄这个，我用它做了个路由器流量监控的 也是模仿任务管理器的曲线图

看图。。

每幅图3个canvas标签，显示的图像=背景色+另外两个的图像

一个是纯黑色背景，每次刷新都全部覆盖掉，再把下两个贴上去。

二个是网格，先画好（只画了横线），每次刷新就贴到第一个就好了

三是曲线了，宽度很宽（3000px），每次刷新时往后画几个像素，在贴到第一个就好了（往前移动几个像素）

搞定。

<script type="text/javascript">

window.onload = function(){

var c = document.getElementById("myCanvas")

var content = c.getContext("2d")

//绘制二次方贝塞尔曲线

content.strokeStyle ="#FF5D43"

content.beginPath()

content.moveTo(0,200)

content.quadraticCurveTo(75,50,300,200)

content.stroke()

content.globalCompositeOperation = "source-over" //目标图像上显示源图像

//绘制上面曲线的控制点和控制线，控制点坐标为两直线的交点(75,50)

content.strokeStyle = "#f0f"

content.beginPath()

content.moveTo(75,50)

content.lineTo(0,200)

content.moveTo(75,50)

content.lineTo(300,200)

content.stroke()

}