canvas, svg, webgl, css3, webevent

HTML5 UI Specification2011 / 7 / 11

kth / 기술연구소웹플렛폼Lab / 김민태 차장[email protected] / [email protected]

@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>

restoresaverotatescalesetTransformtransformtranslatecreateLinearGradientcreateRadioGradientcreatePatternclearRectfillRectstrokeRectarcarcTobeginPathbezierCurveTo

clipclosePathfilllineTomoveToquadraticCurveTorectstrokeisPositionPathfillTextmeasureTextstrokeTextdrawImagecreateImageDatagetImageDataputImageData

CanvasGradientCanvasPatternTextMetrics

ImageDataCanvasPixelArray

fonttextAligntextBaseAlign

shadowBlurshadowColorshadowOffsetXshadowOffsetY

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#dom-context-2d-restore




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.851 86.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.092 82.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.118 125.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.471 134.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.872 129.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.009 110.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.154 118.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.066 105.749 -119.154 118.335z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-108.42 118.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.727 103.207 -153.862 87.326 -108.42 118.949z","stroke-width":"0.172",stroke:"#000",fill:"#fff"},{type:"path",path:"M-128.2 90C-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.269 98.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.199 103.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.6 118.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 -75 196.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.8 216.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.2 272.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.6 319.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.6 336.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.6 360.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.001C31 344.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.801 57.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.401 71 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 73 324.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.201 75.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.601 298.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.801 119.001 315.601C119.001 315.601 109.001 286.401 104.601 283.601C104.601 283.601 113.001 247.201 154.201 262.801C154.201 262.801 161.001 280.001 165.401 261.601C165.401 261.601 178.201 255.201 189.401 282.801C189.401 282.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 Call

Overrall File Structure

WOFF File - WOFFHeader - TableDirectory - FontTables - ExtendedMetadata - PrivateData

Data Types - UInt32 - UInt16

WebEvent

Touch Events SpecificationStatus: Editor's Draft

Touch Interface clientX, clientY, force, identifier, pageX, pageY, radiusX, radiusY, rotationAngle, screenX, screenY

Touch List Interface length, getter Touch item, identifiedTouch

Touch Event touchs, targetTouches, changedTouches, altKey, metaKey, ctrlKey, shiftKey, relatedTarget, initTouchEvent()

Document Touch createTouch(), createTouchList()

http://dvcs.w3.org/hg/webevents/raw-file/default/touchevents.html#widl-TouchList-item-getter-Touch-unsigned-long-index

http://dvcs.w3.org/hg/webevents/raw-file/default/touchevents.html#widl-TouchList-item-getter-Touch-unsigned-long-index

감사합니다@ibare

CANVASSVG

WebGLCSS3WOFF

WebEvent

canvas, svg, webgl, css3, webevent

Technology