CANVAS, SVG, WebGL, CSS3, WebEvent

HTML5 UI Specification2011 / 7 / 11kth / 기술연구소웹플렛폼Lab / 김민태 차장ibare77@gmail.com / ibare@kthcorp.com@ibare / http://www.ibare.kr

HTML5 2D ContextStatus: Last Call<html> <head> <script type="text/javascript"> function draw(){ var canvas = document.getElementById(tutorial); if (canvas.getContext){ var ctx = canvas.getContext(2d); } } </script> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body></html>

restore clipsave CanvasGradient closePathrotate CanvasPattern fillscale TextMetrics lineTosetTransform font moveTotransform textAlign quadraticCurveTotranslate textBaseAlign rectcreateLinearGradient strokecreateRadioGradient isPositionPathcreatePattern shadowBlur fillTextclearRect shadowColor measureTextfillRect shadowOffsetX strokeTextstrokeRect shadowOffsetY drawImagearc createImageData ImageDataarcTo getImageData CanvasPixelArraybeginPath putImageDatabezierCurveTo

Scalable Vector Graphics (SVG) 1.1 (Second Edition)Status: Proposed Recommendation

<body><svg width="400" height="300"> <text x="100" y="100" font-size=”50px” fill=”rgba(0,0,255,1)” stroke=”red” onclick="something();"> Hello World! </text></svg></body>

