canvas图像缩小放大,canvas放大缩小 不改变宽高

　　我们知道，有两种方法可以清空画布内容。

　　第一种方法是cearRect函数：

　　Context.cearrect (0，0，canvas.width，canvas.height)第二种方法是用原始值重置canvas的宽度(或高度)。

　　Canvas.height=canvas.height或canvas.height=canvas.height第二种方法可以工作是因为canvas的一个特性：

　　每当画布的高度或宽度被重置时，画布的内容将被清空。相关内容请参考https://www.w3school.com.cn/html5/att_canvas_width.asp。

　　在一个可视化项目中，我们发现一些计算机总是有无序的效果。

　　经过调试，我们发现是“canvas.width=canvas.width”。普通屏幕下不会有问题，但如果屏幕是高清屏幕就有问题了。这是因为，在高清屏幕下，为了处理绘制图形模糊的问题，我们通常会采取以下措施：

　　函数setup canvas(canvas){ let width=canvas . width，height=canvas.height，DPR=window . devicepixelrratio 1.0；如果(dpr！=1.0){ canvas . style . width=width px ；canvas . style . height=height px ；canvas.height=height * dprcanvas.width=width * dprctx.scale(dpr，DPR)；}}我们知道，高清屏下的window.devicePixelRatio都大于1。因此画笔将在绘制前缩放：

　　ctx.scale(dpr，DPR)；我们知道cavnas是一个基于状态的绘图组件。其中缩放值也在状态管理之下。当我们重置canvas的宽度(也是高度)时，我们不仅会清空canvas的canvas内容，还会将绘图状态重置为原始状态。在原始状态下，笔刷的缩放比例为1，缩放比例值会被重置为1，从而造成绘制效果的混乱。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。