<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head><body>
<canvas width="400" height="400" style="border: 1px solid rgb(153, 153, 153);" id="canvasarea"></canvas>
</body>
<script type="text/javascript">
function drawTrigon(line,speed,color){
this.speed=speed;
this.elem=document.getElementById("canvasarea");
this.ctx=this.elem.getContext('2d');
this.ctx.strokeStyle=color;
this.ctx.lineWidth=line;
this.draw=function(){
this.ctx.clearRect(0,0,400,400);
this.ctx.moveTo(100,100);
this.x=100;
this.y=100;
var _this = this ;
var makeline=function(){_this.makeline(_this.x,_this.y);};
this.makeline=function(x,y){
this.x++;
this.y++;
this.ctx.lineTo(x,y);
this.ctx.stroke();
if(this.x>305){
clearInterval(this.interval);
}
} ;
this.interval=setInterval(makeline,speed);
}
}
var trigon=new drawTrigon(1,8,'blue');
trigon.draw();
</script>
</html>
setInterval和clearInterval 讲解
clearInterval类似JS的clearTimeout
时间间隔可以用 setInterval 命令来创建并用 clearInterval 命令来终止。setInterval
所用的参数有两种格式。在第一种格式中，你传递给 setInterval
的参数可以是一个函数名，一段时间上的间隔以及一些传递给前面函数的相关参数。当 setInterval
运行时它会依照规定的时间间隔依次将列出的参数传递给指定的函数，直到你调用 clearInterval 将其终止。相关的示范代码如下：
function updateStockPrices(whichStock) {
// Update code here
trace('Updating prices for '+whichStock);
}
stockInterval = setInterval(updateStockPrices, 1000, "Stratford Flash Products");
setInterval全面的介绍
setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下：
setInterval(function,interval[,arg1,arg2,......argn])
setInterval(object,methodName,interval[,arg1,arg2,.....argn])
第一种格式是标准动作面板中setInterval函数的默认语法，第二种格式是在专家模式动作中使用的方法。
其中的参数function是一个函数名或者一个对匿名函数的引用。object参数指定从Object对象派生的对象。methodName制定
object参数中要调用的方法。interval制定对function或methodName调用两次之间的时间，单位是毫秒。后面的arg1等是可
选的参数，用于制定传递给function或是methodName的参数。
setInterval它设置的时间间隔小于动画帧速（如每秒10帧，相当于100毫秒），则按照尽可能接近interval的时间间隔调用函数。而且必
须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果interval大于动画帧速，则只用在每次播放头进入某一帧是才调用，以
减小每次刷新屏幕的影响。
下面的例子每隔1秒调用一次匿名函数。
setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名
的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。
下面的例子为我们展示如何带参数运行。
function show1(){
trace("每隔1秒我就会显示一次");
}
function show2(str){
trace(str);
}
setInterval(show1,1000);
setInterval(show2,2000,"每隔2秒我就会显示一次");
上面已经将函数的setInterval方法介绍了。
下面我们将介绍对象的setInterval方法。
首先，写一个setInterval在动作中调用对象的方法的例子，该例子不需要传递参数。
myobj=new Object();//创建一个新的对象
myobj.interval=function){
trace("每隔1秒我就会显示一次");
}//创建对象的方法。
setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。
接下来介绍如何传递参数。其实道理和函数的传递参数是一样的。
myobj=new Object();
myobj.interval-function(str){
trace(str);
}
setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");
注意。要调用为对象定义的方法时，必须在专家模式中使用第二种语法格式。
这样子的话呢，我们来作一个动态显示时间的画面。可以用下面的代码实现。
setInterval(show,1000);
function show(){
time=new Date();
hour=time.getHours();
minu=time.getMinutes();
sec=time.get.Seconds();
datetime=hour ":" minu ":" sec;
}//这里的datetime是一个动态文本框的变量名字。
这样子呢，setInterval这个方法大家应该学的很好了。现在呢，我们学习clearInterval.
clearInterval动作的作用是清楚对setInterval函数的调用，它的语法格式如下clearInterval(intervalid);intervalid是调用setInterval函数后返回的对象。
下面举一个简单的例子。
function show(){
trace("每隔一秒我就会显示一次");
}
var sh;
sh=setInterval(show,1000);
clearInterval(sh);
分享到：
相关推荐
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 ...
由于标题为"canvas学习.zip"，并且描述提到了"canvas的官网小例子"，我们可以从中了解到这个压缩包可能包含了一些用于学习`canvas`的实例代码。 `canvas`标签是一个内联元素，通过JavaScript API与之交互。在HTML中...
Android—BitMap与Canvas学习笔记
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
学习Canvas时，理解每个方法的作用和用法至关重要，同时，熟悉如何组合使用这些方法来创建复杂的图形和动画也是必不可少的。 然而，描述中还提到了PHP框架YII的中文文档。Yii是一个高效的、面向对象的PHP框架，用于...
在本教程中，我们将学习如何利用Canvas API创建一个实时更新的时钟。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，它是Canvas API的主要画布。例如，在`clock.html`中，我们可能会看到以下代码： ```html ...
在canvas学习中，图形透明及交叠效果是两个重要的概念，它们可以让我们创建出丰富的视觉效果和动态交互。本文将详细解析这两个知识点，并通过提供的标签和文件名来具体阐述。 首先，我们来看“图形透明”这个概念。...
炫酷的HTML5 canvas效果展示， 代码结构简单，有利于开发者参考使用。
在本篇【canvas学习（二）：弹跳小球】中，我们将深入探讨HTML5的Canvas元素以及如何利用它来创建动态的、交互式的弹跳小球效果。Canvas是HTML5的一个重要特性，允许开发者在网页上进行动态图形绘制，为网页增添了...
这篇“HTML5 Canvas学习笔记(1)处理鼠标事件”着重讲解了如何利用Canvas API来监听和响应鼠标的点击、移动等事件。 Canvas API提供了几个关键的方法来处理鼠标事件，包括`addEventListener`用于绑定事件处理函数，`...
通过学习这篇笔记，我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先，Canvas是HTML5的一个核心特性，通过`<canvas>`标签在网页中定义一个画布。在JavaScript中，我们可以通过这个标签获取到一...
在这个“canvas学习”的压缩包中，你将找到关于canvas的基本语法和学习笔记，这对于想要掌握这个技术的前端开发者来说是非常宝贵的资源。 1. **Canvas元素** - `canvas`标签是HTML5中的一个新元素，用于在网页上...
HTML5 Canvas是现代Web开发中的一个关键特性，它允许开发者在网页上绘制图形，实现动态交互效果。在“HTML5 Canvas学习笔记(2)菜单高亮显示与...对于想要深入学习Canvas的开发者来说，这是一篇值得参考和实践的文章。
这篇“HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）”深入探讨了如何利用Canvas技术构建一个经典的游戏——俄罗斯方块。 在HTML5 Canvas上构建俄罗斯方块游戏，首先需要理解Canvas的基本结构和绘图API。...
html2canvas是一款强大的JavaScript库，能够将HTML元素转换成Canvas图像。它不依赖于服务器端的渲染，完全在客户端完成，这对需要截图网页或网页元素的场景非常有用。html2canvas支持各种浏览器，包括Firefox 3.5+、...
这篇关于"canvas JavaScript API学习"的资料，无疑是开发者深入理解和掌握这一技术的重要资源。 首先，Canvas API的核心在于它的2D渲染上下文（2D Rendering Context）。通过`<canvas>`元素，我们可以获取到这个上...
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
在现代Web开发中，Vue.js是...在学习和使用这个插件的过程中，不仅需要熟悉Vue的基础知识，还要理解虚拟DOM的工作原理，以及canvas的基本绘图操作。通过结合这两者的优点，我们可以构建出更具创新性和高性能的Web应用。
这个效果不仅能够为网页增添视觉吸引力，而且展示了Canvas和CSS的强大结合。以下是对实现这一效果所需技术的详细解释。 首先，让我们了解什么是Canvas。Canvas是HTML5引入的一个绘图元素，允许开发者在网页上动态...