第四章作业

１.五圈。

//.wxml
<view class="whole">
<view class="hg">
<canvas canvas-id="myCanvas" class="hgh"></canvas>
</view>
<view class="hg2">
<canvas canvas-id="mywh" class="hgk"></canvas>
</view>
<view class="hg3">
<canvas canvas-id="myhs" class="hgd"></canvas>
</view>
<view class="hg4">
<canvas canvas-id="myys" class="hgs"></canvas>
</view>
<view class="hg5">
<canvas canvas-id="myls" class="hgq"></canvas>
</view>
</view>

 

//.js
Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas');
    const centerX = 100; // 圆心x坐标
    const centerY = 100; // 圆心y坐标
    const radius = 45; // 圆的半径
    const lineWidth = 2; // 线条宽度
 
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); // 绘制圆形路径
    ctx.setLineWidth(lineWidth); // 设置线条宽度
    ctx.setStrokeStyle('red'); // 设置线条颜色
    ctx.stroke(); // 绘制空心圆形
 
    ctx.draw(); // 将绘制内容显示到Canvas上
    const ctx2 = wx.createCanvasContext('mywh');
    const X = 100; // 圆心x坐标
    const Y = 100; // 圆心y坐标
    const r = 45; // 圆的半径
    const l = 2; // 线条宽度
 
    ctx2.beginPath();
    ctx2.arc(X, Y, r, 0, 2 * Math.PI); // 绘制圆形路径
    ctx2.setLineWidth(l); // 设置线条宽度
    ctx2.setStrokeStyle('#22B14C'); // 设置线条颜色
    ctx2.stroke(); // 绘制空心圆形
 
    ctx2.draw(); // 将绘制内容显示到Canvas上
    const ctx3 = wx.createCanvasContext('myhs');
    const X1 = 100; // 圆心x坐标
    const Y1 = 100; // 圆心y坐标
    const r1 = 45; // 圆的半径
    const l1 = 2; // 线条宽度
 
    ctx3.beginPath();
    ctx3.arc(X1, Y1, r1, 0, 2 * Math.PI); // 绘制圆形路径
    ctx3.setLineWidth(l1); // 设置线条宽度
    ctx3.setStrokeStyle('#000000'); // 设置线条颜色
    ctx3.stroke(); // 绘制空心圆形
 
    ctx3.draw(); // 将绘制内容显示到Canvas上
    const ctx4 = wx.createCanvasContext('myys');
    const X2 = 100; // 圆心x坐标
    const Y2 = 100; // 圆心y坐标
    const r2 = 45; // 圆的半径
    const l2 = 2; // 线条宽度
 
    ctx4.beginPath();
    ctx4.arc(X2, Y2, r2, 0, 2 * Math.PI); // 绘制圆形路径
    ctx4.setLineWidth(l2); // 设置线条宽度
    ctx4.setStrokeStyle('#FFF200'); // 设置线条颜色
    ctx4.stroke(); // 绘制空心圆形
 
    ctx4.draw(); // 将绘制内容显示到Canvas上
    const ctx5 = wx.createCanvasContext('myls');
    const X3 = 100; // 圆心x坐标
    const Y3 = 100; // 圆心y坐标
    const r3 = 45; // 圆的半径
    const l3 = 2; // 线条宽度
 
    ctx5.beginPath();
    ctx5.arc(X3, Y3, r3, 0, 2 * Math.PI); // 绘制圆形路径
    ctx5.setLineWidth(l3); // 设置线条宽度
    ctx5.setStrokeStyle('#1422FF'); // 设置线条颜色
    ctx5.stroke(); // 绘制空心圆形
 
    ctx5.draw(); // 将绘制内容显示到Canvas上
  }
})

//.wxss
.whole{
  position:absolute;
}
.hgh{
  position: relative;
  top:30px;
  left: -30px;
}
.hgk{
  position: relative;
  top:-50px;
  left: 10px;
}
.hgd{
  position: relative;
  top:-260px;
  left: 40px;
}
.hgs{
  position: relative;
  top:-350px;
  left: 70px;
}
.hgq{
  position: relative;
  top:-560px;
  left: 80px;
}

.json
{
  "navigationBarTitleText": "五个圆圈",
  "usingComponents": {
    
  }
}

 

2.书单。

//.wxml
<view>
   <view>
     <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
       <swiper-item>
           <image src="/img/bjz.png" style="width: 100%;height: 150px;"></image>
       </swiper-item>
       <swiper-item>
           <image src="/img/ja.webp" style="width: 100%;height: 150px;"></image>
       </swiper-item>
       <swiper-item>
           <image src="/img/zhxs2.jpg" style="width: 100%;height: 150px;"></image>
       </swiper-item>
     
     </swiper>
   </view>
 
   <view style="border-bottom: 3px solid black;" class="ja">
   <image src="/img/ja.webp" style="height: 170px;width: 170px;"/>
   <view style="width: 140px;" class="jas">
    <view style="font-weight: bolder;">简爱</view>
    <view style="font-weight: bold;">夏洛蒂·勃朗特</view>
    <view style="font-size: 13px;">该小说讲述孤女简·爱自幼父母双亡，寄养于舅母家，备受虐待，后被舅母打发到洛伍德义塾（洛伍德学校）去......</view>
   </view>
   </view>
   <view class="zt">
   
   <image src="/img/zhxs2.jpg" style="height: 170px;width: 170px;"/>
 
    <view style="width: 140px;" class="zhxs">
    <view style="font-weight: bolder;">朝花夕拾 </view>
    <view style="font-weight: bold;">鲁迅</view>                         
 <view style="font-size: 13px;">
    此文集作为“回忆的记事”，多侧面地反映了作者鲁迅青少年时期的生活，形象地反映了他的性格和志趣的形成经过......</view>
  </view>
   </view>
 
 
</view>

//.json
{
  "navigationBarTitleText": "书单",
  "usingComponents": {
   
  }
}

 

//.wxss
.ja ,.zt{
  clear:right;
  height: 170px;
}
.jas,.zhxs{
  float:right;
  font-size: 20px;
  width: 100px;
}

效果图：

 

3西安找拼车。

//。wxml
<view style="background-color: wheat;height:700px;">
<view >
<view style="border-bottom: 1px solid black;">联系方式(手机和微信至少填一项)</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>称呼*</view>
    <input model:value="{{inputValue}}" />
  </view>
  <view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>手机号</view>
    <input model:value="{{inputnumber}}" />
  </view>
  <view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view style="font-size: 17px;">微信号       </view>
    <input value="               请输入微信号" style="font-size: 16px;" />
  </view>
</view> 
  <view  >
<view style="border-bottom: 1px solid black;">拼车信息</view>
<view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>出发地点*</view>
    <input value="     限7个字" />
  </view>
  <view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>目的地*</view>
    <input value="     限7个字" />
  </view>
  <view style="display: flex;background-color: white;height: 20px;border-bottom: 1px solid black;">
    <view>空座数*</view>
    <input value="    请输入空座数" />
  </view>
</view>
</view>

//.js
Page({
  data: {
    inputValue: "                  请输入称呼", // 输入框
    inputnumber:"                请输入手机号"
   
  }
 
});

//.json
{
  "navigationBarTitleText": "西安找拼车",
  "usingComponents": {
   
  }
}

效果图：

4.人生进程。