<canvas>
shim using Silverlight.Reload with no silverlight shim Reload with no excanvas shim Reload with both
Native <canvas> / excanvas | Silverlight <canvas> | Code |
context.fillRect(0, 0, 200, 200); context.translate(100, 100); context.strokeStyle = "orange"; context.lineWidth = 2; var R = 36; var r = 8; var d = 15; var t = 0; var lastx = R + d - r; var lasty = 0; var id = window.setInterval(function() { context.beginPath(); context.moveTo(lastx, lasty); var x = ((R - r) * Math.cos(t)) + (d * Math.cos(((R - r) / r) * t)); var y = ((R - r) * Math.sin(t)) - (d * Math.sin(((R - r) / r) * t)); context.lineTo(x, y); context.stroke(); t += 0.1; lastx = x; lasty = y; if ((2 * 2 * Math.PI) < (t - 0.1)) { window.clearInterval(id); } }, 50); var sl = new Image(); sl.onload = function() { for (i = 0; i < 8; i++) { context.save(); context.rotate((i / 8) * (2 * Math.PI)); context.globalAlpha = (8 - i) / 4; context.drawImage(sl, -25, -100, 50, 50); context.restore(); } }; sl.src = "Silverlight.png"; |
||
processing.js example// All Examples Written by Casey Reas and Ben Fry // unless otherwise stated. int xspacing = 8; // How far apart should each horizontal location be spaced int w; // Width of entire wave float theta = 0.0; // Start angle at 0 float amplitude = 75.0; // Height of wave float period = 500.0; // How many pixels before the wave repeats float dx; // Value for incrementing X, to be calculated as a function of period and xspacing float[] yvalues; // Using an array to store height values for the wave (not entirely necessary) void setup() { size(200,200); frameRate(30); colorMode(RGB,255,255,255,100); smooth(); w = width+16; dx = (TWO_PI / period) * xspacing; yvalues = new float[w/xspacing]; } void draw() { background(0); calcWave(); renderWave(); } void calcWave() { // Increment theta (try different values for 'angular velocity' here theta += 0.02; // For every x value, calculate a y value with sine function float x = theta; for (int i = 0; i < yvalues.length; i++) { yvalues[i] = sin(x)*amplitude; x+=dx; } } void renderWave() { // A simple way to draw the wave with an ellipse at each location for (int x = 0; x < yvalues.length; x++) { noStroke(); fill(255,50); ellipseMode(CENTER); ellipse(x*xspacing,width/2+yvalues[x],16,16); } } |
||
context.fillStyle = "rgb(0, 162, 232)"; context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255, 127, 39, 0.8)"; context.fillRect(25, 25, 100, 100); context.strokeStyle = "rgb(255, 174, 201)"; context.lineWidth = 15; context.strokeRect(50, 50, 100, 100); context.restore(); context.beginPath() context.moveTo(75, 75); context.lineTo(175, 75); context.lineTo(75, 175); context.fill(); var gradient = context .createLinearGradient(150, 100, 150, 200); gradient.addColorStop(0/5, "red"); gradient.addColorStop(1/5, "orange"); gradient.addColorStop(2/5, "yellow"); gradient.addColorStop(3/5, "green"); gradient.addColorStop(4/5, "blue"); gradient.addColorStop(5/5, "purple"); context.fillStyle = gradient; context.fillRect(100, 100, 100, 100); |