Hochwertiger HTML5 und Javascript Code von dem Designbüro Standardabweichung aus München

context.lineWidth = 1; context.strokeStyle = '#FF0000'; context.save(); //Speichern des aktuellen Transformationszustandes //TRANSFORMATION AUF BASIS DER AKTUELLEN MATRIX var scaleX = 1.5; var scaleY = 1.5; var skewX = 0; var skewY = 0; var translateX = 10; var translateY = 10; for(var i=0, length=10; i < length; i++){ context.beginPath(); context.arc(100, 100, 50, 0, 2 * Math.PI); context.stroke(); context.transform(scaleX, skewX, skewY, scaleY, translateX, translateY); } context.restore(); //Wiederherstellen des gespeicherten Transformationszustandes //ANWENDEN EINER NEUEN TRANSFORMATIONSMATRIX context.save(); //Speichern des aktuellen Transformationszustandes var scaleX = 1.5; var scaleY = 1.5; var skewX = 0; var skewY = 0; var translateX = 10; var translateY = 10; for(var i=0, length=10; i < length; i++){ scaleX += 0.25; translateX += 5; translateY += 5; context.beginPath(); context.arc(100, 100, 50, 0, 2 * Math.PI); context.stroke(); context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY); } context.restore(); //Wiederherstellen des gespeicherten Transformationszustandes