Silverlight开发历程—（利用画刷制作星光特效）

最新推荐文章于 2012-07-01 10:23:00 发布

原创最新推荐文章于 2012-07-01 10:23:00 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#silverlight

Silverlight 4.0 开发学习历程专栏收录该内容

35 篇文章

订阅专栏

本文展示了如何使用Canvas元素结合星光特效、水平光、垂直光和放射光，通过设置背景渐变、椭圆填充的径向渐变来创建视觉上的动态效果。通过调整颜色、透明度和位置参数，实现独特的视觉体验。

直接上代码，是几种效果的组合体。

<Canvas x:Name="LayoutRoot">
        <!--产生星光特效-->
        <Canvas.Background>
            <LinearGradientBrush>
                <GradientStop Color="Blue" Offset="0.0" />
                <GradientStop Color="DeepSkyBlue" Offset="1.0" />
            </LinearGradientBrush>
        </Canvas.Background>
        <!--产生水平光-->
        <Ellipse Width="250" Height="10" Canvas.Left="60" Canvas.Top="125" >
            <Ellipse.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#FFFFFFFF" Offset="0" />
                    <GradientStop Color="#00FFFFFF" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        
        <!--产生垂直光-->
        <Ellipse Width="10" Height="250" Canvas.Left="180" Canvas.Top="20" >
            <Ellipse.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#FFFFFFFF" Offset="0" />
                    <GradientStop Color="#00FFFFFF" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <!--产生放射光-->
        <Ellipse Width="120" Height="120" Canvas.Left="125" Canvas.Top="70" >
            <Ellipse.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#FFFFFFFF" Offset="0" />
                    <GradientStop Color="#00FFFFFF" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Canvas>

运行结果：