小程序第四章作业

操作题

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设置样式:

运行结果

编程题

相关推荐
mCell13 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip13 小时前
Node.js 子进程:child_process
前端·javascript
RainbowSea15 小时前
12. LangChain4j + 向量数据库操作详细说明
java·langchain·ai编程
RainbowSea15 小时前
11. LangChain4j + Tools(Function Calling)的使用详细说明
java·langchain·ai编程
excel16 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel17 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼18 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping18 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
考虑考虑19 小时前
Jpa使用union all
java·spring boot·后端
石金龙19 小时前
[译] Composition in CSS
前端·css