小程序学习之小程序组件(七)画布组件

<canvas>为画布组件,默认尺寸宽度300px 高度225px,常用属性:

ps:同一页面的canvas-id不可重复,若使用一个已经出现过的canvas-id,它对应的画布将被隐藏且不再正常工作

<canvas>组件声明后,一个简单的画图工作分为以下步骤:

  • 声明画布上下文(CanvasContext)
  • 使用画布上下文进行绘图描述
  • 画图

ps:以上步骤须将代码写进js文件的onLoad()函数中

示例:(简单应用,更多用法见后面)

<!--wxml-->
<view class="title">画布组件canvas的简单应用</view>
<view class="demo-box">
  <canvas canvas-id="myCanvas" style="border:1rpx solid"></canvas>
</view>

//js
Page({
  onLoad:function(options){
    //创建画布上下文
    const ctx = wx.createCanvasContext("myCanvas")
    //设置填充颜色、填充区域
    ctx.setFillStyle('orange')
    ctx.fillRect(20,20,150,80)
    //画图
    ctx.draw()
  }
})

 

发布了0 篇原创文章 · 获赞 0 · 访问量 1023
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览