论坛首页 → Web前端技术论坛 →

Canvas 学习把玩下吧

浏览 2392 次
锁定老帖子 主题：Canvas 学习把玩下吧
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
作者 正文
  • vb2005xu
  • 等级: 一钻会员
  • 性别:
  • 文章: 722
  • 积分: 800
  • 来自: 北京
   发表时间：2011-01-04   最后修改：2011-01-04 
<!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);

 

 

 
返回顶楼
         
  • rainsilence
  • 等级: 一星会员
  • 性别:
  • 文章: 301
  • 积分: 195
  • 来自: 上海
   发表时间：2011-01-11  
to lz
1.你的所有说明文字和你的题目完全不是一路的。
2.你的ctx的构建方法不安全，不能做到全浏览器兼容
3.代码规范！！！！！类名首字母大写。
4.如果要创建方法，建议创建在原型上。用java的说法就是this.draw是创建在对象上，而原型方法创建在类上
5.this.interval没必要定义成属性，只需要定义成var就行了
6.var makeline=function(){_this.makeline(_this.x,_this.y);}; 
                 
                this.makeline=function(x,y){ 
这样写有必要？？？？
返回顶楼
          回帖地址
0 请登录后投票
  • vb2005xu
  • 等级: 一钻会员
  • 性别:
  • 文章: 722
  • 积分: 800
  • 来自: 北京
   发表时间：2011-01-12  
js 规范 ??? 不能做到全浏览器兼容???
不理解你说什么

为什么遵循标准,是因为标准能够使得大家协作方便

简单的测试代码 个人 方便 就行了
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics