【小程序】 Canvas绘制模糊，变高清的史诗级理解!

图解，贼重要，不理解，仔细品！

成品展示

• 清晰度对比一下！是不是清晰了
• 此时注意。清晰比例在电脑上更高时,，会模糊，但手机上不会
• 所以电脑上调试清晰比例2就行
  

展示代码，粘贴即可用

<template>
	<view>
		<canvas :style="{width:Artwidth+ 'px',height:Artheight + 'px'}" id="CanvasDraw" type="2d"></canvas>
		<button @click="beginDrawImg">开始绘制</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Artwidth: 0,
				Artheight: 0,
				dpr: 1,//可以设置为全局，看需要
			}
		},
		methods: {
			beginDrawImg() {
				//获取设备像素比，也可以直接把比列写死传过去
				let dpr = wx.getWindowInfo().pixelRatio || 1;
				this.DrawImg('#CanvasDraw', 0, 0, 375, 200,2)
			},
			//canvas的ID名、绘制的x位置，绘制的y位置，绘制的宽，绘制的高，清晰的倍数
			DrawImg(CVID, x, y, w, h, dpr) {
				let that = this
				const query = uni.createSelectorQuery().in(this)
				query.select(CVID).fields({
					node: true,
					size: true
				}).exec(res => {
					const {
						node: canvas
					} = res[0];
					const ctx = canvas.getContext('2d');
					const dataInfo = that.scaleValue(x, y, w, h, dpr)
					dataInfo.then((res) => {
						//你一直也看不见的画布宽高，尽情放大，
						//这里有点难理解，打个比方理解一下，就相当于看的见的画布，放这你看不见的被放大的画布
						//就相当于井底之娃，看的天空看起来很小，实际上那一小片有着看不到的非常大的宇宙
						canvas.width = res.w
						canvas.height = res.h
						//看的见的画布大小，按实际需求赋值
						that.Artwidth = w
						that.Artheight = h
						//获取图片实例，去绘制
						const bgimage = canvas.createImage()
						const IMG = that.Drawimg()
						IMG.then((img) => {
							bgimage.onload = () => {
								//先绘制在看不见的放大的画布上
								ctx.drawImage(bgimage, 0, 0,canvas.width,canvas.height)
								//然后将当前绘图放大，切记理解这个，不是放大画布，而是放大你的绘图内容
								ctx.scale(dpr, dpr);
							}
							bgimage.src = img
						})
					}, (err) => {})

				})
			},
			//同比放大绘制的内容，目的为了高清
			scaleValue(x, y, w, h, dpr) {
				return new Promise((resolve, reject) => {
					const data = {
						x: x * dpr,
						y: y * dpr,
						w: w * dpr,
						h: h * dpr,
					}
					resolve(data)
				})
			},
			// 绘制图片
			Drawimg() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						success: function(res) {
							console.log(res.tempFilePaths[0])
							resolve(res.tempFilePaths[0])
						}
					})
				})
			}
		}
	}
</script>
<style>
</style> 

献给新入行的小伙伴的代码。更容易理解！

<template>
	<canvas :style="{width:Artwidth+ 'px',height:Artheight + 'px' }" id="Articulation6" type="2d" ></canvas>
</template>
<script>
	export default {
		data() {
			return {
				Artwidth: "",
				Artheight: "",
				w: 400,
				h: 300,
				dpr:1,
			}
		},
		methods: {
		//画布盒子
			changemax1() {
				let that = this
				const query = uni.createSelectorQuery().in(this)
				console.log(query)
				query.select("#Articulation6").fields({
					node: true,
					size: true
				}).exec(res => {
					const {
						node: canvas
					} = res[0];
					//获取设备像素比
					// that.dpr = wx.getWindowInfo().pixelRatio || 1;
					that.dpr = 2
					//变大的画布
					canvas.width = that.w * that.dpr
					canvas.height = that.h * that.dpr
					//展示的画布
					that.Artwidth = that.w
					that.Artheight = that.h
					//绘制
					const ctx = canvas.getContext('2d');
					const bgimage = canvas.createImage()
					//自己上传图片
					uni.chooseImage({
						success: function(res) {
							console.log(res.tempFilePaths[0])
							bgimage.onload = () => {
								ctx.drawImage(bgimage, 0, 0, canvas.width,canvas.height)
								ctx.scale(that.dpr, that.dpr);
							}
							bgimage.src = res.tempFilePaths[0]
						}
					})
				})
			},
		}
	}
</script>

欢迎提出这个canvas的各种坑！