注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

秒大刀 博客

好好学习 天天向上

 
 
 

日志

 
 
 
 

读《Foundation HTML5 Canvas - For Games and Entertainment》  

2012-01-09 16:07:07|  分类: 读书 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
[读]Foundation HTML5 Canvas - For Games and Entertainment - 秒大刀 - 秒大刀的城堡
HTML5炒的是越来越热了,随兴跟风看了点相关的东西。
居然还是英文的,实属难得,拓词有效!

贴一张用HTML5 canvas渲出来的图:
[读]Foundation HTML5 Canvas - For Games and Entertainment - 秒大刀 - 秒大刀的城堡


  1. Web developers are pushed for time and are much more interested in getting something working than worrying about if it's going to break in other browsers
  2. $(document).ready(function() { }); // $(document), is a jQuery selector, select an element from the DOM to be manipulated.
  3. It's always a good idea to put your JavaScript in a separate file and place it in your HTML pages using the src attribute.
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  4. alert function will do as a quick and easy way to output a message in JavaScript, for testing purposes of course
  5. Why can't you just run JavaScript at any time? If JavaScript ran at the point you placed it in your HTML page, it would start loading and halt the rest of the HTML page from being displayed until it finished. And, it wouldn't be able to access any of the content that hadn't loaded yet.
  6. JavaScript is different in that it won't break without a semi-colon at the end of a statement, but it's good practice to do so, it looks a lot neater, and it can save you a whole world of pain when debugging code in the future.
  7. It is possible to declare a variable without a var keyword, it's not very good practice and it can lead to all sorts of issues with scoping in JavaScript. You should always properly declare a variable with the var keyword the first time you use it.
  8. JavaScript primitive data types: Numbers(integers and floating point numbers), Booleans(true or false) and Strings
    JavaScript composite data types: Arrays and Objects
  9. null: means nothing, or no value.
    undefined: given to a variable after it has been declared, but before a value has been assigned to it
  10. non-boolean as boolean: A variable that isn't boolean value, like a string or number, it would always return true, unless it's the number zero. Values that aren't boolean will return true if they contain any data at all.
  11. a == b True if a is equal to b
    a === b : True if a is equal to b, and are of the same data type
    a !== b : True if a is not equal to b, or they are not of the same data type
  12. Functions are objects:
    function Point(x, y) { this.x = x; this.y = y; }
    var point = new Point(1, 2);
  13. var planets = new Array(); planets[0] = "Mercury";
    var planets = new Array("Mercury", "Venus", "Earth", "Mars");
    var planets = ["Mercury", "Venus", "Earth", "Mars"];
  14. setTimeout(code,millisec), clearTimeout(id_of_settimeout), setInterval(code,millisec[,"lang"]), clearInterval(id_of_setinterval)
  15. jQuery selector use a hash(#) for an id name, a dot for a class name, and nothing to match a tag name
  16. $("h2").html(); html does exactly the same as the innerHTML property. But html method always returns the first HTML element, so you don't need to refer to the array index
  17. The position of the canvas element is defined by its location within your HTML document. It can be moved around with CSS as required, just like other HTML elements.
  18. You draw on to the 2d rendering context, not the canvas element
  19. context.fillStyle = "rgb(255, 0, 0)"; // any valid CSS color value
    context.fillStyle = "rgba(255, 0, 0, 0.5)"; 
  20. canvas.attr("width", canvas.width());
    The downside with the width/height trick is that absolutely everything in the canvas is reset, including styles and colors. This is why you should only use this trick if you're prepared to completely reset the canvas, not just wipe the display clean.
  21. context.save(); context.restore();
  22. Every transformation method, affects all elements drawn after it has been called. This is because they all act directly on the 2d rendering context, not on the shape you're drawing
  23. The order that you perform transformations is incredibly important.
  24. If you called transform multiple times, you'd be applying each transformation to the transformation matrix that results from the last transformation.
  25. Some browsers don't support the full range of globalCompositeOperation values.
  26. quadraticCurveTo is a quadratic Bézier curve, while bezierCurveTo is a cubic Bézier curve
  27. Base64 data is about 50 percent larger than the original binary image data that it represents
  28. var image = new Image(); // assigning a blank DOM object for a HTML img element by using the Image class
    image.src = "example.jpg";
    $(image).load(function() { context.drawImage(image, 0, i); } // you need to make sure that the image has fully loaded.
  29. canvas locks out certain functionality when external images are used.
    canvas is pretty strict about accessing pixel-level data from images that aren't from the same place as the JavaScript that is controlling the canvas. Both the JavaScript and image that you're accessing need to be accessed by the same domain name. Check that you're running everything off the same domain name if you run into issues with pixel manipulation.
  30. SVG is another 2d drawing platform that is available within the browser, and that doesn't require plug-ins.
    • Graphics are created in SVG by utilising the DOM
    • DOM allows you to access and edit a shape after you've drawn it. This is something that you can't do in canvas
    • In canvas, everything that you draw is created using pixels, so the canvas is completely unaware of what's actually on it
    • SVG is vector graphics, and canvas is bitmap graphics
  31. canvas was created to provide an alternative solution for drawing and animating graphics within a browser. Simple!
  32. One of the most obvious limitations of canvas at the moment is that of performance.
  评论这张
 
阅读(1317)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018