HTML5 Canvas Web图形界面的未来.pdfVIP

HTML5 Canvas The Future of Graphics on the Web Rob Hawkes @robhawkes for you social media folk if you want to see more Theplace tobe Yes, that’sme lookinghorrible AKA.Layabout Guessmy middle name “Canvas is my favourite part of HTML5, alongside its video and audio support” Myself, at some point So what is canvas? An overview of canvas ✽ 2D drawing platform within the browser ✽ Uses nothing more than JavaScript and HTML – no plugins ✽ Extensible through a JavaScript API ✽ Created by Apple for dashboard widgets ✽ Now openly developed as a W3C spec Bitmap vs. vector ✽ Canvas is a bitmap system • Everything is drawn as a single, flat, picture • Changes require the whole picture to be redrawn ✽ SVG is a vector system • Elements to be drawn are separate DOM objects • They can be manipulated individually ✽ SVG isn’t part of HTML5 • Future isn’t as rosy as canvas’ Browser support ✽ Most modern browsers • Safari • Chrome • Firefox • Opera ✽ No Internet Explorer support by default • However, there are hacks to get it working What is it for? Data visualisation Animated graphics Web applications Games Here’s something I made earlier Getting started Created using the new HTML5 tag canvas height=”600” width=”800”/canvas Heightand width need tobesetexplicitly (0,0) x y Uses the standard screen-based coordinate system Everything is drawn onto the 2D rendering