解决canvas不清晰问题

最新推荐文章于 2024-08-12 15:32:51 发布

Fighon-Blog

最新推荐文章于 2024-08-12 15:32:51 发布

阅读量9.2k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_37327931/article/details/77374842

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

canvas不清洗的原因是由于高清屏描绘的像素不一样，本应该是1px渲染的，有的却2px渲染;

解决办法：

将canvas扩大相应的倍数，css中设置正确的canvas高宽值就可以解决；

//获取canvas应该放大的倍数的方法；
function getPixelRatio(context) {
    var backingStore = context.backingStorePixelRatio 
    || context.webkitBackingStorePixelRatio 
    || context.mozBackingStorePixelRatio 
    || context.msBackingStorePixelRatio 
    || context.oBackingStorePixelRatio 
    || context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;

};

var myCanvas = document.getElementById(id);
var ctx = myCanvas.getContext('2d');
var ratio = getPixelRatio(ctx);
myCanvas.width = "实际de实际的宽度" * ratio;
myCanvas.height = "实际de实际的高度" * ratio;