canvas 模糊
让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>
