canvas 模糊

2021-09-10 11:33:29 作者：互联网

让style以50%的效果展示
创建2倍的canvas

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>	
		</style>
        <script type="text/javascript">	
		
		  window.onload=function(){
			  let canvas = document.querySelector('#c1');
			  // 获取到屏幕倒是是几倍屏。
			  let getPixelRatio = function(context) {
			    var backingStore = context.backingStorePixelRatio ||
			      context.webkitBackingStorePixelRatio ||
			      context.mozBackingStorePixelRatio ||
			      context.msBackingStorePixelRatio ||
			      context.oBackingStorePixelRatio ||
			      context.backingStorePixelRatio || 1;
			     return (window.devicePixelRatio || 1) / backingStore;
			  };
			   // iphone6下得到是2 
			  const pixelRatio = getPixelRatio(canvas);
			  // 设置canvas的真实宽高
			  canvas.width = pixelRatio * canvas.offsetWidth; // 想当于 2 * 375 = 750 
			  canvas.height = pixelRatio * canvas.offsetHeight;
			  
			  var cxt =canvas.getContext("2d")
			  cxt.moveTo(2*pixelRatio,2*pixelRatio)
			  cxt.lineTo(399*pixelRatio,249*pixelRatio)
			  cxt.stroke()
		  }
	    </script>
	</head>
	<body>
		<canvas  id="c1" style="border:1px dashed #000000;width: 400px;height: 250px;" >
		</canvas >
	</body>
</html>

标签：canvas,pixelRatio,cxt,模糊,backingStorePixelRatio,context,backingStore
来源： https://www.cnblogs.com/supersdar/p/15250645.html