《智能前端技术与实践》——第 2 章前端开发基础 ——2.7 微信小程序开发—

《智能前端技术与实践》——第 2 章前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（7）

2023-05-25 105

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 《智能前端技术与实践》——第 2 章前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（7）

《智能前端技术与实践》——第 2 章前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（6）: https://developer.aliyun.com/article/1227991?groupCode=tech_library

最后，看一个简单的案例，代码清单 2-55 即为 wxml 文件中的代码。

代码清单 2-55

<canvastype="2d"id="myCanvas"></canvas>

代码清单 2-56 即为 wxss 文件中的代码。

代码清单 2-56

canvas{
width:100%;
height:800rpx;
border:1pxsolidred;
}

代码清单 2-57 即为 JavaScript 文件中的代码。运行结果如图 2-48 所示。

代码清单 2-57

Page({
onReady() {
constquery=wx.createSelectorQuery()
query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
constcanvas=res[0].nodeconstctx=canvas.getContext('2d')
constdpr=wx.getSystemInfoSync().pixelRatiocanvas.width=res[0].width*dprcanvas.height=res[0].height*dprctx.scale(dpr, dpr)
//画圆ctx.beginPath()
ctx.arc(150, 50, 10, 0, 2*Math.PI)
ctx.fillStyle="blue"ctx.fill()
ctx.closePath()
//画直线ctx.beginPath()
ctx.fillStyle="red"ctx.moveTo(50, 130)
ctx.lineTo(250, 130)
ctx.stroke()
//画矩形ctx.beginPath()
ctx.fillStyle="orange"ctx.fillRect(100, 200, 100, 100)
ctx.closePath()
      })
  }
})