drawview-intro-$11.lzx

<canvas width="100%" height="300" debug="false">
    <class name="circle" extends="drawview" width="200" height="200">
        <attribute name="circlecolor" type="color" value="white"/>
        <attribute name="r" value="100"/>
        <handler name="oncontext">
          this.redraw();
        </handler>
        <handler name="onr">
          this.redraw();
        </handler>
        <method name="redraw">
            if (! this.context) return;
            this.clear();
            this.beginPath();
            this.moveTo(x+r, y);
            var a = Math.tan(22.5 * Math.PI/180);
            for (var angle = 45; angle<=360; angle += 45) {
                // endpoint:
                var endx = r*Math.cos(angle*Math.PI/180);
                var endy = r*Math.sin(angle*Math.PI/180);
                // control:
                // (angle-90 is used to give the correct sign)
                var cx =endx + r*a*Math.cos((angle-90)*Math.PI/180);
                var cy =endy + r*a*Math.sin((angle-90)*Math.PI/180);
                this.quadraticCurveTo(cx+x, cy+y, endx+x, endy+y);
            }
          
            var g = this.createLinearGradient(0, 0, x+r, y+r)
            this.globalAlpha = 1;
            g.addColorStop(0, 0xffffff);
            this.globalAlpha = 0;
            g.addColorStop(1, this.circlecolor);
            this.fillStyle = g;
            this.fill()
            this.globalAlpha = 1;
            this.linewidth= 5;
            this.stroke();
        
        </method>
    </class>

    <circle r="50" x="50" y="50" circlecolor="blue"/>
    <circle x="50" y="50" circlecolor="teal">
       <animatorgroup process="sequential" repeat="Infinity">
        <animator attribute="r" from="20" to="0" duration="3000"/>
        <animator attribute="r" from="0" to="20" duration="3000"/>
      </animatorgroup>
    </circle>
     
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008, 2010 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->