7-微信小程序開發-Canvas畫圖入門與尺寸轉換

<p><iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/LearningMiniProgram/" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe></p>

 

說明

有時候基本的組件樣式滿足不了現在的需求,就需要自己去做組件樣式.

所有的組件都是在 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實際像素
  },
  onLoad: 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. 然后其它也是直接乘這個參數即可