小程序第四章作业

操作题

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 小时前
Java-72 深入浅出 RPC Dubbo 上手 生产者模块详解
java·spring boot·分布式·后端·rpc·dubbo·nio
_殊途2 小时前
《Java HashMap底层原理全解析(源码+性能+面试)》
java·数据结构·算法
椰椰椰耶3 小时前
【Spring】拦截器详解
java·后端·spring
没有bug.的程序员4 小时前
JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
java·面试·mybatis
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
没有羊的王K5 小时前
SSM框架学习——day1
java·学习