Download to read offline
![SVG? (Schtirlitz V Gorode)
SVG is a language for describing two-dimensional graphics.
As a standalone format or when mixed with other XML, it
uses the XML syntax [XML10]. When mixed with HTML5, it
uses the HTML5 syntax [HTML]. …
SVG drawings can be interactive and dynamic. Animations
can be defined and triggered either declaratively (i.e., by
embedding SVG animation elements in SVG content) or via
scripting.](https://image.slidesharecdn.com/html5graphics-161025115927/85/Academy-PRO-HTML5-API-graphics-24-320.jpg)
![D3
// Update…
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter().append("p")
.text(function(d) { return d; });
// Exit…
p.exit().remove();](https://image.slidesharecdn.com/html5graphics-161025115927/85/Academy-PRO-HTML5-API-graphics-37-320.jpg)
![SVG? (Schtirlitz V Gorode)
SVG is a language for describing two-dimensional graphics.
As a standalone format or when mixed with other XML, it
uses the XML syntax [XML10]. When mixed with HTML5, it
uses the HTML5 syntax [HTML]. …
SVG drawings can be interactive and dynamic. Animations
can be defined and triggered either declaratively (i.e., by
embedding SVG animation elements in SVG content) or via
scripting.](https://image.slidesharecdn.com/html5graphics-161025115927/75/Academy-PRO-HTML5-API-graphics-24-2048.jpg)
![D3
// Update…
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter().append("p")
.text(function(d) { return d; });
// Exit…
p.exit().remove();](https://image.slidesharecdn.com/html5graphics-161025115927/75/Academy-PRO-HTML5-API-graphics-37-2048.jpg)
Uploaded byBinary Studio
Academy PRO: HTML5 API graphics
The document discusses various HTML5 graphics APIs, including Canvas, SVG, and WebGL, highlighting their features and use cases. Canvas allows pixel manipulation and is suitable for gaming and animations, while SVG, described as an XML-based graphic format, is great for interactive and scalable graphics despite being larger in file size. WebGL enables 3D graphics rendering using the GPU within a browser context, offering a powerful standard for web applications but currently lacks support across all browsers.
More Related Content
Similar to Academy PRO: HTML5 API graphics
![[GREE Tech Talk #08] You Don't Know WebGL](https://cdn.slidesharecdn.com/ss_thumbnails/youdontknowwebgl-150618071531-lva1-app6891-150619005902-lva1-app6892-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
More from Binary Studio
Academy PRO: HTML5 API graphics
- 1.
- 2.
- 3.
- 4. What is canva?z? "Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.” <canvas></canvas>
- 5.
- 6. Let’s look atexample... http://codepen.io/anon/pen/grWvmv
- 7. Canvas can beused in Gaming Advertising Data Representation. Education and Training. Art and Decoration..
- 8.
- 9. Why canvas? Unlike SVGis much more convenient to deal with a large number of elements; It has hardware acceleration You can manipulate each pixel You can apply image processing filters There are a lot of libraries
- 10. Why not? Loading theCPU and RAM; Due to the limitations of the garbage collector, there is no way to clear the memory; It is necessary to handle events with objects Poor performance at high resolution We have to draw in each element separately
- 11. Canvas context var canvas= document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");
- 12. Default properties ❖Size -300x150 ❖id ❖Checking for availability
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 23.
- 24. SVG? (Schtirlitz VGorode) SVG is a language for describing two-dimensional graphics. As a standalone format or when mixed with other XML, it uses the XML syntax [XML10]. When mixed with HTML5, it uses the HTML5 syntax [HTML]. … SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG content) or via scripting.
- 25.
- 26. Viewbox <svg width="800" height="600"viewbox="0 0 400 300"> <!-- SVG content drawn onto the SVG canvas --> </svg>
- 27.
- 28. SVG Any size -same quality Search engine bots Independence from JavaScript
- 30. SVG cons Big filesize. Maps - small elements require reading whole doc. Less details - more size
- 31.
- 32. Path <path d="M10 10h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
- 34.
- 35. SVG vs IconFont https://github.com/blog/2112-delivering-octicons-with-svg
- 36.
- 37. D3 // Update… var p= d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(d) { return d; }); // Enter… p.enter().append("p") .text(function(d) { return d; }); // Exit… p.exit().remove();
- 38.
- 45.
- 46.
- 47.
- 48. What the heckis WebGL?? WebGL allows web content to use the API, based on OpenGL ES 2.0, for rendering three-dimensional graphics without the use of plug-ins in the HTML canvas element in browsers that implement support for it. WebGL programs consist of control code written in JavaScript code and special effects (shader code) that runs on the GPU. WebGL elements can be mixed with other HTML elements, and assembled with other parts of a web page or a web page background.
- 49. WebGL is context vargl; try { gl = canvas.getContext("experimental-webgl"); } catch(e) {}
- 50. Uses GLSL (OpenGL ShadingLanguage)
- 51. WebGL pros Shows apromise of 3D with dramatically lowered friction. No client or plugin install necessary. Royalty-free open standard shepherded by the Kronos consortium -http://www.khronos.org/ Uses HTML5's canvas element and so is part of a larger change taking place on the web rather than an isolated technology. Browser makers Mozilla, Opera, Apple & Google are all onboard. Transparent development of spec. Majority of discussion takes place atwww.khronos.org/webgl/public-mailing-list/ Gives access to the power of a computer's graphics hardware from within scripts on web pages.
- 52. Web GL cons Notyet available beyond betaversions of Firefox, Opera, Safari and Chrome browsers. Later this year seems to be current best guess for spec hitting v1.0. Seems that the remaining issues are related to getting security right. Good news is that as soon as spec is signed of on then implementations should be ready to roll out. Microsoft has not signed on. The way to get it to run in IE will likely by with the Chrome Frame plugin. Depends on having OpenGL 2.0 drivers present which many computers will not have.http://code.google.com/p/anglepr... is an open source project by Google to address this issue. Despite recent improvements Javascript may still feel too slow or just plain unfamiliar to people used to writing rich 3D applications. Most developer libraries are still in an early stage. Partial list:http://www.khronos.org/webgl/wik...
- 53.
- 57. Diff One main differenceis that a vertex shader can manipulate the attributes of vertices. which are the corner points of your polygons. The fragment shader on the other hand takes care of how the pixels between the vertices look. They are interpolated between the defined vertices following specific rules.
- 58.
- 59.
- 60. <script id="vshader" type="x-shader/x-vertex"> uniformmat4 u_modelViewProjMatrix; uniform mat4 u_normalMatrix; uniform vec3 lightDir; attribute vec3 vNormal; attribute vec4 vTexCoord; attribute vec4 vPosition; varying float v_Dot; varying vec2 v_texCoord; void main() { gl_Position = u_modelViewProjMatrix * vPosition; v_texCoord = vTexCoord.st; vec4 transNormal = u_normalMatrix * vec4(vNormal, 1); v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); } </script>
- 61. <script id="fshader" type="x-shader/x-fragment"> precisionmediump float; uniform sampler2D sampler2d; varying float v_Dot; varying vec2 v_texCoord; void main() { vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t); vec4 color = texture2D(sampler2d, texCoord); color += vec4(0.1, 0.1, 0.1, 1); gl_FragColor = vec4(color.xyz * v_Dot, color.a); }
- 62. WebGL libs glMatrix JavaScriptMatrix and Vector library for High Performance WebGL apps Sylvester An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust. A little bit more https://www.khronos.org/webgl/wiki/User_Contributions#Frameworks
- 63.
- 64.