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

  • 相关阅读:
    join()方法作用
    多线程的运行状态
    守护线程和非守护线程
    多线程快速入门
    Spring Boot2.0之注解方式启动Springmvc
    Spring Boot2.0之 原理—创建内置Tomcat容器
    Spring Boot2.0之纯手写框架
    Sprin Boot2.0之整合Mybatis整合分页插件
    linux下通过acl配置灵活目录文件权限(可用于ftp,web服务器的用户权限控制)
    PHP编程效率的20个要点
  • 原文地址:https://www.cnblogs.com/Decmber/p/4996160.html
Copyright © 2011-2022 走看看