請問如何解決canvas 在高清屏下的模糊問題
使用 canvas 畫出畫布大小的圖片時(shí)畫面很模糊, 就連畫出的文字也是模糊的, 有什么解決辦法嗎?
qq_A風(fēng)love銘_0
2017-11-10
4 回答
舉報(bào)
0/150
提交
取消
2019-05-29
我是先將? canvas的大小與? 圖片大小調(diào)成一致? ?然后在渲染過后的canva用 css的手段 將其限制大小? 這樣就不會(huì)失幀了
2019-05-29
<script> ??var?canvasa?=?document.getElementById("canvasa"); ??var?contexta?=?canvasa.getContext("2d"); ??var?canvasb?=?document.getElementById("canvasb"); ??var?contextb?=?canvasb.getContext("2d"); ??var?image?=?new?Image(); ??window.onload=function(){ ????image.src?=?"img/d.jpg"; ????image.onload=function(){ ??????canvasa.width=image.width;//這個(gè)是重點(diǎn) ??????canvasa.height=image.width;//這個(gè)是重點(diǎn) ??????canvasb.width=image.width;//這個(gè)是重點(diǎn) ??????canvasb.height=image.width;//這個(gè)是重點(diǎn) ??????contexta.drawImage(image,?0,?0,?canvasa.width,?canvasa.height) ??????canvasa.style.width='600px';//這個(gè)是重點(diǎn) ??????canvasa.style.height='600px';//這個(gè)是重點(diǎn) ????} ??}; ??function?fillter()?{ ????console.log(canvasa.style.width) ??????var?imageData?=?contexta.getImageData(0,0,canvasa.width,canvasa.height); ??????var?Data=imageData.data; ??????for?(var?i=0;i<canvasa.width*canvasa.height;i++){ ????????var?r=Data[4*i+0] ????????var?g=Data[4*i+1] ????????var?b=Data[4*i+2] ????????var?rgb=r*0.3+g*0.59+b*0.11 ????????Data[4*i+0]=rgb; ????????Data[4*i+1]=rgb; ????????Data[4*i+2]=rgb; ??????} ??????contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height); ????canvasb.style.width='600px';//這個(gè)是重點(diǎn) ????canvasb.style.height='600px';//這個(gè)是重點(diǎn) ??}; </script>2017-12-26
不知道我分享的這個(gè)能不能幫到你? ? ?
2017-12-26
(function($){
? ?var myCanvas = document.getElementById("myCanvas");
? ?var cxt = myCanvas.getContext("2d");
? ?var image = new Image();
? ?// polyfill 提供了這個(gè)方法用來獲取設(shè)備的 pixel ratio
? ?var getPixelRatio = function(context) {
? ? ? ?var backingStore = context.backingStorePixelRatio ||
? ? ? ? ? ? ? ?context.webkitBackingStorePixelRatio ||
? ? ? ? ? ? ? ?context.mozBackingStorePixelRatio ||
? ? ? ? ? ? ? ?context.msBackingStorePixelRatio ||
? ? ? ? ? ? ? ?context.oBackingStorePixelRatio ||
? ? ? ? ? ? ? ?context.backingStorePixelRatio || 1;
? ? ? ?return (window.devicePixelRatio || 1) / backingStore;
? ?};
? ?var ratio = getPixelRatio(cxt);
? ?window.onload = function(){
? ? ? ?image.src = "images/phone.png";
? ? ? ?image.onload = function(){
? ? ? ? ? ?// 注意，這里的 width 和 height 變成了 width * ratio 和 height * ratio
? ? ? ? ? ?cxt.drawImage(image, 0, 0, myCanvas.width * ratio, myCanvas.height * ratio);
? ? ? ?}
? ?};
})(jQuery)