zoukankan      html  css  js  c++  java
  • 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()已经用红色画了第一条直线了,蓝色和红色的结合就变成了紫色。

  • 相关阅读:
    js动态添加、删除行
    java内存问题排查及分析
    IDE 热部署配置
    Target JRE version (1.7.0_79) does not match project JDK version (java version "1.8.0_171"), will use sources from JDK: 1.7
    快速排序
    归并排序思想
    算法总结
    百度2013校园招聘笔试题(含整理的答案)
    浙江省委书记(习):加快推进节约型社会建设
    申论方面的经验
  • 原文地址:https://www.cnblogs.com/Decmber/p/4996160.html
Copyright © 2011-2022 走看看