• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        關于canvas繪制模糊問題的解決方法

          發布時間:2019-09-24 15:51:32   作者:小鱷魚的大哥哦   我要評論
        這篇文章主要介紹了關于canvas繪制模糊問題的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

        模糊原因

        首先,需要理解canvas的展示機制。

        <canvas id="map" width="375" height="667"></canvas>

        我繪制了一張375px的canvas,iphone6的寬度也是375px,ok,canvas鋪滿了整個屏幕。

        那么canvas的大小就是375px,canvas類似于圖片,一張375px的圖片,我們就把它當做是圖片來看就好了。我,尖沙咀段坤說的。

        如果遇到了屏幕寬度400px的手機,那么圖片會 拉伸,canvas也會拉伸,拉伸則必然會模糊。

        那么iphone6確實是375px寬度的手機,還是會出現模糊問題,為什么呢?手機端會存在高清屏的問題。也就是我們說的2倍屏或者3倍屏,也叫作屏幕的DPI。高清屏在繪制界面時,會把2px的寬度渲染成1px,也就達到了高清的效果。也就是說,我們在高清屏下看到的375px其實是750個像素點繪制出來的,canvas其實是375px被拉伸到了750px再展示出來的,拉伸則必然會模糊。

        好了,模糊的原因知道了,其實就是高清屏所帶來的麻煩,怎么解決呢?

        解決方法

        如果是2倍屏,我們把設計圖上375px的canvas畫成750px不就解決了?

        設置canvas樣式

        這里我們不寫width和height,而直接寫style。把它看成是圖片,我們先不管圖片原寬高是多少,不管拉伸還是壓縮,直接讓他鋪滿整個屏幕。style里寫的寬高不是圖片的原寬高,也就是style里寫的寬高并不是canvas的真實寬高

        <canvas id="map" style="width: 375px;height:330px;"></canvas>

        設置canvas寬高

        上面的style并不是canvas的真實寬高,那么我們如何設置它的寬高呢?

        普通屏,2倍屏,3倍屏如果分別適配?

        <canvas id="map" style="width: 375px;height:330px;"></canvas>
        
        <script>
        let canvas = document.querySelector('#map');
        // 獲取到屏幕倒是是幾倍屏。
        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;
        </script>
        
        

        那么canvas的寬高就變成了下圖這樣,750寬度的canvas,如果你是2倍屏我就剛好能夠適應。!

        設置后的寬高

        開始畫點

        比如,375的設計圖上,有一個半徑為2px的圓點,點的位置是x:100,y:100。

        那么我們現在canvas的寬度是750,寬高變成了之前的2倍。為了視覺上位置保持不變,我們畫點的位置就應該是x:100*pixelRatio,y:100*pixelRatio。

        完整代碼如下:

        <canvas id="map" style="width: 375px;height:330px;"></canvas>
        
        <script>
        let canvas = document.querySelector('#map');
        // 獲取到屏幕倒是是幾倍屏。
        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;
        
        // 開始畫點
        let ctx = canvas.getContext("2d");
        ctx.beginPath();
         // 375設計圖上的位置和尺寸都應該*pixelRatio 因為我們現在的canvas是750
        ctx.arc(100*pixelRatio, 100*pixelRatio, 2*pixelRatio, 0, 2 * Math.PI);
        ctx.fillStyle = "#fff";
        ctx.fill();
        ctx.closePath();
        
        // ...你的其他代碼
        </script>

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            灵宝 | 滁州 | 桐城 | 长治 | 晋江 | 雄安新区 | 仙桃 | 温州 | 大兴安岭 | 厦门 | 张家界 | 白银 | 抚顺 | 楚雄 | 南平 | 临沂 | 武夷山 | 江苏苏州 | 阳泉 | 阿勒泰 | 广西南宁 | 保亭 | 景德镇 | 贺州 | 宜都 | 保亭 | 庆阳 | 慈溪 | 湘西 | 亳州 | 郴州 | 济源 | 诸暨 | 宝鸡 | 石嘴山 | 姜堰 | 寿光 | 平凉 | 锡林郭勒 | 遵义 | 盘锦 | 襄阳 | 天水 | 北海 | 柳州 | 莒县 | 丹东 | 福建福州 | 阜新 | 玉树 | 红河 | 泰安 | 项城 | 大庆 | 临沧 | 蓬莱 | 阿拉尔 | 亳州 | 定西 | 通辽 | 泰兴 | 香港香港 | 平顶山 | 楚雄 | 台湾台湾 | 内蒙古呼和浩特 | 曲靖 | 那曲 | 象山 | 丽江 | 通辽 | 新泰 | 周口 | 德州 | 无锡 | 泸州 | 九江 | 安阳 | 邵阳 | 抚顺 | 铜川 | 乐清 | 邢台 | 新沂 | 怀化 | 昌吉 | 朔州 | 台北 | 东方 | 醴陵 | 宁国 | 荆门 | 恩施 | 嘉兴 | 恩施 | 吉林长春 | 孝感 | 霍邱 | 泰州 | 临沂 | 莱州 | 上饶 | 淮南 | 海拉尔 | 阳春 | 大连 | 张掖 | 晋江 | 七台河 | 榆林 | 文昌 | 马鞍山 | 北海 | 西双版纳 | 温州 | 河北石家庄 | 山南 | 阜阳 | 仁寿 | 双鸭山 | 菏泽 | 黑龙江哈尔滨 | 临海 | 吐鲁番 | 枣庄 | 吕梁 | 琼海 | 燕郊 | 延边 | 聊城 | 日喀则 | 泰安 | 河源 | 果洛 | 江苏苏州 | 武夷山 | 广西南宁 | 玉树 | 亳州 | 汉川 | 大连 | 铜仁 | 海门 | 昭通 | 吉林 | 黄山 | 泰兴 | 莒县 | 营口 | 丽江 | 黄石 | 沛县 | 亳州 | 克拉玛依 | 商丘 | 博罗 | 莱州 | 陇南 | 霍邱 | 永康 | 乳山 | 梅州 | 三亚 | 山南 | 张北 | 山东青岛 | 吴忠 | 如东 | 西藏拉萨 | 永康 | 深圳 | 舟山 | 苍南 | 博罗 | 晋中 | 岳阳 | 新泰 | 儋州 | 邹平 | 南京 | 抚州 | 黄石 | 义乌 | 盐城 | 启东 | 湖南长沙 | 吴忠 | 双鸭山 | 沭阳 | 玉树 | 日喀则 | 内江 | 瑞安 | 贺州 | 南阳 | 果洛 | 阿坝 | 庄河 | 那曲 | 眉山 | 博尔塔拉 | 迁安市 | 文山 | 安阳 | 芜湖 | 天长 | 滁州 | 乐山 | 馆陶 | 绍兴 | 明港 | 呼伦贝尔 | 济源 | 包头 | 来宾 | 台南 | 库尔勒 | 珠海 | 浙江杭州 | 衡阳 | 汉川 | 莒县 | 江门 | 和田 | 仙桃 | 湖南长沙 | 图木舒克 | 崇左 | 漯河 | 周口 | 内江 | 涿州 | 鞍山 | 杞县 | 大庆 | 乌兰察布 | 临夏 | 遵义 | 黄冈 | 沧州 | 香港香港 | 如东 | 中卫 | 兴化 | 武威 | 南阳 | 澳门澳门 | 安阳 | 张家界 | 昌吉 | 大丰 | 威海 | 台湾台湾 | 清远 | 日喀则 | 衡水 | 苍南 | 上饶 | 佛山 | 嘉善 | 济南 | 简阳 | 定安 | 日土 | 湖州 | 黄冈 | 东阳 | 泗洪 | 克孜勒苏 | 嘉峪关 | 顺德 | 启东 | 广元 | 新泰 | 澳门澳门 | 图木舒克 | 德宏 | 乐山 | 郴州 | 宁德 | 遵义 | 昆山 | 山南 | 随州 | 郴州 | 扬州 | 双鸭山 | 濮阳 | 宝鸡 | 安顺 | 安顺 | 曹县 | 乐清 | 潜江 | 吐鲁番 | 厦门 | 楚雄 | 淮北 | 香港香港 | 安岳 | 盘锦 | 临沧 | 东台 | 金华 | 烟台 | 阳春 | 安吉 | 乐清 | 黄石 | 甘肃兰州 | 山东青岛 | 商丘 | 无锡 | 昭通 | 南阳 | 葫芦岛 | 自贡 | 通化 | 东海 | 克孜勒苏 | 渭南 | 张掖 | 迪庆 | 桐城 | 七台河 | 马鞍山 | 松原 | 宿迁 | 长兴 | 丹东 | 南平 | 巢湖 | 滨州 | 喀什 | 石嘴山 | 聊城 | 牡丹江 | 启东 | 中卫 | 溧阳 | 渭南 | 巴彦淖尔市 | 阜新 | 嘉峪关 | 招远 | 开封 | 宝鸡 | 长垣 | 万宁 | 甘肃兰州 | 禹州 | 临汾 | 莆田 | 邹平 | 东海 | 宁波 | 燕郊 | 五家渠 | 济南 | 延安 | 巢湖 | 郴州 | 阿勒泰 | 池州 | 江西南昌 | 郴州 | 日喀则 | 温州 | 嘉善 | 丹东 | 台州 | 乐山 | 通辽 | 泰安 | 怀化 | 通辽 | 驻马店 | 东台 | 山西太原 | 宁波 | 南京 | 定西 | 七台河 | 昭通 | 平凉 | 衡水 | 济南 | 杞县 | 赤峰 | 五指山 | 宝应县 | 揭阳 | 黄南 | 伊犁 | 雅安 | 河源 | 东阳 | 廊坊 | 随州 | 阿克苏 | 龙岩 | 宣城 | 德州 | 铜陵 | 甘南 | 信阳 | 包头 | 沛县 | 延安 | 吉林 | 屯昌 | 海南 | 仁寿 | 嘉兴 | 阜阳 | 景德镇 | 广元 | 新疆乌鲁木齐 | 阿拉尔 | 广汉 | 白银 | 秦皇岛 | 日喀则 | 中卫 | 六盘水 | 东阳 | 怀化 | 岳阳 | 菏泽 | 如皋 | 铜陵 | 防城港 | 黔东南 | 无锡 | 克孜勒苏 | 黄山 | 许昌 | 鹰潭 | 盘锦 | 马鞍山 | 保亭 | 保山 | 吐鲁番 | 安康 | 武夷山 | 佛山 | 项城 | 启东 | 日土 | 山东青岛 | 德阳 | 日喀则 | 昭通 | 铁岭 | 辽阳 | 潮州 | 大同 | 景德镇 | 正定 | 乳山 | 金坛 | 信阳 | 天门 | 赤峰 | 楚雄 | 日喀则 | 玉环 | 东方 | 张家口 | 莱州 | 朝阳 | 淮北 | 临沧 | 白山 | 澄迈 | 溧阳 | 楚雄 | 定西 | 万宁 | 滁州 | 池州 | 肇庆 | 襄阳 | 咸宁 | 义乌 | 甘南 | 台北 | 象山 | 博罗 | 沛县 | 恩施 | 神木 | 六安 | 菏泽 | 宁国 | 大庆 | 东海 | 郴州 | 许昌 | 亳州 | 湖南长沙 | 锦州 | 扬州 | 文山 | 来宾 | 珠海 | 黔南 | 黄南 | 十堰 | 汕头 | 东莞 | 赣州 | 宣城 | 伊犁 | 蚌埠 | 张北 | 泸州 | 乌兰察布 | 白沙 | 大理 | 乐清 | 周口 | 湖州 | 南安 | 任丘 | 厦门 | 无锡 | 东台 | 金华 | 济南 | 宁夏银川 | 汕尾 | 巢湖 | 衢州 | 宜昌 | 日土 | 安顺 | 厦门 | 朔州 | 象山 | 怒江 | 海门 | 兴安盟 | 连云港 | 白沙 | 广州 | 海北 | 哈密 | 三沙 | 宜宾 | 南安 | 日土 | 塔城 | 枣阳 | 株洲 | 桂林 | 厦门 | 宝应县 | 基隆 | 温岭 | 枣阳 | 吐鲁番 | 任丘 | 广汉 | 吕梁 | 陇南 | 阳春 | 阿克苏 | 临海 | 衢州 | 湛江 | 辽源 | 珠海 | 台北 | 安徽合肥 | 泗洪 | 溧阳 | 克孜勒苏 | 高雄 | 三明 | 莱芜 | 阜阳 | 宁夏银川 | 广饶 | 莒县 | 汉中 | 湘西 | 四川成都 | 文昌 | 博尔塔拉 | 哈密 | 安吉 | 渭南 | 遵义 | 扬中 | 延安 | 红河 | 武安 | 长兴 | 澳门澳门 | 深圳 | 吉林 | 楚雄 | 揭阳 | 丹阳 | 烟台 | 菏泽 | 海西 | 怀化 | 金昌 | 克孜勒苏 | 余姚 | 张掖 | 新余 | 长治 | 三沙 | 东海 | 克孜勒苏 | 汕尾 | 那曲 | 平凉 | 张掖 | 吴忠 | 白沙 | 钦州 | 呼伦贝尔 | 泰安 | 辽宁沈阳 | 定西 | 无锡 | 芜湖 | 南阳 | 莒县 | 章丘 | 苍南 | 澳门澳门 | 湖州 | 临沂 | 库尔勒 | 任丘 | 曹县 | 天长 | 通化 | 永州 | 珠海 | 聊城 | 辽阳 | 顺德 | 东台 | 九江 | 商洛 | 长治 | 安徽合肥 | 安庆 | 淮北 | 吴忠 | 余姚 | 寿光 | 衢州 | 改则 | 阜新 | 崇左 | 赤峰 | 新余 | 象山 | 葫芦岛 | 南安 | 苍南 | 凉山 | 浙江杭州 | 邢台 | 潜江 | 简阳 | 北海 | 鄢陵 | 邹平 | 瑞安 | 江门 | 温州 | 衡阳 | 姜堰 | 宁国 | 东海 | 锡林郭勒 | 周口 | 阿坝 | 娄底 | 巢湖 | 娄底 | 保山 | 牡丹江 | 承德 | 安岳 | 阿坝 | 黔南 | 神农架 | 广元 | 锡林郭勒 | 台山 | 运城 | 泗洪 | 东台 | 孝感 | 杞县 | 防城港 | 兴安盟 | 伊春 | 宿州 | 襄阳 | 靖江 | 汉中 | 绵阳 | 建湖 | 普洱 | 永新 | 丹东 | 邯郸 | 烟台 | 浙江杭州 | 丹东 | 河北石家庄 | 新沂 | 泰兴 | 辽阳 | 河北石家庄 | 赵县 | 宁波 | 桐城 | 江门 | 铜陵 | 大庆 | 信阳 | 兴安盟 | 库尔勒 | 防城港 | 定安 | 三沙 | 广州 | 台州 | 三亚 | 鄢陵 | 湖州 | 阿克苏 | 邯郸 | 赤峰 | 岳阳 | 桐城 | 日土 | 百色 | 文山 | 鹰潭 | 文昌 | 锡林郭勒 | 邯郸 | 襄阳 | 梅州 | 昌都 | 慈溪 | 鹤岗 | 阿克苏 | 武安 | 博尔塔拉 | 晋江 | 扬中 | 呼伦贝尔 | 随州 | 海南海口 | 天长 | 黑河 | 马鞍山 | 郴州 | 陵水 | 四平 | 莱州 | 保定 | 三沙 | 延安 | 湖南长沙 | 内蒙古呼和浩特 | 黄南 | 塔城 | 襄阳 | 公主岭 | 泰州 | 呼伦贝尔 | 宜春 | 清远 | 辽源 | 六安 | 上饶 | 大同 | 贵港 | 湘潭 | 灌云 | 马鞍山 | 金昌 | 玉环 | 大连 | 日喀则 | 泰兴 | 那曲 | 单县 | 屯昌 | 平顶山 | 巴彦淖尔市 | 五家渠 | 东方 | 琼海 | 清远 | 北海 | 大同 | 惠州 | 岳阳 | 宁波 | 安康 | 商丘 | 济南 | 赣州 | 吉林长春 | 吴忠 | 玉树 | 乌海 | 泉州 | 枣庄 | 大理 | 平凉 | 启东 | 湖南长沙 | 楚雄 | 长葛 | 大兴安岭 | 忻州 | 潜江 | 库尔勒 | 湘潭 | 澄迈 | 信阳 | 阿勒泰 | 江苏苏州 | 常州 | 齐齐哈尔 | 西双版纳 | 齐齐哈尔 | 黔东南 | 舟山 | 吉林 | 安康 | 六盘水 | 白山 | 辽宁沈阳 | 庆阳 | 万宁 | 荣成 | 遵义 | 新泰 | 海丰 | 宜昌 | 商丘 | 池州 | 南阳 | 上饶 | 营口 | 红河 | 包头 | 石河子 | 沧州 | 潍坊 | 平顶山 | 黑龙江哈尔滨 | 泗洪 | 馆陶 | 沭阳 | 德阳 | 玉林 | 西藏拉萨 | 邹平 | 梅州 | 乳山 | 汉中 | 鹤壁 | 清徐 | 洛阳 | 海北 | 济源 | 商丘 | 日喀则 | 抚州 | 台湾台湾 | 石嘴山 | 泰兴 | 肇庆 | 靖江 | 汝州 | 澳门澳门 | 德州 | 蓬莱 | 扬中 | 咸阳 | 淄博 | 东方 | 怀化 | 福建福州 | 天门 | 河北石家庄 | 怒江 | 兴化 | 莱芜 | 遵义 | 周口 | 安庆 | 南京 | 陕西西安 | 毕节 | 六盘水 | 丽江 | 贺州 | 安阳 | 云浮 | 三亚 | 宜昌 | 绥化 | 台湾台湾 | 楚雄 | 朝阳 | 哈密 | 台中 | 赣州 | 自贡 | 佛山 | 滨州 | 偃师 | 铜陵 | 海南海口 | 赣州 | 永康 | 台湾台湾 | 阿拉尔 | 武威 | 溧阳 | 衡阳 | 青海西宁 | 漳州 | 乌兰察布 | 广元 | 宝应县 | 湘西 | 仁寿 | 安康 | 海西 | 金昌 | 宜昌 | 嘉善 | 邵阳 | 阜新 | 基隆 | 蓬莱 | 高雄 | 绥化 | 海安 | 公主岭 | 清远 | 厦门 | 黑龙江哈尔滨 | 沛县 | 海南 | 阿坝 | 威海 | 姜堰 | 洛阳 | 鹤壁 | 赤峰 | 白沙 | 襄阳 | 改则 | 运城 | 定安 | 榆林 | 绵阳 | 屯昌 | 眉山 | 南通 | 烟台 | 包头 | 海门 | 桂林 | 绍兴 | 武安 | 赤峰 | 邹城 | 邹城 | 黑河 | 果洛 | 简阳 | 西双版纳 | 甘孜 | 衢州 | 武夷山 | 玉树 | 灌云 | 焦作 | 嘉峪关 | 黔西南 | 来宾 | 临夏 | 沛县 | 临汾 | 驻马店 | 大兴安岭 | 雅安 | 潍坊 | 贺州 | 莒县 | 荆门 | 芜湖 | 江西南昌 | 珠海 | 博尔塔拉 | 曹县 | 衡水 | 辽宁沈阳 | 德阳 | 玉林 | 新乡 | 东营 | 白山 | 白城 | 营口 | 延边 | 邹城 | 果洛 | 保山 | 咸阳 | 阿拉善盟 | 濮阳 | 和田 | 汝州 | 义乌 | 安徽合肥 | 宁德 | 东台 | 三亚 | 德宏 | 贵港 | 长兴 | 朔州 | 长兴 | 乐山 | 单县 | 四川成都 | 衡阳 | 佛山 | 海南 | 朝阳 | 滁州 | 普洱 | 大兴安岭 | 兴化 | 本溪 | 垦利 | 大庆 | 廊坊 | 仁寿 | 中山 | 德宏 | 秦皇岛 | 海西 | 象山 | 红河 | 阳春 | 乐山 | 临汾 | 茂名 | 天水 | 公主岭 | 任丘 | 邢台 | 宜都 | 新泰 | 衢州 | 福建福州 |