var tiger=[0,0,600,600,{type:"path",path:"M-122.304 84.285C-122.304 84.285 -122.203 86.179 -123.027 86.16C-123.85186.141 -140.305 38.066 -160.833 40.309C-160.833 40.309 -143.05 32.956 -122.304 84.285z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-118.774 81.262C-118.774 81.262 -119.323 83.078 -120.09282.779C-120.86 82.481 -119.977 31.675 -140.043 26.801C-140.043 26.801 -120.82 25.937 -118.774 81.262z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-91.284 123.59C-91.284 123.59 -89.648 124.55 -90.118125.227C-90.589 125.904 -139.763 113.102 -149.218 131.459C-149.218 131.459 -145.539 112.572 -91.284 123.59z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-94.093 133.801C-94.093 133.801 -92.237 134.197 -92.471134.988C-92.704 135.779 -143.407 139.121 -146.597 159.522C-146.597 159.522 -149.055 140.437 -94.093 133.801z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-98.304 128.276C-98.304 128.276 -96.526 128.939 -96.872129.687C-97.218 130.435 -147.866 126.346 -153.998 146.064C-153.998 146.064 -153.646 126.825 -98.304 128.276z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-109.009 110.072C-109.009 110.072 -107.701 111.446-108.34 111.967C-108.979 112.488 -152.722 86.634 -166.869 101.676C-166.869 101.676 -158.128 84.533 -109.009110.072z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-116.554 114.263C-116.554 114.263-115.098 115.48 -115.674 116.071C-116.25 116.661 -162.638 95.922 -174.992 112.469C-174.992 112.469 -168.247 94.447-116.554 114.263z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-119.154 118.335C-119.154118.335 -117.546 119.343 -118.036 120.006C-118.526 120.669 -167.308 106.446 -177.291 124.522C-177.291 124.522 -173.066105.749 -119.154 118.335z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-108.42118.949C-108.42 118.949 -107.298 120.48 -107.999 120.915C-108.7 121.35 -148.769 90.102 -164.727 103.207C-164.727103.207 -153.862 87.326 -108.42 118.949z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-128.290C-128.2 90 -127.6 91.8 -128.4 92C-129.2 92.2 -157.8 50.2 -177.001 57.8C-177.001 57.8 -161.8 46 -128.2 90z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-127.505 96.979C-127.505 96.979 -126.53 98.608 -127.26998.975C-128.007 99.343 -164.992 64.499 -182.101 76.061C-182.101 76.061 -169.804 61.261 -127.505 96.979z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-127.62 101.349C-127.62 101.349 -126.498 102.88 -127.199103.315C-127.9 103.749 -167.969 72.502 -183.927 85.607C-183.927 85.607 -173.062 69.726 -127.62 101.349z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-129.83 103.065C-129.327 109.113 -128.339 115.682 -126.6118.801C-126.6 118.801 -130.2 131.201 -121.4 144.401C-121.4 144.401 -121.8 151.601 -120.2 154.801C-120.2 154.801-116.2 163.201 -111.4 164.001C-107.516 164.648 -98.793 167.717 -88.932 169.121C-88.932 169.121 -71.8 183.201 -75196.001C-75 196.001 -75.4 212.401 -79 214.001C-79 214.001 -67.4 202.801 -77 219.601L-81.4 238.401C-81.4 238.401 -55.8216.801 -71.4 235.201L-81.4 261.201C-81.4 261.201 -61.8 242.801 -69 251.201L-72.2 260.001C-72.2 260.001 -29 232.801-59.8 262.401C-59.8 262.401 -51.8 258.801 -47.4 261.601C-47.4 261.601 -40.6 260.401 -41.4 262.001C-41.4 262.001 -62.2272.401 -65.8 290.801C-65.8 290.801 -57.4 280.801 -60.6 291.601L-60.2 303.201C-60.2 303.201 -56.2 281.601 -56.6319.201C-56.6 319.201 -37.4 301.201 -49 322.001L-49 338.801C-49 338.801 -33.8 322.401 -40.2 335.201C-40.2 335.201-30.2 326.401 -34.2 341.601C-34.2 341.601 -35 352.001 -30.6 340.801C-30.6 340.801 -14.6 310.201 -20.6 336.401C-20.6336.401 -21.4 355.601 -16.6 340.801C-16.6 340.801 -16.2 351.201 -7 358.401C-7 358.401 -8.2 307.601 4.6 343.601L8.6360.001C8.6 360.001 11.4 350.801 11 345.601C11 345.601 25.8 329.201 19 353.601C19 353.601 34.2 330.801 31 344.001C31344.001 23.4 360.001 25 364.801C25 364.801 41.8 330.001 43 328.401C43 328.401 41 370.802 51.8 334.801C51.8 334.80157.4 346.801 54.6 351.201C54.6 351.201 62.6 343.201 61.8 340.001C61.8 340.001 66.4 331.801 69.2 345.401C69.2 345.40171 354.801 72.6 351.601C72.6 351.601 76.6 375.602 77.8 352.801C77.8 352.801 79.4 339.201 72.2 327.601C72.2 327.601 73324.401 70.2 320.401C70.2 320.401 83.8 342.001 76.6 313.201C76.6 313.201 87.801 321.201 89.001 321.201C89.001 321.20175.4 298.001 84.2 302.801C84.2 302.801 79 292.401 97.001 304.401C97.001 304.401 81 288.401 98.601 298.001C98.601298.001 106.601 304.401 99.001 294.401C99.001 294.401 84.6 278.401 106.601 296.401C106.601 296.401 118.201 312.801119.001 315.601C119.001 315.601 109.001 286.401 104.601 283.601C104.601 283.601 113.001 247.201 154.201262.801C154.201 262.801 161.001 280.001 165.401 261.601C165.401 261.601 178.201 255.201 189.401 282.801C189.401282.801 193.401 269.201 192.601 266.401C192.601 266.401 199.401 267.601 198.601 266.401C198.601 266.401 211.801

Raphaël JS

OpenGL ES 2.0GLSL (OpenGL Shading Language)SpiderGLGLGEC3DLSceneJS

Cascading Style Sheets (CSS)CSS Style Attributes (Candidate Recommendation)Media Queries (Candidate Recommendation)Selectors Level 3 (Proposed Recommendation)CSS Color Module Level 3 (Recommendation)CSS Text Level 3 (Working Draft)CSS Multi-column Layout Module (Candidate Recommendation)CSS Fonts Module Level 3 (Working Draft)Flexible Box Layout Module (Working Draft)CSS Backgrounds and Borders Module Level 3 (Candidate Recommendation)CSS Namespaces Module (Candidate Recommendation)CSSOM (Working Draft)

Web Open Font Format File Format 1.0Status: Last CallOverrall File StructureWOFF File - WOFFHeader - TableDirectory - FontTables - ExtendedMetadata - PrivateDataData Types - UInt32 - UInt16

WebEvent

Touch Events SpecificationStatus: Editors DraftTouch Interface clientX, clientY, force, identifier, pageX, pageY, radiusX, radiusY, rotationAngle, screenX, screenYTouch List Interface length, getter Touch item, identifiedTouchTouch Event touchs, targetTouches, changedTouches, altKey, metaKey, ctrlKey, shiftKey, relatedTarget, initTouchEvent()Document Touch createTouch(), createTouchList()

감사합니다 @ibare

CANVAS SVG WebGL CSS3 WOFFWebEvent

CANVAS, SVG, WebGL, CSS3, WebEvent

by 민태 김 on Jul 11, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 37

Statistics

CANVAS, SVG, WebGL, CSS3, WebEvent Presentation Transcript