logo
当前位置:首 页 > 编程技术 >前端技术 > 查看文章

前端开发常见问题精选(二)

前端技术, 编程技术 你是第21个围观者 0条评论 供稿者: 标签:

一、如何解决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>
var music = document.getElementById("music");
music.play();
document.addEventListener("WeixinJSBridgeReady", function () {   // 此处是对微信浏览器下的兼容处理
    music.play();
}, false);

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

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

一个有大大梦想但是没有支撑这梦想的技术的攻城狮,大家就当这个博客是你的技术工具箱吧,我会吧我工作中遇到的问题贴在这,大家需要的记得把我放到收藏夹哦! 百度输入“子傲代码”就可以了

—— 陈子傲

admin
你可能也喜欢Related Posts
众说纷纭Comments
大眼 可爱 大笑 坏笑 害羞 发怒 折磨 快哭了 大哭 白眼 晕 流汗 困 腼腆 惊讶 憨笑 色 得意 骷髅 囧 睡觉 眨眼 亲亲 疑问 闭嘴 难过 淡定 抗议 鄙视 猪头
小提示:直接粘贴图片到输入框试试
努力发送中...
footer logo
未经许可请勿自行使用、转载、修改、复制、发行、出售、发表或以其它方式利用本网站之内容
Copyright ©ziao design Studio All Rights Reserved.沪ICP备14052271号-3