diff options
author | caryclark <caryclark@google.com> | 2015-11-16 13:36:08 -0800 |
---|---|---|
committer | Commit bot <commit-bot@chromium.org> | 2015-11-16 13:36:08 -0800 |
commit | 3257c12220c411cc9db564e6bf02baba4c1bc061 (patch) | |
tree | de67bc0cbdcaba91f0a3ff18ddfc406e08bc17c7 /experimental/docs/canvasBackend.js | |
parent | 73d882e13fc54ff9ecc53a83838c2d900ebf8397 (diff) |
runs some sample animations side by side in canvas and svg
TBR=fmalita@chromium.org
Review URL: https://codereview.chromium.org/1342523002
Diffstat (limited to 'experimental/docs/canvasBackend.js')
-rw-r--r-- | experimental/docs/canvasBackend.js | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/experimental/docs/canvasBackend.js b/experimental/docs/canvasBackend.js new file mode 100644 index 0000000000..0574813f22 --- /dev/null +++ b/experimental/docs/canvasBackend.js @@ -0,0 +1,167 @@ +var canvas; +var ctx; +var canvasGradients = {}; + +function canvas_rbga(color) { + var a = canvas_opacity(color); + var r = (color >> 16) & 0xFF; + var g = (color >> 8) & 0xFF; + var b = (color >> 0) & 0xFF; + return "rgba(" + r + "," + g + "," + b + "," + a + ")"; +} + +function canvas_opacity(color) { + var a = (color >> 24) & 0xFF; + return a / 255.; +} + +function displayCanvas(displayList) { + if (displayList.clear) { + ctx.clearRect(0, 0, canvas.width, canvas.height); + } + for (var index = 0; index < displayList.length; ++index) { + drawToCanvas(displayList[index]); + } +} + +function drawToCanvas(action) { + ctx.save(); + var paint = paintToCanvas(action.paint); + var draw = action.draw; + if ('string' == typeof(draw)) { + draw = (new Function("return " + draw))(); + } + if (isArray(draw)) { + assert(draw.length > 0); + var picture = 'draw' in draw[0]; + if (picture) { + for (var index = 0; index < draw.length; ++index) { + drawToCanvas(draw[index]); + } + return; + } + ctx.beginPath(); + for (var index = 0; index < draw.length; ++index) { + for (var prop in draw[index]) { + var v = draw[index][prop]; + switch (prop) { + case 'arcTo': + ctx.arcTo(v[0], v[1], v[2], v[3], v[4]); + break; + case 'close': + ctx.closePath(); + break; + case 'cubic': + ctx.moveTo(v[0], v[1]); + ctx.bezierCurveTo(v[2], v[3], v[4], v[5], v[6], v[7]); + break; + case 'line': + ctx.moveTo(v[0], v[1]); + ctx.lineTo(v[2], v[3]); + break; + case 'quad': + ctx.moveTo(v[0], v[1]); + ctx.quadraticCurveTo(v[2], v[3], v[4], v[5]); + break; + default: + assert(0); + } + } + } + if ('fill' == paint.style) { + ctx.fill(); + } else { + assert('stroke' == paint.style); + ctx.stroke(); + } + } else { + assert('string' in draw); + if ('fill' == paint.style) { + ctx.fillText(draw.string, draw.x, draw.y); + } else { + assert('stroke' == paint.style); + ctx.strokeText(draw.string, draw.x, draw.y); + } + } + ctx.restore(); +} + +function keyframeCanvasInit(displayList, first) { + if ('canvas' in first && 'clear' == first.canvas) { + displayList.clear = true; + } +} + +function paintToCanvas(paint) { + var color; + var inPicture = 'string' == typeof(paint); + if (inPicture) { + paint = (new Function("return " + paint))(); + assert('object' == typeof(paint) && !isArray(paint)); + } + if ('gradient' in paint) { + var gradient = paint.gradient.split('.'); + var gradName = gradient[1]; + if (!canvasGradients[gradName]) { + var g = window[gradient[0]][gradient[1]]; + var grad = ctx.createRadialGradient(g.cx, g.cy, 0, g.cx, g.cy, g.r); + var stopLen = g.stops.length; + for (var index = 0; index < stopLen; ++index) { + var stop = g.stops[index]; + var color = canvas_rbga(stop.color); + grad.addColorStop(index, color); + } + canvasGradients[gradName] = grad; + } + color = canvasGradients[gradName]; + if (!inPicture) { + ctx.globalAlpha = canvas_opacity(paint.color); + } + } else { + color = canvas_rbga(paint.color); + } + if ('fill' == paint.style) { + ctx.fillStyle = color; + } else if ('stroke' == paint.style) { + ctx.strokeStyle = color; + } else { + ctx.globalAlpha = canvas_opacity(paint.color); + } + if ('strokeWidth' in paint) { + ctx.lineWidth = paint.strokeWidth; + } + if ('typeface' in paint) { + var typeface = typefaces[paint.typeface]; + var font = typeface.style; + if ('textSize' in paint) { + font += " " + paint.textSize; + } + if ('family' in typeface) { + font += " " + typeface.family; + } + ctx.font = font; + if ('textAlign' in paint) { + ctx.textAlign = paint.textAlign; + } + if ('textBaseline' in paint) { + ctx.textBaseline = paint.textBaseline; + } + } + return paint; +} + +function setupCanvas() { + canvas = document.getElementById("canvas"); + ctx = canvas ? canvas.getContext("2d") : null; + assert(ctx); + var resScale = window.devicePixelRatio ? window.devicePixelRatio : 1; + var unscaledWidth = canvas.width; + var unscaledHeight = canvas.height; + canvas.width = unscaledWidth * resScale; + canvas.height = unscaledHeight * resScale; + canvas.style.width = unscaledWidth + 'px'; + canvas.style.height = unscaledHeight + 'px'; + if (resScale != 1) { + ctx.scale(resScale, resScale); + } +} |