.canvas_1{javascript
position: absolute;css
width: 120rpx;html
height: 120rpx;java
background: rgba(255, 00, 0, 0.0);canvas
}小程序
<canvas class='canvas_1' canvas-id="Canvas1"/>ide
画进度条(我这是固定分为32等分,能够设置变量,分为任意等分)3d
ratio为px,转RPX比例code
wx.getSystemInfo({ success: function (res) { // 获取可以使用窗口宽度 let clientHeight = res.windowHeight; // 获取可以使用窗口高度 let clientWidth = res.windowWidth; // 算出比例 ratio = 750 / clientWidth; } })
/** * 画进度条 */ function drawProgress(pro,id) { var context = wx.createCanvasContext(id) var r = 45 / ratio; var x0 = 60 / ratio; var y0 = 60/ ratio; var x; var y; var lineWidth = 18 / ratio; for (var i = 0; i < 32; i++) { context.beginPath(); context.setLineWidth(lineWidth) if((i+1)<=pro){ context.setStrokeStyle(getColor.getColour(i)) }else{ context.setStrokeStyle("#252525") } x = x0 - (r * Math.sin((11.25 * (i + 1) - 3) * Math.PI / 180)) y = y0 - (r * Math.cos((11.25 * (i + 1) - 3) * Math.PI / 180)) // console.log("x0:"+x0+" y0:"+y0 +" x:"+x+" y:"+y) context.moveTo(x, y) context.arc(x0, y0, r, (270 - 11.25 * (i + 1) + 3) * Math.PI / 180, (270 - 11.25 * i) * Math.PI / 180, false) context.stroke(); context.closePath(); } context.stroke() context.draw() }
获取每一等分的颜色getColor.jshtm
var arrColor = ["#eb7c3b", "#ea7b3e", "#ea7a41", "#e97845", "#e87648", "#e7744c", "#e67252", "#e57056", "#e46e5a", "#e36c5f", "#e26964", "#e1666a", "#e0646f", "#df6275", "#de5f7b", "#dc5c80", "#db5a86", "#da578c", "#d85297", "#d85396", "#d7509c", "#d7509c", "#d64da1", "#d449ab", "#d347b0", "#d244b5", "#d143b8", "#d040bd", "#cf3fc1", "#ce3dc4", "#ce3cc8","#cd3bca"]; function getColour(per){ return arrColor[per]; } function getColor(startColor, endColor, maxPer,nowPer) { var R = Math.floor(Math.floor((endColor - startColor) / 65536)% 256 * nowPer / maxPer); var G = Math.floor(Math.floor((endColor - startColor) / 256) % 256 * nowPer / maxPer); var B = Math.floor((endColor - startColor) % 256 * nowPer / maxPer); var returnR = Math.floor(startColor / 65536) + R; var returnG = Math.floor(startColor / 256) % 256 + G; var returnB = startColor % 256 + B; return fix((returnR * 65536 + returnG * 256 + returnB + 0X000000).toString(16),6); } //数据格式化 function fix(num, length) { return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num; } module.exports = { getColor: getColor, getColour: getColour, }
小程序canvas有最高层级,若是有弹窗什么的,将会被canvas遮挡,能够在判断有弹出的时候,将canvas内容转为图片显示在image中,而后隐藏canvas
以下:
.canvas_bg{ position: absolute; width: 120rpx; height: 120rpx; background: rgba(55, 00, 55, 0.0); } .canvas_1{ position: absolute; width: 120rpx; height: 120rpx; background: rgba(255, 00, 0, 0.0); } .canvas_img{ position: absolute; width: 120rpx; height: 120rpx; background: rgba(00, 00, 255, 0.0); }
<view class='canvas_and_text'> <view class='canvas_bg'> <canvas class='canvas_1' hidden='{{canvas1Hide}}' canvas-id="Canvas1"/> <image class="canvas_img" hidden='{{img1Hide}}' src="{{canvas1Img}}" mode="aspectFit"/> </view> <text class='text_s'></text> </view>
当须要显示弹窗时,调用如下方法,显示image,hide canvas
function handleCanvarToImg() { popupSHow = true; wx.canvasToTempFilePath({ x: 0, y: 0, width: 120 / ratio, height: 120 / ratio, canvasId: "Canvas1", success: function (res) { that.setData({ img1Hide:false, canvas1Img: res.tempFilePath, canvas1Hide: true, }); console.log('Canvas1转图片') } }); }
当弹窗取消是,隐藏image ,显示canvas
popupSHow = false; that.setData({ popupDisplay: "hidden", img1Hide: true, canvas1Hide: false, });