渐变色canvas-微信小程序

效果图如下：

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;
}

渐变色canvas-微信小程序相关推荐

Android A4尺寸 canvas,微信小程序canvas尺寸设置
微信小程序尺寸设置可使用rpx来标记尺寸,类同rem可在微信小程序中自适应兼容换算不同的机型尺寸. 但在小程序canvas中,尺寸换算会无效(由于绘画的滞后),因此需要自适应计算canvas尺寸. 一 ...
微信小程序使用 canvas 实现手写签名
在使用微信小程序开发中,有的需求场景中会需要用户手写签名.或者绘制一些路径,通常会使用 canvas 来实现这种需求在小程序的开发官方文档中我们可以查找到相关的 canvas 接口使用方法,在文档中 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
微信小程序——模拟时钟案例
文章目录案例效果图前导知识:canvas 代码部分案例效果图实时更新,因为我当时是六点多前导知识:canvas 微信小程序中的canvas画布(内容过多,请查看我整理的另一篇博客):链接:h ...
微信小程序2.9.0基础库canvas2D新API，生成海报保存到手机功能实现，包括文字换行，圆形图片，图片高度自适应等功能封装
WxCanvas 利用canvas微信小程序原生实现的一个绘制微信小程序海报的类,基础库版本>2.9.0. 下面链接中使用的api已被废弃,所以有了本文. 微信小程序生成海报保存到手机先看效果 ...
微信小程序canvas画价格走势图（六）
到上一篇,可以说,所有的工作已经完成了,那为什么还会有第六篇呢?因为,客户改需求了,UI设计图改了,我也就不得不改代码,画一个新的版本出来.我在大功告成,开始写第一篇的时候突然改的,我也就准备加一篇来 ...
基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
【微信小程序之画布】一：canvas组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 此文章主要是对canvas组件的介绍与基本的使用.在组件中绘画了一条固定的直线. 我们先了解一下can ...
【微信小程序canvas】实现小程序手写板用户签名(附代码)
[微信小程序canvas]实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能先看效果图: wxml <view class="wrapper"& ...

渐变色canvas-微信小程序

渐变色canvas-微信小程序相关推荐

最新文章

热门文章