html5-canvas学习

setTimeout笔记：

a,setTimeout("alert('3秒后执行我')",3000);                      //直接把执行语句放在双引号里当参数

  b,setTimeout(function(){alert("3秒后执行我");},3000);     //直接把一个包含执行语句的匿名函数当参数

  c,setTimeout(count,3000);                                           //把指针当参数

  d,setTimeout("count()",3000);                                      //把count()函数放在双引号里当参数，相当于用eval()函数来解析他

  e,setTimeout(function(){count();},3000);                      //把要执行的函数放在一个匿名函数里当参数

  f,setTimeout(arguments.callee,3000);                            //如果是调用自身的话可以直接用arguments.callee方法，优于把自身函数的指针，因为arguments.callee始终指向自身，不用管函数名变动的问题。

 

beginPath笔记：

<html lang="en-US">  
<canvas id=myCanvas width=500px height=500px></canvas>  
  
<script>  
    var myCanvas = document.getElementById("myCanvas");  
    var context = myCanvas.getContext("2d");  
      
    context.fillStyle = "#e4e4e4";  
    context.fillRect(0,0,500,500);  
  
    context.beginPath();  
      
    context.moveTo(100,100);  
    context.lineTo(200,100);  
    context.strokeStyle = "red";  
    context.stroke();  
  
    context.beginPath();  
    context.moveTo(100,200);  
    context.lineTo(200,200);  
    context.strokeStyle = "blue";  
    context.stroke();  
</script>  
</html>

如果不对这段代码做改动的话，显示的一条红线和蓝线 

接下来把第二个的context.stroke()注释起来，你会发现最后的结果只是一条红线，因为第二个路径没有stroke()就不能勾勒出线条。

不注释第二个context.stroke()，而把第二个context.beginPath()注释起来，则是一条紫线和蓝线，因为没有开辟新的路径，所以第二个stroke()又重新画了第一条直线，并且用了蓝色，而第一个stroke()已经用红色画了第一条直线了，蓝色和红色的结合就变成了紫色。

 

posted @ 2015-11-25 22:34  Decmber  阅读(139)  评论(0)    收藏  举报