第四章作业

最新推荐文章于 2024-09-08 14:42:38 发布

Aniher

最新推荐文章于 2024-09-08 14:42:38 发布

阅读量80

点赞数 2

文章标签：微信小程序

本文链接：https://blog.csdn.net/spirit12139/article/details/137206072

版权

文章介绍了在微信小程序中使用CanvasAPI绘制圆形路径，并展示了如何设计一个包含输入框和表单验证的基本用户界面，如手机号、微信号等拼车信息填写部分。

摘要由CSDN通过智能技术生成

五圈

//wxml
<canvas canvas-id="myCanvas" style="height: 300px;"></canvas>

//js
 Page({
  onReady:function (e){
const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.setStrokeStyle('#0000FF')
ctx.stroke()
ctx.beginPath()
ctx.arc(160, 100, 50, 0, 2 * Math.PI)
ctx.setStrokeStyle('#FFFF00')
ctx.stroke()
ctx.beginPath()
ctx.arc(220, 100, 50, 0, 2 * Math.PI)
ctx.setStrokeStyle('#000000')
ctx.stroke()
ctx.beginPath()
ctx.arc(130, 150, 50, 0, 2 * Math.PI)
ctx.setStrokeStyle('#00FF00')
ctx.stroke()
ctx.beginPath()
ctx.arc(190, 150, 50, 0, 2 * Math.PI)
ctx.setStrokeStyle('#FF0000')
ctx.stroke()
ctx.draw()
  }
})

书单

//wxml
<view style="background-color: black;height: 60px;"><view style="color: white;padding-top: 20px;">×西安找拼车</view>
</view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
联系方式（手机号和微信至少填一项）</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 0px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 115px;">称呼*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:115px">请输入称呼</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 20px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top:150px">手机号</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:150px">请输入手机号</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 20px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 195px;">微信号</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:195px">请输入微信号</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 23px;"></view>
<view style="color:grey;padding-top: 10px;background-color: darkgray;height: 35px;">
拼车信息</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 0px;">
</view>
<view>
  <view style="font-size: 20px;position: absolute;top: 290px;">出发地点*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:290px">限7个字</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 340px;">目的地*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:340px">限7个字</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>
<view>
  <view style="font-size: 20px;position: absolute;top: 390px;">空座位*</view>
  <view style="font-size: 20px;color: grey;position: absolute;left: 140px;top:390px">请输入空座位</view>
</view>
<view class="fo" style="border-bottom: 1px solid darkgrey;padding: 25px;"></view>