小程序第四章作业

操作题

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

运行结果

编程题

相关推荐
走,带你去玩1 分钟前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
LaoZhangAI1 分钟前
OpenAI API 账号分层完全指南:2025年最新Tier系统、速率限制与升级攻略
前端·后端
LeeAt1 分钟前
React Hooks 编程:useState和useEffect的详解
前端·react.js
Dream耀2 分钟前
React Hooks 指南:useState 与 useEffect 的用法与技巧
前端·javascript·react.js
zhanshuo4 分钟前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
小飞悟6 分钟前
React Hooks 编程:深入理解 useEffect 的执行机制与清理副作用
前端·javascript
庖丁解牛7 分钟前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发
红衣信8 分钟前
前端与后端存储全解析:从 Cookie 到缓存策略
前端·后端·面试
3Katrina8 分钟前
一文带你了解React useEffect:核心概念与实践总结
前端
我想说一句9 分钟前
React Hooks 生存指南:让你的函数组件"活"起来 🧬
前端·javascript·react.js