7-微信小程序开发-Canvas画图入门与尺寸转换

2020-12-14 03:01:06 阅读：362 来源： 互联网

标签：Canvas 颜色样式微信程序开发 ctx canvas 画布 rpx

说明

有时候基本的组件样式满足不了现在的需求,就需要自己去做组件样式.

所有的组件都是在 canvas 上弄. canvas就是相当于咱的一块画板.

https://www.w3cschool.cn/weixinapp/weixinapp-api-canvas-intro.html 推荐学习链接

记住下面说的

首先和咱画画的思路是一样的!

第一,弄一块画板,

第二,想好要花个什么东西,颜色搭配是什么

第三,画出来.

不过在咱真实的用画板画图的时候是先想好了颜色搭配

然后画个框图,然后在框图中涂上颜色.

而在咱程序上是先规定好了颜色搭配,然后设置一下框图,然后调用一下开始画画吧

然后就出来了.

放一个画布

1.在XXX.wxml文件上放一个画布组件

<canvas 
  canvas-id="canvas" 
  style="border: 1px solid #000000; width: 300rpx; height: 300rpx;"
/>

canvas-id="canvas" :画布的ID是 canvas ,js文件靠这个ID来获取这个画布,然后在上面画东西. border: 1px solid #000000; 画布的边框宽度是1px,边框颜色是000000(RGB) 黑色 width: 300rpx; height: 300rpx; 画布宽300 高 300 2.js文件里面获取这个画布

const ctx = wx.createCanvasContext('canvas')

固定写法 canvas 是画布的ID

3.在画布上画一个矩形(先设置一下样式)

/**先设置好样式,下面是设置的样式的颜色为红色 */
    ctx.setFillStyle('red')

注:样式是个统称, 比方说,设置个什么颜色, 设置个渐变色等等

4.画一个矩形(要画一个矩形)

ctx.fillRect(5, 10, 150, 75)

画一个起点坐标是 x=5,y=10, 宽度是150, 高度是75的矩形

5.给我画出来

ctx.draw()

6.画布为啥不够宽??

那肯定是 300rpx 和这个150 不是一个单位

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#￥ﾰﾺ￥ﾯﾸ￥ﾍﾕ￤ﾽﾍ

7.所以要把宽度改为使用rpx的就加点程序

Page({
  data: {
    rpx: 1, //此值为你的屏幕CSS像素宽度/750，单位rpx实际像素
  },
  onl oad: function () {
    let _this = this;
    wx.getSystemInfo({//获取手机系统信息
      success(res) {
        //求得px 和 rpx 的比例
        _this.data.rpx = res.screenWidth / 750 
      }
    })
  },
  /**
* 生命周期函数--监听页面显示
*/
  onShow: function () {
    let _this = this;
    /**获取画布 */
    const ctx = wx.createCanvasContext('canvas')
    /**先设置好样式,下面是设置的样式的颜色为红色 */
    ctx.setFillStyle('red') 
    ctx.fillRect(5, 10, 150 * _this.data.rpx, 75)
    ctx.draw()
  },
})

8. 然后其它也是直接乘这个参数即可

标签：Canvas,颜色,样式,微信,程序开发,ctx,canvas,画布,rpx
来源： https://www.cnblogs.com/yangfengwu/p/14131334.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

7-微信小程序开发-Canvas画图入门与尺寸转换

说明

记住下面说的

放一个画布