分享一个付费级别的代码Canvas绘制海报及多机型兼容

直接上代码:没有基础的可能看不太懂

 // 创建 canvas 绘图上下文对象
	       const context = wx.createCanvasContext('screenCanvas');
		   //要绘制海报用到的图片
		   const imageUrl="/static/images/family.jpg"
		   //小程序二维码
		   const imageUrl1="/static/images/erCode.png"
		   // 绘制图片到canvas
		   context.drawImage(imageUrl, 0, 0,  canvasWidth.value,canvasHeight.value*0.6)
		   //开始绘制线条
		   context.beginPath();
		   //定位到线条起始点
		   context.moveTo(0, canvasHeight.value * 0.5);
		   //拉一条线到中间坐标
		   // context.lineTo(0, canvasHeight.value * 0.5);
		   //绘制圆弧从x轴0.25-0.5,y轴:0.6-0.6不严谨但是效果一样弧度为300
		   context.arcTo(canvasWidth.value / 4, canvasHeight.value * 0.6, canvasWidth.value * 0.5, canvasHeight.value * 0.6,canvasHeight.value-canvasHeight.value * 0.6 );
		   //绘制圆弧从x轴0.75-1,y轴:0.6-0.5不严谨但是效果一样弧度为300
		   context.arcTo(canvasWidth.value * 0.75, canvasHeight.value * 0.6, canvasWidth.value, canvasHeight.value * 0.5,canvasHeight.value-canvasHeight.value * 0.6 );
		   // 划线从(1,0.5)开始
		   context.lineTo(canvasWidth.value, canvasHeight.value * 0.5);
		   // 划线从(1,0.5)开始-(1,1)
		   context.lineTo(canvasWidth.value, canvasHeight.value);
		   // 划线从(1,1)-(0,1)
		   context.lineTo(0, canvasHeight.value);
		   // 划线从(0,1)-(0,0.5)
		   context.lineTo(0, canvasHeight.value*0.5);
		   //绘制完成设置填充色
		   context.fillStyle = "rgb(255, 128, 0)";
		   //开始填充
		   context.fill();
		   context.closePath()
		   //判断缩放比例二维码
		   const a=canvasWidth.value/710
		   const b=canvasHeight.value/674
		   // 对比比例哪个小就以哪个为标准缩放
		   const scX=a>b?b:a
		   //这里缩放后除以2是为了以基准宽的0.5作为二维码宽度
		   const width=710*scX/2
		   const height=674*scX/2
		   //动态绘制二维码到指定位置与canvas的比例可能发生改变但是不会发生形变
		  context.drawImage(imageUrl1,0, 0,710,674, canvasWidth.value / 2 -width/2, canvasHeight.value*0.65-height/2, width, height);
		  context.closePath();
		  //开始绘制文字
		  context.beginPath();
		  //设置颜色
		  context.fillStyle = "rgb(255, 85, 0)";
		  // 设置字体样式
		  context.font='italic bold 33px Microsoft Yahei'
		  //字体内容
		  context.fillText('速达·陪诊', canvasWidth.value / 10, canvasHeight.value/2.6)
		  context.font='italic bold 30px Microsoft Yahei'
		  context.fillText('快速·必达', canvasWidth.value / 2, canvasHeight.value/2.2)
		  context.closePath();
		  context.fillStyle = "rgb(255, 255, 255)";
		  context.font='18rpx Microsoft Yahei'
		  //动态可修改文字内容
		  const len=btText1.value.length/2
		  context.fillText(btText1.value, canvasWidth.value /2-20*len, canvasHeight.value-50)
		  context.font="18rpx Microsoft Yahei"
		  context.fillText(btText2.value, canvasWidth.value / 2-20*len, canvasHeight.value-25)
		   //绘制并保留上面的内容
		   context.draw(true)
		   // 开始绘制
	       context.draw(true, function() {
	         // 将 canvas 保存为临时图片
	         wx.canvasToTempFilePath({
	           canvasId: 'screenCanvas',
	           destWidth: canvasWidth.value,
	           destHeight: canvasHeight.value,
	           success: function (res) {
	             tempFilePath.value = res.tempFilePath;
	             wx.showToast({
	               title: '生成成功',
	               icon: 'success',
	               duration: 2000
	             })
	           },
	           fail: function (res) {
	             wx.showToast({
	               title: '生成失败',
	               icon: 'none',
	               duration: 2000
	             })
	           }
	         })
	       });
	 }
	 const saveToLocal=()=>{
		 uni.saveImageToPhotosAlbum({
				filePath: tempFilePath.value,
				success: function (res) {
					wx.showToast({
					  title: '保存成功',
					  icon: 'success',
					  duration: 2000
					})
				},
				fail(res) {
					wx.showToast({
					  title: '保存失败',
					  icon: 'success',
					  duration: 2000
					})
					const re=photoWrite('albumAuthorized','保存到相册')
					if(re!=0){
						uni.authorize({
						    scope: 'scope.writePhotosAlbum',
						    success() {
						        wx.showToast({
						          title: '授权成功',
						          icon: 'none',
						          duration: 2000
						        })
						    }
						})
					}else{
						wx.showToast({
						  title: '已授权相册',
						  icon: 'none',
						  duration: 2000
						})
					}
				}
			});
	 }
	 const photoWrite=(value,type)=>{
		 const authorList =uni.getAppAuthorizeSetting()
		 const result=authorList[value]
		 if(result=='authorized'){
			 return 0
		 }
		 if(result=='denied'){
		 	wx.showToast({
		 	  title: type+'被拒绝,手动开启',
		 	  icon: 'none',
		 	})
			return 1
		 }
		 if(result=='not determined'){
		 	wx.showToast({
		 	  title: type+'未授权',
		 	  icon: 'none',
		 	})
			return 2
		 }
	 }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值