《HTML5 canvas开发详解(第2版)》——1.7 用console.log调试

1.7 用console.log调试

在超越“Hello World!”去探索更强大更丰富的内容前,还有些内容需要讨论。本书通过使用现代Web浏览器的console.log功能实现了一个简单的调试方法。这个函数可以通过代码在JavaScript控制台中记录文本信息日志,从而可以帮助用户找出问题(或者机会)。每个浏览器都有一个可以使用console.log的JavaScript控制台(Chrome、Opera、Safari、安装Firebug的Firefox等)。同时,那些不支持console.log的浏览器将弹出讨厌的错误提示。

为了处理这个错误,可以用一个外壳将console.log包装一下,使其只在浏览器支持的情况下被调用。这个外壳创建了一个名叫Debugger的类,然后创建一个在任何位置都可以被调用的Debugger.log静态函数,如下所示。

Debugger.log("Drawing Canvas");

以下是console.log()函数的代码。

var Debugger = function (){ };
Debugger.log = function (message){
  try {
   console.log(message);
  } catch (exception){
   return;
  }
}
时间: 2024-12-02 03:19:45

《HTML5 canvas开发详解(第2版)》——1.7 用console.log调试的相关文章

《HTML5 canvas开发详解(第2版)》——导读

前言第2版介绍自从本书第1版发行之后,在过去的两年里,HTML5 Canvas的使用有了突飞猛进的增长.本书的第1版可以称得上是第一批介绍Canvas的专著之一.在我们为自己的快速而感到自豪同时也意味着我们曾经独自进行了大量的研究和探索.早在2011年,只有极少数HTML5 Canvas应用的例子和教程.但在2013年情形发生了改变.现在有许多关于HTML5 Canvas的资源可供选择,从框架到API,有许多网站和书籍进行专门的阐述.为了编写第2版,我们进行了大量艰辛的工作来检查在第1版中哪些部

《HTML5 Canvas开发详解》——导读

https://yqfile.alicdn.com/bc81e95aba389209ecb7176965c56b0ba2d9c780.png" > 前言HTML5 Canvas为开发者提供了一个新的机会,利用它仅使用普通的HTML和JavaScript语言就可以在常见的浏览器中创建动画图形.Canvas是HTML5中使用率最高的一部分,它被用于许多演示与游戏.它提供了视觉效果很棒的交互特性,而且它还提供了非常大的自由度,几乎允许开发者在浏览器窗口中做任何事情.然而它与JavaScript的

《HTML5 Canvas开发详解》——1.6 用Console.log调试

1.6 用Console.log调试 在超越 "Hello World!"去探索更强大更丰富的内容前,还有些内容需要讨论.本书通过使用现代Web浏览器的console.log功能实现了一个简单的调试方法.这个函数可以通过代码在JavaScript控制台中记录文本信息日志,从而可以帮助找出问题(或者机会!).每个浏览器都有一个可以使用console.log的JavaScript控制台(Chrome,Opera,Safari,安装Firebug的Firefox).同时,那些不支持conso

《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

1.6 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事就是,看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.在用Canvas处理图像和声音的时候,这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是

《HTML5 canvas开发详解(第2版)》——第1章 HTML5 Canvas简介1.1 什么是HTML5

第1章 HTML5 Canvas简介 HTML5是新一代的HTML,即超文本标记语言.HTML从1993年第一次标准化后,便奠定了万维网的基础.HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容. HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧中完全重绘屏幕上的位图.作为一名程序员,所要做的就是在每一帧渲染之前设置屏幕的显

《HTML5 Canvas开发详解》——1.5 HTML5 Canvas版“Hello World!”

1.5 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事,就是看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.用Canvas处理图像和声音的时候这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是wi

《HTML5 canvas开发详解(第2版)》——1.11 动画版本的Hello World

1.11 动画版本的Hello World "Hello World"和"猜字母"本身都是不错的示例,但是它们都没能回答出"为什么"--究竟为什么要使用HTML5 Canvas?自创立以来,静态的图像和文字就是HTML的领域,那么画布的不同之处在哪里呢?要回答这个问题,需要创建第二个"Hello World"示例.这个示例将介绍画布与HTML上的其他显示方式的最大不同之处:动画.在这个示例中,将为"Hello Wor

《HTML5 canvas开发详解(第2版)》——1.9 HTML5 Canvas对象

1.9 HTML5 Canvas对象 Canvas对象是通过在HTML页面的< body >部分中放置< canvas >标签创建的,也可以通过以下代码创建画布实例. var theCanvas = document.createElement("canvas"); Canvas对象有两个相关的属性和方法可以通过JavaScript访问:width和height.这些属性显示当前HTML页面创建的画布的宽度和高度.这里需要强调的是,这两个属性并不是只读的.例如,

《HTML5 canvas开发详解(第2版)》——1.8 2D环境及其当前状态

1.8 2D环境及其当前状态 通过调用Canvas对象的getContext()方法可以获得HTML5的2D环境对象(Canvas RenderingContext2D对象).所有操作都要通过该对象进行.CanvasRenderingContext2D对象包含了在画布上绘图所需的所有方法和属性.CanvasRenderingContext2D(简称环境,后同)采用画布左上角为原点(0,0)的笛卡尔坐标系,坐标轴向右.向下为正方向. 然而,所有这些属性和方法都与当前状态关联使用.当前状态是一个必须