Dziś trochę notatek uzupełniających o Canvas w HTML5 (z Deep Dive Into HTML5 <canvas>) oraz trochę innych ciekawych informacji.
Canvas
Kompozycje
Różnice w sposobie rysowania pomiędzy niektórymi przeglądarkami
Saving & restoring
- The current transformation matrix.
- The current clipping region.
- The current values of the following attributes: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.
Security model
- Canvas also allows drawing cross-domain images/videos
- However, it has built-in security protection against third-parties saving cross-domain pixels
- Canvas protects against Information Leakage attacks
- Canvas has a concept of origin-clean flag
- origin-clean is set false if a cross-domain IMG or VIDEO is used
- A SECURITY_ERR exception is raised, if one tries to save the Canvas pixels if the Canvas origin-clean is false:
- toDataURL()
- getImageData()
Accessability
- Fallback Content Focus (spec stable)
- When the Canvas has embedded content, it can be keyboard-focusable via accessibility tools.
- Focus Management (spec unstable)
- A focus ring can be drawn on the Canvas corresponding to embedded content in the Canvas fallback.
- Fallback Content Focus
- Access to the DOM tree within <canvas></canvas> tags
- Recall, elements within the <canvas></canvas> tags are considered Fallback content and are only displayed on screen when Canvas is not supported.
- This same Fallback area can be used for Accessibility description of what is on the Canvas
Najlepsze praktyki
- Detekcja
var canvas = document.createElement(“canvas”);
if (canvas && canvas.getContext && canvas.getContext(“2d”))
{
// Code requiring canvas support
} else {
// Canvas isn’t available.
// Put non-canvas fallback here
}
- Zawsze dodawać !DOCTYPE. Dla HTML5 oznacza to <!DOCTYPE html>
- Make Fewer Calls to Video Memory
- Reading and writing to video memory is slow.
- DON’T: Repeatedly call getImageData() or putImageData() for small amounts of data.
- DO: Request larger area of data with fewer calls.
- Cache Pixel Array Data
- Accessing ImageData.data[i] requires DOM access to fetch and index the object
- DON’T: Repeatedly access ImageData.data[i] for data.
- DO: Cache the ImageData.data in a Javascript object.
- Canvas objects as D3D textures
- Canvas objects and patterns are implemented as D3D textures.
- DON’T: Create new Canvas objects/patterns every frame.
- DO: Re-use existing Canvas objects/patterns.
- DON’T: Clear Canvas by setting dimensions every frame.
- DO: Call clearRect() to clear the Canvas.
- Drawing the Canvas to itself
- Re-using a Canvas object is faster than creating an intermediate texture.
- DON’T: drawImage() a Canvas to itself, as this requires creating intermediate texture.
- DO: Use multiple Canvas objects instead.
- Avoid clearRect() with Transforms
- AVOID: Setting a geometric clip, rotation or skew transform when calling clearRect() - it will be much slower.
- AVOID: Using clearRect() when clearing paths on non-whole pixel boundaries.
- Avoid changing attribute settings
- Avoid setting attributes unnecessarily
- While costs are usually small, avoiding all unnecessary DOM calls will help in high performance applications.
- Some attributes are slower to set than others.
- Memory Management
- DON’T: Hold references to objects that cannot be garbage collected
- Will cause associated resources to be held in memory
- DON’T: Unintentionally Cache graphics objects in globals or expandos
- Objects such as canvas, pattern, image data, and gradients
- SetTimeOut() and SetInterval()
- Monitors typically display at 60Hz or 16.7ms periods.
- For graphics timers, no point in using a higher resolution
- DO: Use a 17ms interval for setTimeOut() and SetInterval(). They take integer values – round up 16.7ms.
- DON’T: Use a 1ms interval for timers
- Using a smaller interval than 17ms has no benefit: it results in choppy animation and reduced battery life
Zastosowanie
- Canvas can draw SVG, images, videos and other Canvases on Canvas.
- You can use Canvas and SVG in the same application complimenting each other.
Coś ponadto:
Geolokalizacja - micro format
Współdziałanie Knockout z ASP.NET MVC (który automatycznie obsługuje serializację JSON <-> obiektów .NET)
Posty
Brak komentarzy:
Prześlij komentarz