应用2-制作简易版奥运五环

这里用Ellipse元素对象做了一个简单的应用,奥运五环.将代码1粘贴到入门1中的myxaml.xaml文件,后双击入门1中的SampleHTMLPage.html即可看到图形,

代码1:
============================================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" Background="White" >

    <Canvas>
        <Ellipse Canvas.Left="15" Canvas.Top="50" Width="30" Height="30" Stroke="Blue" StrokeThickness="2.5" >
      <Ellipse.RenderTransform>
          <ScaleTransform ScaleX="2.8" ScaleY="2.8"/>
      </Ellipse.RenderTransform>
  </Ellipse>
    </Canvas>

    <Canvas>
        <Ellipse Canvas.Left="58" Canvas.Top="95" Width="30" Height="30" Stroke="Yellow" StrokeThickness="2.5" >
      <Ellipse.RenderTransform>
          <ScaleTransform ScaleX="2.8" ScaleY="2.8"/>
      </Ellipse.RenderTransform>
  </Ellipse>
    </Canvas>

    <Canvas>
        <Ellipse Canvas.Left="104" Canvas.Top="50" Width="30" Height="30" Stroke="Black" StrokeThickness="2.5" >
      <Ellipse.RenderTransform>
          <ScaleTransform ScaleX="2.8" ScaleY="2.8"/>
      </Ellipse.RenderTransform>
  </Ellipse>
    </Canvas>

    <Canvas>
        <Ellipse Canvas.Left="148" Canvas.Top="95" Width="30" Height="30" Stroke="Green" StrokeThickness="2.5" >
      <Ellipse.RenderTransform>
          <ScaleTransform ScaleX="2.8" ScaleY="2.8"/>
      </Ellipse.RenderTransform>
  </Ellipse>
    </Canvas>

    <Canvas>
        <Ellipse Canvas.Left="195" Canvas.Top="50" Width="30" Height="30" Stroke="Red" StrokeThickness="2.5" >
      <Ellipse.RenderTransform>
          <ScaleTransform ScaleX="2.8" ScaleY="2.8"/>
      </Ellipse.RenderTransform>
  </Ellipse>
    </Canvas>
      
</Canvas>
============================================================

这里不足的地方是,五环应该是环环相扣的,而这里我的代码中没有勾画出来,所以是个简易版,有那位朋友愿意给出了完美版:)

本人想到一个方法,就是把下面的黄环和绿环分割成四段弧线,然后利用z-order(Z顺序)属性,来达到目的.

                                                                                            锐意进取 大胆创新
                                                                                                蒙哥马利 朱

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值