前端开发常见问题精选（二）

一、如何解决Canvas画布在移动端显示模糊的问题？

Canvas画布在PC端显示正常，但是放在移动端却发现整个画布都有点模糊，其实这里有个比较简单的解决方法：

先给canvas标签的width和height这两个属性值乘以2，再设置其样式中的width和height的实际大小，最后注意须将JS中与Canvas相关的数值均乘以2。

举个例子：

<!--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>

<!--移动端-->
<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>

通过以上两个端的代码对比应该就很清楚了，当然，设置Canvas的width和height属性也可以通过JS动态添加：

canvas.width = 800;
canvas.height = 400;

二、forEach()中不能通过给回调函数参数item赋值的方式来改变数组。

在之前我写的简述forEach()、map()、every()、some()和filter()的用法一文当中提到过forEach()的用法，并且知道array[index] === item，虽然如此，但我们却并不能将这两者完全同等看待。比如说我想要将一个数组中的每一项乘以2，可以这样写：

var arr = [1,2,3];
arr.forEach(function(item,index,array){
    array[index] *= 2; 
});
console.log(arr);   // [2, 4, 6]

但是我们却不能将例子中的array[index]直接替换成item，这是必须要注意的一点。

三、iOS系统和某些移动端不兼容background-attachment:fixed，该如何解决？

对于这样的CSS兼容性问题，还是直接找个替代方案吧，这里你可使用元素的position:fixed来替代。如果你不想新增一个空的标签元素，也可以使用伪元素::before或::after替代，在伪元素中设置背景图片后将其固定定位，也能达到与background-attachment:fixed相同的效果。

四、在iOS系统下的微信浏览器中，使用<audio>元素无法自动播放音乐，该如何解决？

如果是在PC端，我们完全可以仅仅使用<audio>就能实现音乐自动播放功能，就像下面这样：

<audio id="music" src="media/music.mp3" autoplay></audio>

是的，使用的是autoplay属性，轻松就能实现。然而在移动端，为了考虑兼容性，我们得这么写：

<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 () {   // 此处是对微信浏览器下的兼容处理
    music.play();
}, false);

事实上，在iOS系统中不仅仅只是微信浏览器下存在这样的问题，在其他浏览器下同样存在，而这里只是解决了微信浏览器下的问题，其他浏览器暂时还未找到合适的方法，如有小伙伴找到相应解决方案，欢迎补充~

以上是我在工作当中所遇到的一些问题总结，在此与大家共勉！