H5 学习笔记-持续更新

1. 关于canvas 画图在手机上有锯齿（ 不清晰）怎么解决

具体原因可参考这篇博客：https://blog.csdn.net/zSY_snake/article/details/99675196

 	/**
     * 获取屏幕的缩放比例
     * @param {*} context context2d 对象
     * @returns 
     */
    function getPixelRatio(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    };

    function adjustContextRatio(context){
        context.style.width = context.width + "px";
        context.style.height = context.height + "px";
        let ctx = context.getContext("2d");
        let g_titleCanvasRatio = getPixelRatio(ctx);
        context.width = context.width * g_titleCanvasRatio;
        context.height = context.height * g_titleCanvasRatio;
        ctx.scale(g_titleCanvasRatio, g_titleCanvasRatio);
    }

	// 获取canvas 对象
	let canvas = ...;
	// 调整context 比例
	adjustContextRatio(canvas);

2. 在微信浏览器上canvas 图层设置失效问题

在微信上canvas 默认位于最顶层，其他元素设置z-index 都会失效，这个问题无解，只能用canvas 去覆盖 canvas

3. 在部分浏览器打开摄像头失败的问题

在有些浏览器上面调用打开摄像头的方法会打开失败或超时，代码没问题
解决办法：需要使用用户的点击事件去调用打开摄像头的方法才能打开, 比如:

<button onclick="openCamera">打开摄像头</button>
<video id="cameraInput"></video>

function openCamera(){
	let cameraInput = document.quertSelector("#cameraInput");
	// TODO: 去调用打开摄像头的方法

ps: 可能是为了保护隐私安全才这么设计的吧

4. 在部分浏览器打开摄像头失败的问题

allowInsecureProtocol = true