一、如何解決Canvas畫布在移動(dòng)端顯示模糊的問(wèn)題批什?
Canvas畫布在PC端顯示正常廊佩,但是放在移動(dòng)端卻發(fā)現(xiàn)整個(gè)畫布都有點(diǎn)模糊膝宁,其實(shí)這里有個(gè)比較簡(jiǎn)單的解決方法:
先給canvas標(biāo)簽的width和height這兩個(gè)屬性值乘以2,再設(shè)置其樣式中的width和height的實(shí)際大小欧聘,最后注意須將JS中與Canvas相關(guān)的數(shù)值均乘以2片林。
舉個(gè)例子:
<!--PC端-->
<canvas id="canvas" width="400" height="200"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.font = 'normal 40px "Microsoft Yahei"';
context.textBaseline = 'top';
context.fillText('Hello World!',0,0);
};
</script>
<!--移動(dòng)端-->
<canvas id="canvas" width="800" height="400" style="width: 400px; height: 200px;"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.font = 'normal 80px "Microsoft Yahei"'; //這里的字體大小放大了兩倍
context.textBaseline = 'top';
context.fillText('Hello World!',0,0);
};
</script>
通過(guò)以上兩個(gè)端的代碼對(duì)比應(yīng)該就很清楚了,當(dāng)然怀骤,設(shè)置Canvas的width和height屬性也可以通過(guò)JS動(dòng)態(tài)添加:
canvas.width = 800;
canvas.height = 400;
二费封、forEach()中不能通過(guò)給回調(diào)函數(shù)參數(shù)item賦值的方式來(lái)改變數(shù)組。
在之前我寫的簡(jiǎn)述forEach()蒋伦、map()弓摘、every()、some()和filter()的用法一文當(dāng)中提到過(guò)forEach()的用法痕届,并且知道array[index] === item
韧献,雖然如此,但我們卻并不能將這兩者完全同等看待研叫。比如說(shuō)我想要將一個(gè)數(shù)組中的每一項(xiàng)乘以2锤窑,可以這樣寫:
var arr = [1,2,3];
arr.forEach(function(item,index,array){
array[index] *= 2;
});
console.log(arr); // [2, 4, 6]
但是我們卻不能將例子中的array[index]直接替換成item,這是必須要注意的一點(diǎn)嚷炉。
三渊啰、iOS系統(tǒng)和某些移動(dòng)端不兼容background-attachment:fixed,該如何解決申屹?
對(duì)于這樣的CSS兼容性問(wèn)題绘证,還是直接找個(gè)替代方案吧,這里你可使用元素的position:fixed來(lái)替代哗讥。如果你不想新增一個(gè)空的標(biāo)簽元素嚷那,也可以使用偽元素::before或::after替代击碗,在偽元素中設(shè)置背景圖片后將其固定定位缅茉,也能達(dá)到與background-attachment:fixed相同的效果。
四榴都、在iOS系統(tǒng)下的微信瀏覽器中,使用<audio>元素?zé)o法自動(dòng)播放音樂(lè)湖员,該如何解決贫悄?
如果是在PC端,我們完全可以僅僅使用<audio>就能實(shí)現(xiàn)音樂(lè)自動(dòng)播放功能娘摔,就像下面這樣:
<audio id="music" src="media/music.mp3" autoplay></audio>
是的窄坦,使用的是autoplay屬性,輕松就能實(shí)現(xiàn)凳寺。然而在移動(dòng)端鸭津,為了考慮兼容性,我們得這么寫:
<audio id="music" src="media/music.mp3"></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
var music = document.getElementById("music");
music.play();
document.addEventListener("WeixinJSBridgeReady", function () { // 此處是對(duì)微信瀏覽器下的兼容處理
music.play();
}, false);
事實(shí)上肠缨,在iOS系統(tǒng)中不僅僅只是微信瀏覽器下存在這樣的問(wèn)題逆趋,在其他瀏覽器下同樣存在,而這里只是解決了微信瀏覽器下的問(wèn)題晒奕,其他瀏覽器暫時(shí)還未找到合適的方法闻书,如有小伙伴找到相應(yīng)解決方案,歡迎補(bǔ)充~
以上是我在工作當(dāng)中所遇到的一些問(wèn)題總結(jié)脑慧,在此與大家共勉魄眉!