js使用canvas绘制高清图片

来源：互联网发布：在线c语言教学系统编辑：程序博客网时间：2024/06/11 04:37

H5能使用canvas绘制图像，但是有些时候我们需要绘制高清的图片。

先介绍下几个定义：

什么是devicePixelRatio：

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels
(dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
如果devicePixelRatio > 1说明是高清屏幕了，现在的手机设备很多都是高清屏幕，我的手机devicePixelRatio 是2。

js代码

(function() {    var img = null; //在需要绘制的图片放在方法外定义，如果一个画板多次绘制时，不会出现闪屏的问题。    var w = 0, h = 0 ; //图片显示的宽高    var ratio = 1 ; //devicePixelRatio值    var ratio_w = 0, ratio_h = 0; //绘制高清图片宽高    var canvas = document.getElementById("canvas"),        ctx = canvas.getContext("2d");    $("#drawImg").each(function() {        //只有当屏幕宽度变化和img对象为空时候才进行一次初始化参数        if(img == null || w != window.innerWidth) {            ratio = getPixelRatio(ctx); //获取设备的devicePixelRatio            w = window.innerWidth;  //获取设备的显示屏幕宽高            h = this.height * (window.innerWidth / this.width); //图片加载完this.height才大于0.            ratio_w = canvas.width = w * ratio;  //计算屏幕的高清图片的宽高，同时设置画板的像素              ratio_h = canvas.height = h * ratio;            img = new Image(ratio_w, ratio_h);   //多次创建imgae绘制会闪屏            //这个是重点，我们需要把canvas画板通过css样式控制显示高度            $("#canvas").css({                width: (w + 'px'),                height: (h + 'px')            });        }        img.src = "images/foo.png";        //只有在load完成才会进行绘制。所以绘制需要写在onload事件中        img.onload = function() {            ctx.clearRect(0, 0, ratio_w, ratio_h); //清除画板，不清除图像会覆盖。            ctx.drawImage(img, 0, 0, ratio_w, ratio_h); //绘制高清图片        }    });    //获取设备的devicePixelRatio    function getPixelRatio(context) {        var backingStore = context.backingStorePixelRatio ||            context.webkitBackingStorePixelRatio ||            context.mozBackingStorePixelRatio ||            context.msBackingStorePixelRatio ||            context.oBackingStorePixelRatio ||            context.backingStorePixelRatio || 1;        return(window.devicePixelRatio || 1) / backingStore;    };})()

html代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    </head>    <body>        <img id="drawImg" src="images/foo.png" style="display: none;"/>        <canvas id="canvas"></canvas>        <script type="text/javascript" src="js/star.js" ></script>    </body></html>

绘制成功，我们看下看html的canvas代码，style中的高宽是属性中的高宽的50%，因为设备的devicePixelRatio为2。也就是说，画板像素就是图片像素大小，但是显示大小为屏幕大小
宽高样式变化了

0 0