漸變色canvas-微信小程式
阿新 • • 發佈:2019-01-30
效果圖如下:
index.js
Page({
/**
* 頁面的初始資料
*/
data: {
windowWidth:null,
windowHeight:null,
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
this.setData({
windowWidth: wx.getSystemInfoSync().windowWidth,
windowHeight: wx.getSystemInfoSync().windowHeight
})
const ctx1 = wx.createCanvasContext('myCanvas1')
this.grad(ctx1, 'rgb(253, 151, 48)', 'white')
this.casDrawImage(ctx1, 'images/head.jpg')
this.casFont(ctx1,'順豐快遞求領','聯絡人:blingfeng123')
ctx1.draw()
const ctx2 = wx.createCanvasContext('myCanvas2')
this.grad(ctx2,'rgb(242, 69, 63)','white' )
this.casDrawImage(ctx2, 'images/head.jpg')
ctx2.draw()
const ctx3 = wx.createCanvasContext('myCanvas3')
this.grad(ctx3,'rgb(39, 167, 233)','white')
this.casDrawImage(ctx3, 'images/head.jpg')
ctx3.draw()
const ctx4 = wx.createCanvasContext('myCanvas4')
this.grad(ctx4, 'rgb(45, 222, 160)' , 'white')
this.casDrawImage(ctx4, 'images/head.jpg')
ctx4.draw()
const ctx5 = wx.createCanvasContext('myCanvas5')
this.grad(ctx5, 'rgb(45, 222, 160)', 'white')
this.casDrawImage(ctx5, 'images/head.jpg')
ctx5.draw()
const ctx6 = wx.createCanvasContext('myCanvas6')
this.grad(ctx6, 'rgb(45, 222, 160)', 'white')
this.casDrawImage(ctx6, 'images/head.jpg')
ctx6.draw()
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
},
casDrawImage :function(ctx,imageUrl){
ctx.drawImage(imageUrl, 30, 30, 60, 60)
},
grad :function(ctx,color,colorstop){
// 建立線性漸變
const grd = ctx.createLinearGradient(0, 0, 500, 0)
grd.addColorStop(0, color)
grd.addColorStop(1, colorstop)
ctx.setFillStyle(grd)
ctx.fillRect(15, 10, 700, 250)
},
casFont:function(ctx,title,content){
ctx.setFontSize(17)
ctx.setFillStyle('white')
ctx.fillText(title, 120, 50)
ctx.fillText(content, 120, 80)
}
})
index.wxml
<canvas canvas-id="myCanvas1" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas2" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas3" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas4" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas5" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas6" style='width:700rpx;height:250rpx'/>
<image src='images/right.png' class='circle-float'></image>
index.wxss
.circle-float{
color: #ffffff;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
bottom: 20rpx;
right: 20rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
font-size: 28rpx;
}