H5 PC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" height="100" width="100"></canvas>
<script>
//获取画布
var canvas =document.querySelector('#canvas');
canvas.style.border="1px solid black";
//获取画笔
var ctx=canvas.getContext('2d');
//画出圆环
//画出进度条
function fillProcess(numDeg=10){
//开启路径
ctx.beginPath();
ctx.lineWidth=8;
ctx.arc(50,50,50,Math.PI*1.5,Math.PI*1.5+Math.PI*numDeg/100*2,false);
ctx.lineCap="round";
ctx.strokeStyle="#008000";
ctx.stroke();
//关闭路径
ctx.closePath();
//画出填充背景
ctx.beginPath();
ctx.arc(50,50,44,Math.PI*2,false)
ctx.fillStyle="#ccc";
ctx.fill()
ctx.closePath();
//填充文字
ctx.beginPath();
ctx.font="14px math";
ctx.fillStyle="blue";
ctx.fillText((numDeg+'%'),45,55,40)
ctx.closePath();
}
fillProcess(80)
</script>
</body>
</html>
微信小程序
wxml
<canvas type="2d" id="myCanvas" width="100%" height="100%"></canvas>
wx.js
// pages/version3/addStudent/index.js
Page({
/**
* 页面的初始数据
*/
data: {
canvasDom: null, // 画布dom对象
canvas:null, // 画布的节点
ctx: null, // 画布的上下文
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//表单提交
submitForm:function(e){
console.log(e.detail.value)
},
//查询节点信息,并准备绘制图像
drawImage(){
const query=wx.createSelectorQuery();
query.select('#myCanvas')
.fields({
node:true,
size:true
}).exec((res)=>{
const dom=res[0];
const canvas=dom.node;
const ctx=canvas.getContext('2d');
const dpr=wx.getSystemInfoSync().pixelRatio;
this.setData({
canvasDom: dom, // 把canvas的dom对象放到全局
canvas: canvas, // 把canvas的节点放到全局
ctx: ctx, // 把canvas 2d的上下文放到全局
},function(){
this.drawing() // 开始绘图
})
})
},
drawing:function(deg=100){
//绘制外圈画面
console.log(this.data.ctx);
this.data.ctx.beginPath();
this.data.ctx.strokeStyle="#ccc";
this.data.ctx.lineWidth=2.5;
// this.data.ctx.arc(100,100,25,Math.PI*1.5,Math.PI*1.5+Math.PI*2*deg/100,false);
this.data.ctx.arc(100,100,15.5,Math.PI*1.5,Math.PI*1.5+Math.PI*2,false);
this.data.ctx.stroke();
this.data.ctx.closePath();
//绘制画面
console.log(this.data.ctx);
this.data.ctx.beginPath();
this.data.ctx.strokeStyle="green";
this.data.ctx.lineWidth=2.5;
this.data.ctx.arc(100,100,15.5,Math.PI*1.5,Math.PI*1.5+Math.PI*2*deg/100,false);
// this.data.ctx.arc(100,100,31,Math.PI*1.5,Math.PI*1.5+Math.PI*2,false);
this.data.ctx.stroke();
this.data.ctx.closePath();
//绘制文本
this.data.ctx.beginPath();
this.data.ctx.font = "18rpx Math";
this.data.ctx.fillStyle="black";
this.data.ctx.fillText((deg+'%'),85,105,60)
this.data.ctx.closePath();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.drawImage()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
WX 小程序组件 环形进度条
wxml
<view class="garage-status">
<canvas type="2d" id="{{canvasId}}" class="canvas" style="width: {{customOptions.canvasSize.width}}rpx; height: {{customOptions.canvasSize.height}}rpx"></canvas>
<view class="status-count">提交率</view>
</view>
wxss
/* components/process/index.wxss */
.garage-status {
position: relative;
width: 90rpx;
height: 120rpx;
box-sizing: border-box;
border: 1px solid orange;
left: 100rpx;
top: 100rpx;
overflow:hidden;
}
.status-count {
position: absolute;
bottom:0;
width: 90rpx;
height: 42rpx;
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 42rpx;
}
.canvas {
margin-left: 10rpx;
margin-top: 10rpx;
}
wx.js
// components/process/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
//进度条百分比
deg: {
type: Number,
value: 15,
},
},
/**
* 组件的初始数据
*/
data: {
canvasDom: null, // 画布dom对象
canvas: null, // 画布的节点
ctx: null, // 画布的上下文
canvasId: `mp_progress_${new Date().getTime()}`,
customOptions: {
canvasSize: {
width: 600,
height: 300,
},
percent: 100,
},
},
/**
* 组件的方法列表
*/
methods: {
//查询节点信息,并准备绘制图像
drawImage() {
const query = wx.createSelectorQuery().in(this);
let id='#'+this.data.canvasId;
query
.select(id)
.fields({
node: true,
size: true,
})
.exec((res) => {
const dom = res[0];
const canvas = dom.node;
const ctx = canvas.getContext("2d");
const dpr = wx.getSystemInfoSync().pixelRatio;
this.setData(
{
canvasDom: dom, // 把canvas的dom对象放到全局
canvas: canvas, // 把canvas的节点放到全局
ctx: ctx, // 把canvas 2d的上下文放到全局
},
function () {
this.drawing(this.data.deg); // 开始绘图
}
);
});
},
drawing: function (deg = 100) {
//绘制外圈画面
console.log(this.data.ctx);
this.data.ctx.beginPath();
this.data.ctx.strokeStyle = "#ccc";
this.data.ctx.lineWidth = 2.5;
// this.data.ctx.arc(100,100,25,Math.PI*1.5,Math.PI*1.5+Math.PI*2*deg/100,false);
this.data.ctx.arc(
16,
16,
15.5,
Math.PI * 1.5,
Math.PI * 1.5 + Math.PI * 2,
false
);
this.data.ctx.stroke();
this.data.ctx.closePath();
//绘制画面
this.data.ctx.beginPath();
this.data.ctx.strokeStyle = "rgba(51, 147, 221, 1)";
this.data.ctx.lineWidth = 2.5;
this.data.ctx.arc(
16,
16,
15.5,
Math.PI * 1.5,
Math.PI * 1.5 + (Math.PI * 2 * deg) / 100,
false
);
// this.data.ctx.arc(100,100,31,Math.PI*1.5,Math.PI*1.5+Math.PI*2,false);
this.data.ctx.stroke();
this.data.ctx.closePath();
//绘制文本
this.data.ctx.beginPath();
this.data.ctx.font = "18rpx Math";
this.data.ctx.fillStyle = "black";
this.data.ctx.fillText(deg + "%", 6.5, 19.5, 60);
this.data.ctx.closePath();
},
},
attached: function() {
// 在组件实例进入页面节点树时执行
this.drawImage()
},
});
WX
wx.ml
<view class="circle_box" style="width:{{size}}px;height:{{size}}px;position:relative">
<!-- <canvas class="circle_bg" canvas-id="{{draw}}bg" style="width:{{size}}px;height:{{size}}px;opacity:0;display:{{show}}"></canvas> -->
<canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px;opacity:0;display:{{show}}"></canvas>
<!-- <canvas class="circle_bg" canvas-id="{{draw}}bg" style="width:{{size}}px;height:{{size}}px;opaity:0"></canvas> -->
<!-- <image src="{{url}}" style="width:{{size}}px;height:{{size}}px;"></image> -->
<image src="{{url1}}" style="width:{{size}}px;height:{{size}}px;"></image>
<text class='circle_txt'> {{txt}}<text>%</text> </text>
<text class="true">提交率</text>
</view>
View Code
wx.ss
.circle_box,
.circle_draw {
position: relative;
}
.circle_bg {
position: absolute;
left: 0;
top: 0;
}
.circle_box {
display: flex;
/* flex-direction: row; */
justify-content: center;
flex-wrap: wrap;
/* align-items: center; */
background: url(data:image/png;base64,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) no-repeat 0 0/ 100%;
width: 90rpx;
height: 120rpx;
}
.circle_box image {
position: absolute;
left: 0;
top: 0;
}
.circle_txt {
position: absolute;
top: 20rpx;
text-align: center;
flex: 1;
height: 25rpx;
font-size: 18rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 25rpx;
}
.circle_txt text {
font-size: 20rpx;
}
.true {
top: 75rpx;
position: absolute;
width: 90rpx !important;
line-height: 25rpx;
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 42rpx;
}
View Code
wx,js
// component/pro/index.js
Component({
/**
* 组件的属性列表
*/
options: {
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
},
properties: {
per: {
//百分比 通过此值转换成step
type: String,
value: "0",
},
r: {
//半径
type: String,
value: "50",
},
},
data: {
/* 私有数据,可用于模版渲染 */
step: 1, //用来算圆的弧度0-2
size: 0, //画板大小
screenWidth: 750, //实际设备的宽度
txt: 0,
show: "block",
url: "http://tmp/wx2df78d360c5a8eb8.o6zAJs9cZQ_86upd1kTYsqHHzeyM.aQs4376TV8Wpafb6b2f30c54e908fc2ee0b0218bbd04.png",
url1: "",
draw: `mp_progress_${new Date().getTime()}`,
},
methods: {
/**
* el:画圆的元素
* r:圆的半径
* w:圆的宽度
* 功能:画背景
*/
// drawCircleBg: function (el, r, w) {
// // debugger
// const ctx = wx.createCanvasContext(el,this);
// ctx.setLineWidth(w);// 设置圆环的宽度
// // debugger
// ctx.setStrokeStyle('rgba(216,216,216,.2)'); // 设置圆环的颜色
// ctx.setLineCap('round') // 设置圆环端点的形状
// ctx.beginPath();//开始一个新的路径
// ctx.arc(r, r, r - w, 0, 2 * Math.PI, true);
// //设置一个原点(110,110),半径为100的圆的路径到当前路径
// ctx.stroke();//对当前路径进行描边
// ctx.draw();
// },
/**
* el:画圆的元素
* r:圆的半径
* w:圆的宽度
* step:圆的弧度 (0-2)
* 功能:彩色圆环
*/
drawCircle: function (el, r, w, step, ni) {
var context = wx.createCanvasContext(el, this);
// 设置渐变
var gradient = context.createLinearGradient(2 * r, r, 0);
gradient.addColorStop("0", "#3393DD");
gradient.addColorStop("0.5", "#3393DD");
gradient.addColorStop("1.0", "#3393DD");
context.setLineWidth(w);
context.setStrokeStyle(gradient);
context.setLineCap("round");
// debugger
context.beginPath(); //开始一个新的路径
// step 从0到2为一周
context.arc(
r,
r,
r - w,
-Math.PI / 2,
step * Math.PI - Math.PI / 2,
false
);
context.stroke(); //对当前路径进行描边
context.draw();
},
},
lifetimes: {
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () {
const _this = this;
//获取屏幕宽度
wx.getSystemInfo({
success: function (res) {
_this.setData({
screenWidth: res.windowWidth,
});
},
});
//初始化
const el = _this.data.draw; //画板元素
const per = _this.data.per; //圆形进度
const r = Number(_this.data.r); //圆形半径
_this.setData({
step: (2 * Number(_this.data.per)) / 100,
txt: _this.data.per,
});
//获取屏幕宽度(并把真正的半径px转成rpx)
let rpx = (_this.data.screenWidth / 750) * r;
//计算出画板大小
this.setData({
size: rpx * 2,
});
const w = 2; //圆形的宽度
//组件入口,调用下面即可绘制 背景圆环和彩色圆环。
// _this.drawCircleBg(el + 'bg', rpx, w);//绘制 背景圆环
// setTimeout(function(){
// wx.canvasToTempFilePath({
// x: 0,
// y: 0,
// width: _this.data.size * 2,
// height: _this.data.size * 2,
// destWidth: _this.data.size * 2,
// destHeight: _this.data.size * 2,
// canvasId: _this.data.draw + 'bg',
// success: function (res) {
// _this.setData({
// url: res.tempFilePath
// });
// console.log(res.tempFilePath)
// },
// fail: function (res) {
// console.log(res)
// }
// }, _this)
// },500)
_this.drawCircle(el, rpx, w, _this.data.step, true); //绘制 彩色圆环
// debugger
setTimeout(function () {
wx.canvasToTempFilePath(
{
x: 0,
y: 0,
width: _this.data.size * 2,
height: _this.data.size * 2,
destWidth: _this.data.size * 2,
destHeight: _this.data.size * 2,
canvasId: _this.data.draw,
success: function (res) {
_this.setData({
url1: res.tempFilePath,
show: "none",
});
console.log(res.tempFilePath);
},
fail: function (res) {
console.log(res);
_this.drawCircle(el, rpx, w, _this.data.step, true); //绘制 彩色圆环
setTimeout(function () {
wx.canvasToTempFilePath(
{
x: 0,
y: 0,
width: _this.data.size * 2,
height: _this.data.size * 2,
destWidth: _this.data.size * 2,
destHeight: _this.data.size * 2,
canvasId: _this.data.draw,
success: function (res) {
_this.setData({
url1: res.tempFilePath,
show: "none",
});
console.log(res.tempFilePath);
},
fail: function (res) {
console.log(res);
},
},
_this
);
}, 500);
},
},
_this
);
}, 1000);
},
},
});
View Code