html5 canvas手写字代码(兼容手机端)

html5 canvas手写字代码(兼容手机端)

<!DOCTYPE html>
<html>
<head>
    <title>画板实验</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
    </style>
</head>
<body style="background: #FCBE00" >

<canvas id="myCanvas" ></canvas>

<div>
    <button onclick="clean();">清 空</button>
    <button onclick="save();">生成图片</button>
</div>

<img id='img'/>

<script type="text/javascript">
    var canvas,board,img;
    canvas = document.getElementById('myCanvas');
    img= document.getElementById('img');

    canvas.height = 300;
    canvas.width = 300;

    board = canvas.getContext('2d');

    var mousePress = false;
    var last = null;

    function beginDraw(){
        mousePress = true;
    }

    function drawing(event){
        event.preventDefault();
        if(!mousePress)return;
        var xy = pos(event);
        if(last!=null){
            board.beginPath();
            board.moveTo(last.x,last.y);
            board.lineTo(xy.x,xy.y);
            board.stroke();
        }
        last = xy;

    }

    function endDraw(event){
        mousePress = false;
        event.preventDefault();
        last = null;
    }

    function pos(event){
        var x,y;
        if(isTouch(event)){
            x = event.touches[0].pageX;
            y = event.touches[0].pageY;
        }else{
            x = event.offsetX+event.target.offsetLeft;
            y = event.offsetY+event.target.offsetTop;
        }
//               log('x='+x+' y='+y);
        return {x:x,y:y};
    }

    function log(msg){
        var log = document.getElementById('log');
        var val = log.value;
        log.value = msg+'\n'+val;
    }

    function isTouch(event){
        var type = event.type;
        if(type.indexOf('touch')>=0){
            return true;
        }else{
            return false;
        }
    }

    function save(){
        //base64
        var dataUrl = canvas.toDataURL();
        img.src = dataUrl;
    }


    function clean(){
        board.clearRect(0,0,canvas.width,canvas.height);

    }

    board.lineWidth = 1;
    board.strokeStyle="#0000ff";


    canvas.onmousedown = beginDraw;
    canvas.onmousemove = drawing;
    canvas.onmouseup = endDraw;
    canvas.addEventListener('touchstart',beginDraw,false);
    canvas.addEventListener('touchmove',drawing,false);
    canvas.addEventListener('touchend',endDraw,false);
</script>


</body>
</html>

html5传感器

html5传感器(注意苹果和安卓方向是相反的 回调函数触发的速度苹果要快很多 设置坐标不要设置在回调函数里)
以下是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <title>Title</title>

</head>
<body>
x:<div style="font-size: 55px;" id="x">x</div>
y:<div style="font-size: 55px;" id="y">y</div>
z:<div style="font-size: 55px;" id="z">z</div>
speed:<div style="font-size: 55px;" id="speed">speed</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
    $(function () {
        
        var shakeThreshold = 1000; // 定义一个摇动的阈值
        var lastUpdate = 0; // 记录上一次摇动的时间
        var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据

        // 监听传感器运动事件
        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        } else {
            alert('本设备不支持devicemotion事件');
        }

        // 运动传感器处理
        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
            $('#x').text(acceleration.x);
            $('#y').text(acceleration.y);
            $('#z').text(acceleration.z);
            var curTime = new Date().getTime();

            // 100毫秒进行一次位置判断
            if ((curTime - lastUpdate) > 100) {

                var diffTime = curTime - lastUpdate;
                lastUpdate = curTime;

                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;



                var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
                $('#speed').text(speed);
                // 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值,则判断设备进行了摇晃操作
                if (speed > shakeThreshold) {
                    alert('摇动了');
                }

                lastX = x;
                lastY = y;
                lastZ = z;
            }
        }
    })

</script>
</body>
</html>

测试网址 可以观察x y z变化 http://newmiracle.cn/yaobai.html
ps 变化都是-10到10的变化 只要看整数就行 小数点不断的变化不用去鸟他

html5点击input没有出现光标完美解决方案

html5点击input没有出现光标完美解决方案

   <input type="text" placeholder="输入姓名" class="inputname" id="id_name">
            <input type="text" placeholder="输入手机" class="inputphone" id="id_phone">

直接自己用jquery 写点击出现光标

   $('.inputname, .inputphone').on('touchstart',function () {
           $(this).focus();
    })

html5滚动页面简单写法

html5滚动页面简单写法
纵向滚动比较简单

直接在外面加个高度 然后overflow-y: auto;

横向比较复杂了
外面写两层
最外面一层写个宽度 overflow-x: auto;
第二层 写width:10000rem 宽度写死 写auto不行 不会自适应里面的宽度

如果点击按钮滚动可以采取如下代码

$('.zhufuyussw').animate({scrollLeft: 1000}, 1000);

