I'm trying to rotate a text on the click event. It has been achieved but text fliers on rotation in Google Chrome This works fine in Mozilla How do I stop this flickering of text? I do not want to slow down the rotation and want rotation at the same speed so that I do not want to change the duration of the transition. help please. Code
& lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; Body {margin: 0 px; Padding: 0 pixels; } Canvas {boundary: 1 px solid # 9C9898; } & Lt; / Style & gt; & Lt; Script src = "http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; Window.onload = function () {var angle = 0; Var Step = New Kinetic.Stage ({Container: "Container", Width: 578, Height: 200}); Var layer = new kinetic Layers (); Var text = new Kinetic.Text ({x: 225, y: 80, text: "simple", fontSize: 12, fontFamily: "calibri", textfile: "black"}); Text.on ("click", function () {angle + = 1. text in transsection ({rotation: Math.PI * angle / 2, duration: 1});}); Layer.add (text); Stage.add (layer); } & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "container" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
Check your Chrome canvas settings in Chrome: // flags
Ensure that "GPU compositing on all pages" is disabled
Ensure that "Enable Quick CSS Animation" is disabled
Comments
Post a Comment