</div><div data-lake-id="027c9a7e8ea47cd7ea402eadeffa1afb"> input.css3btn</div><div data-lake-id="0f8deccf6be7f187d667b4621f90e260"> {</div><div data-lake-id="ec84f73dde63eea3495561404200ea3d"> background: -moz-linear-gradient(270deg, #d2ebf8, #0c8ab5);</div><div data-lake-id="a4e91f457dc1887ef56ebc85eb7edf3d"> background: -webkit-linear-gradient(top, #d2ebf8, #0c8ab5);</div><div data-lake-id="4f76cb7f701dd09e66ca74b77a4fc6f0"> background: -o-linear-gradient(top, #d2ebf8, #0c8ab5);</div><div data-lake-id="1c390b8d4080af361af41088915e2159"> filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#000099CC', EndColorStr='#FF0087B4');</div><div data-lake-id="6c3bbb7a462a19a961e75add63570a34"> border-top: 1px solid #38538c;</div><div data-lake-id="bc996ad5e2e482ae241931b5ad3fc53b"> border-right: 1px solid #1f2d4d;</div><div data-lake-id="fead3ffd581e7314352a1af2339b9c92"> border-bottom: 1px solid #151e33;</div><div data-lake-id="62505f235ddb425c3d890b39c37b77e1"> border-left: 1px solid #1f2d4d;</div><div data-lake-id="5e0cbfbd3e989c5f5e79cddd45feaddb"> border-radius: 4px;</div><div data-lake-id="99f8c38889a77d362391540e37ff260c"> box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px #111111;</div><div data-lake-id="4a9b86bbb157ae488b714194a668aee7"> color: #f0f0f0;</div><div data-lake-id="fd450f350859a06a2dcc5872d5caa683"> font: bold 20px "helvetica neue" , helvetica, arial, sans-serif;</div><div data-lake-id="6b9c14a4038a97739b485e2ab01ecc67"> padding: 10px 0 10px 0;</div><div data-lake-id="af325efe57c7fa97913995a680cbf5dd"> text-align: center;</div><div data-lake-id="fe186443a093d2b7c95dc959961b5692"> text-shadow: 0px -1px 1px #1e2d4d;</div><div data-lake-id="d8fb5d9855013f667e836014a7364543"> width: 150px;</div><div data-lake-id="2ce34020e1052dd997cf1d8c93ac32fd"> background-clip: padding-box;</div><div data-lake-id="c81e777da4000253d5a325e704557ccf"> }</div><div data-lake-id="6b41ff13f6447d953076eca5907c605f"> input.css3btn:hover</div><div data-lake-id="673434e18f2f14e3fff173c2fccbb8cd"> {</div><div data-lake-id="bf73b67ed48bb795852236eb85621c4a"> box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111;</div><div data-lake-id="930150c18f664bd02bb6d726c68a4379"> cursor: pointer;</div><div data-lake-id="cfac6d1751630269687a3d4c073a45a6"> }</div><div data-lake-id="a9a3223457b9256259d73c500e0edfdd"> input.css3btn:active</div><div data-lake-id="a9c7a932b55c957a2289bef949640560"> {</div><div data-lake-id="d4354bdbb13275a345dfb0e83b4af3a9"> box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;</div><div data-lake-id="bb0c1fc548491f38ffca00d1670edca3"> margin-top: 1px;</div><div data-lake-id="ef870ec8e3729171ce496a85f4fceaa8"> }</div><div data-lake-id="217f0009e1bd7ed6a2451878cad2cf81">
color: #CCC;">
Your browser does not support the canvas element.
</div><div data-lake-id="36f06143a1ccda7854bb30cead3d8abf"> var canvas;</div><div data-lake-id="ee987a03ed1f448c5605a8474c14c36d"> var ctx;</div><div data-lake-id="f3fb60cf44b997c8ea8d056eddaa0143"> var px = 0;</div><div data-lake-id="64527391e885fec43d4d6050d8f04e64"> var py = 0;</div><div data-lake-id="6fa987029e40a009c89d8de0e2cf906c"> function init() {</div><div data-lake-id="43f661e112bcf7f74d4264bc441ee300"> canvas = document.getElementById("myCanvas2");</div><div data-lake-id="bd97a3ed6a7af6bd5d91fdb0934ba23a"> ctx = canvas.getContext("2d");</div><div data-lake-id="1651e3df374109bca8daff98ec1d8067"> ctx.strokeStyle = "#fff";</div><div data-lake-id="2d5a1460835260925a5b004a1fca1609"> ctx.translate(70, 70);</div><div data-lake-id="a3325238eae8dc04ef7e9c12d84cc3bf"> }</div><div data-lake-id="31770ec5b171653e21fa6f8bc5870c9e"> init();</div><div data-lake-id="88611a90536d24eda92f44d03040a6e5"> var i = 0;</div><div data-lake-id="b8aceec9e3a2e002c96a26078679b37c"> function drawEllipse(x, y, w, h) {</div><div data-lake-id="e632bcbda4b5c23f9cb47e758fafd32c"> ctx.clearRect(-canvas.width, -canvas.height, 2 * canvas.width, 2 * canvas.height);</div><div data-lake-id="9532a9b8568ca691fe19be2e32c4b9a6"> var k = 0.5522848;</div><div data-lake-id="008b2064f4e95815d3ddeaa888c786a6"> var ox = (w / 2) * k;</div><div data-lake-id="184674f1d825f86abc33560a2514bd45"> var oy = (h / 2) * k;</div><div data-lake-id="e32216ce280c05b80c3ff814dd648a46"> var xe = x + w;</div><div data-lake-id="5891948b134a8849e8dd733c6eec6781"> var ye = y + h;</div><div data-lake-id="5228987f11503eb159df19d73d2530c7"> var xm = x + w / 2;</div><div data-lake-id="87b4a4ccbc77dfcfbf1895167c57443e"> var ym = y + h / 2;</div><div data-lake-id="d4663ebde9bc67234859a2bd75366e70"> ctx.beginPath();</div><div data-lake-id="d11f125ac9e67743bcf864a63fa08bc6"> ctx.moveTo(x, ym);</div><div data-lake-id="836ea188e5f926d70ddb9500d84cc02f"> ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);</div><div data-lake-id="63f272387709c1a9b4344162db5776bf"> ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);</div><div data-lake-id="9a2d06a358ed40b290e13c380178c057"> ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);</div><div data-lake-id="fd13f450c66cbb28ea4177194356588d"> ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);</div><div data-lake-id="25d749f862bae99739a87c3013b84ab6"> ctx.stroke();</div><div data-lake-id="bdccd1e933c0a231e182b33a191d4241"> ctx.translate(x + 70, y + 100);</div><div data-lake-id="a1546c4a473af05fc559256d344e9ff6"> px = -70;</div><div data-lake-id="42346d5b4a1a03b2071b6effa5a30535"> py = -100;</div><div data-lake-id="5fd6e69c3a71ac39aef370c0db6d0bc2"> ctx.rotate(10 * Math.PI * 2 / 360);</div><div data-lake-id="12906b638f6043fd0c6519efe13b8519"> }</div><div data-lake-id="6515a22bfdaaac650a2eb112f9f458bd"> var ct;</div><div data-lake-id="cb6b9084befeef2e5119811093a80770"> var drawAsync = eval(Jscex.compile("async", function (ct) {</div><div data-lake-id="18b7dd04822919317fe645a2a79c7b6d"> while (true) {</div><div data-lake-id="fac6883164103c73b143d0145d22a482"> drawEllipse(px, py, 140, 200)</div><div data-lake-id="f15ab85cd00358cb914a7b3dcce63271"> $await(Jscex.Async.sleep(200, ct));</div><div data-lake-id="40690ccb64652959abeae181ef4cc402"> }</div><div data-lake-id="9b130afe84972b1e23f2baf019e2f3c3"> }))</div><div data-lake-id="a36b3bd854fd1fe93578779327ca46c6"> function Button1_onclick() {</div><div data-lake-id="ccef37edee3f82031bc63a69db358e82"> ct.cancel();</div><div data-lake-id="f7f14b58d7f73ceb668e5a7cb123191d"> }</div><div data-lake-id="cdce045fd0f4856d3c06b32f1800a5f6"> function Button2_onclick() {</div><div data-lake-id="718e5d34cf0dd061ed6446ed1d91e795"> ct = new Jscex.Async.CancellationToken();</div><div data-lake-id="2713407859cbc237d8f6cde1b5f34ad2"> drawAsync(ct).start();</div><div data-lake-id="712eeeb091b468fa1dee4559a92e77a4"> }</div><div data-lake-id="2f89c47716f6082db311bb7300317eea">
