小程序第四章作业

操作题

1.使用canvas组件实现"五圈"的绘制。

代码实现如下

test.wxml代码:

复制代码
<canvas canvas-id="olympic-rings" style="width: 800px; height: 500px;"></canvas>
<!-- 引用canvas组件并设置id -->

test.js设置样式:

复制代码
Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('olympic-rings');

    // 设置五环颜色
    const colors = ['#6495ed', '#000000', '#9acd32', '#ff0000', '#ffd700'];

    // 绘制蓝色环
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[0]);
    ctx.stroke();

    // 绘制黑色环
    ctx.beginPath();
    ctx.arc(110, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[1]);
    ctx.stroke();

    // 绘制绿色环
    ctx.beginPath();
    ctx.arc(170, 50, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[2]);
    ctx.stroke();

    // 绘制红色环
    ctx.beginPath();
    ctx.arc(80, 90, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[3]);
    ctx.stroke();

    // 绘制黄色环
    ctx.beginPath();
    ctx.arc(140, 90, 40, 0, 2 * Math.PI);
    ctx.setStrokeStyle(colors[4]);
    ctx.stroke();

    ctx.draw();
  }
});

运行结果

2.使用相应组件,完成"书单"页面。

test.wxml代码:

test.js设置样式:

运行结果

3.使用相应组件,完成"西安找拼车"小程序部分页面。

test.wxml代码:

test.js设置样式:

运行结果

编程题

相关推荐
全栈技术负责人3 小时前
前端网络性能优化实践:从 HTTP 请求到 HTTPS 与 HTTP/2 升级
前端·网络·http
九术沫3 小时前
装饰器模式在Spring中的案例
java·spring·装饰器模式
毕设源码-赖学姐3 小时前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
码上暴富3 小时前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
Rysxt_3 小时前
Spring Boot 集成 Spring AI OpenAI Starter 教程
java·spring boot·后端·ai
Mintopia4 小时前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia4 小时前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso4 小时前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
nodcloud4 小时前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
青云交4 小时前
Java 大视界 -- Java 大数据在智能家居场景联动与用户行为模式挖掘中的应用
java·大数据·智能家居·边缘计算·户型适配·行为挖掘·场景联动