html5 audio标签切换播放音乐的方法

html5 audio标签切换播放音乐的方法

<audio id="music1"  preload loop="loop"></audio>
<div style="width:720px; height:60px;" luyinpath="/weiqingshu/music/music.mp3" class="ceshiqiehuan">测试1</div>
<div style="width:720px; height:60px;" luyinpath="/dongjun12/music/music.mp3" class="ceshiqiehuan">测试2</div>
<div style="width:720px; height:60px;" luyinpath="/kelaweiloushu/music/music.mp3" class="ceshiqiehuan">测试3</div>
<div style="width:720px; height:60px;" luyinpath="/lingjuli/music/music.mp3" class="ceshiqiehuan">测试4</div>
$('.ceshiqiehuan').each(function () {
    $(this).on('touchstart', function () {

        $('#music1')[0].pause();
        var luyinpath = $(this).attr('luyinpath');
        $('#music1').attr('src', luyinpath);
        $('#music1')[0].play();
    })
})

总结
先pause关闭 然后更换路径 然后play播放

HTML5微信jssdk录音播放语音的方法

HTML5微信jssdk录音播放语音的方法
需要注意的2个问题
1 就是一定要判断1秒内 录音都不算 ps:太短不能录音
2 录音超过1分钟 会发现正在录音突然消失 所以要写wx.onVoiceRecordEnd 这个是是1分钟会自动出发 然后写上传数据 ps这个必须要写在wx.startRecord里面 不然不触发!!!切记

前端代码如下

var START;
 $('.luyin').on('touchstart',function () {
  new Date().getTime();
        wx.startRecord({
            success: function(){
                START = new Date().getTime();
                wx.onVoiceRecordEnd({
                    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                    complete: function (res) {
                        alert('最多只能录制一分钟');
                        var localId = res.localId;
                        uploadluyin(localId,60000);
                    }
                });
            },
            cancel: function () {
                alert('用户拒绝授权录音');
                return false;
            }
        });

    })
    $('.luyin').on('touchend',function () {
        var END = new Date().getTime();
        //录音时间
        var luyintime=END - START;
        if(luyintime < 2000){
            END = 0;
            START = 0;
            wx.stopRecord({});
            alert('录音时间不能少于2秒');
            return false;
        }else {


            wx.stopRecord({
                success: function (res) {
                    var localId = res.localId;

                    uploadluyin(localId,luyintime);

                }
            });
        }
    })
    
    function uploadluyin(localId,luyintime) {
        wx.uploadVoice({
            localId: localId, // 需要上传的音频的本地ID,由stopRecord接口获得
            isShowProgressTips: 1, // 默认为1,显示进度提示
            success: function (res) {
                var serverId = res.serverId; // 返回音频的服务器端ID
                console.log(serverId);

                $.post("/home/xishanluyin/scyuyin", {
                            "serverId": serverId,
                            "luyintime": luyintime
                        },
                        function (data) {
                            if (data.success == 1) {
                                alert('录音成功');
                            } else {
                                alert(data.msg);
                            }
                        }, "json");
            }
        })
    }

后端代码 核心代码如下直接写入amr就行 因为生成的默认都是amr

$ft = copy("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$accessToken}&media_id={$imgServerId}",
			"{$imgServerId}.mp3");
   //转成mp3 注意只有在真机上才可以成功转成mp3 微信web开发者工具生成的amr不能转成mp3的
 shell_exec('ffmpeg -i _wb2tS6SdvJxNu762u-qSfJgrxsEDw-fjXJSIitgD9_GBTvoLpIzAyzA9d7Wil_W.amr _wb2tS6SdvJxNu762u-qSfJgrxsEDw-fjXJSIitgD9_GBTvoLpIzAyzA9d7Wil_W.mp3');

ffmpeg 命令需要安装一些软件
具体说明请ffmpeg源码安装教程
转好的mp3拖到浏览器测试下 如果可以 就说明转mp3成功了

然后返回web路径就OK啦 这个audio就可以访问啦

HTML5微信长按图片不会弹出菜单的解决方法

HTML5微信长按图片不会弹出菜单的解决方法

<div ontouchstart = "return false;">
</div>

上面代码这个长按不会弹出 复制提示

然后做成div 有图片用background:url(); 不要做成img 这样长按不会提示你发送图片

ps: -webkit-user-select: none; 这个东西还是不要用 苹果上input标签会输入不了 貌似。。

html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

大家都知道需要在点击时候后 播放
ps:如果点击ajax 回来播放也不行,必须点击立即播放

要背景自动播放只能采取下面方案

    wx.ready(function () {
 $('#music1')[0].play();
   })

要延迟播放 那就延迟 wx.ready函数的运行 不能在wx.ready里面延迟播放