记1次高分屏下canvas模糊不清难题

日期:2021-02-22 类型:科技新闻 

关键词:开发一个小程序多少钱,凡科轻站小程序,微信群抽奖小程序,小程序登录页面,微信小程序 微店

序言

近期在做新项目的情况下发现,在企业电脑上上没难题,在自身电脑上上确有难题。做的是canvas的新项目,在自身电脑上上运作的情况下,发现,会出現点一下选没中的难题也有,canvas更新会有残影难题。最先能够明确,这两个难题全是canvas元素界限有难题,可是从编码上看来是没难题的,因而我就猜想是不是和显示屏相关,终究canvas一些难题的确和显示屏相关乃至和硬件配置显卡相关。

devicePixelRatio特性

果真找出1个特性不一样: devicePixelRatio;
随后细心科学研究了下这个特性的含意,mdn上解释以下:

此特性回到当今显示信息机器设备的物理学像素辨别率与CSS像素辨别率的比值。该值还可以被解释为像素尺寸的占比:即1个CSS像素的尺寸相对1个物理学像素的尺寸的比值。

企业的台式机的devicePixelRatio为1,而我自身的电脑上为1.25;由于我的电脑上是高清屏的,那末甚么是高清屏呢?
高清显示信息屏基本原理以下:

  1. 1种具有超高像素密度的液晶屏
  2. 一样尺寸的显示屏上显示信息的像素点由1个变成好几个

那末大家就可以了解,高清屏上1个像素点变为devicePixelRatio个像素点,因而canvas画布也会收到危害,一样的照片,在高清屏上会增大,可是canvas具体规格沒有增大,由于照片会放缩,致使模糊不清。

canvas宽高与css宽高

那末怎样处理canvas高分屏难题呢?既然高分屏下canvas的像素点会变多,致使画布放缩,那末大家能不可以根据某种方式把canvas放缩回去呢?回答是能够的。
大家最先了解1下canvas的像素,大家先绘图1段文本

<canvas id="canvas1" width="300" height="150"></canvas>
....


ctx1.beginPath();
ctx1.font = '20px arial';
ctx1.fillText('Html5 canvas', 50, 50);

这样大家就获得以下:

大家在建立1个画布,这次大家根据css设定画布的宽高:

<canvas id="canvas2" style="width: 200px; height: 200px"></canvas>
.....



ctx2.beginPath();
ctx2.font = '20px arial';
ctx2.fillText('Html5 canvas', 50, 50);

这次大家获得以下实际效果:

大家能够很显著看到画布上的文本有显著的放缩,这是为何呢?大家能够这么了解: canvas是绘图照片的,大家应用canvas绘图完照片后,最先转化成1张依据canvas的宽高的照片,随后根据dom树由css3D渲染出来,因而canvas的宽高是照片的具体宽高,css的宽高是具体3D渲染出来的规格。那末大家转过头来了解devicePixelRatio,这个特性回到的是机器设备的物理学像素辨别率与CSS像素辨别率的比值,大家的canvas绘图出来后照片由于高清屏机器设备的危害,致使照片增大,但是大家在访问器的3D渲染对话框并沒有增大,因而照片会挤缩小放使得canvas画布会变得模糊不清,尽然高分屏的像素点变多了,致使照片增大,那末大家能够根据设定canvas的宽高设定devicePixelRatio倍的画布尺寸,随后设定canvas放缩占比为devicePixelRatio倍,维持和canvas等占比变大,随后这样大家非常于在绘图照片的情况下就放缩照片增大,随后根据css3D渲染又会放缩回去,这样canvas的尺寸就不容易失真了。编码以下:

function makeHighRes(canvas) {
    var ctx = canvas.getContext('2d');
    // Get the device pixel ratio, falling back to 1.               
    var dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;

    // Get the size of the canvas in CSS pixels.
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;
    // Give the canvas pixel dimensions of their CSS
    // size * the device pixel ratio.
    canvas.width = Math.round(oldWidth * dpr);
    canvas.height = Math.round(oldHeight * dpr);
    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';
    // Scale all drawing operations by the dpr, so you
    // don't have to worry about the difference.
    ctx.scale(dpr, dpr);
    return ctx;
}

此外:在网上有1些处理方法较为古老,应用了backingStoreRatio 这个特性,这个特性早已废料!
另外大家还可以应用这个库 hidpi-canvas-polyfill,他也是应用的大家这个方式来更改canvas绘图主视图的,但是库中还把全部canvas绘图api都放缩了相应的devicePixelRatio倍,考虑到很健全。

参照连接
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
https://www.jianshu.com/p/2cd5143cf9aa

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。