jquery_mobile结合canvas制做画板

时间 2019-11-09

标签 jquery mobile 结合 canvas 制做画板栏目 JQuery 繁體版

原文原文链接

jquery_mobile结合canvas制做画板javascript

简介：咱们都知道网页在手机上运行，有不少事件多是手机没办法执行的。但咱们总能找到对应的兼容方法。jquery_mobile就是一款好用的能运行在手机等设备的工具。因此咱们使用jquery_mobile+canvas来制做画板就是可以运行在手机上。甚至能够把它打包为apk文件做为程序运行。css

H5页面代码html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=IE8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Canvas Mouse Event Demo</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.squareui.css" />
    <link href="css/test.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="show">
    <canvas id="myCanvas" class="myCanvas">

    </canvas>
</div>
<script src="js/test.js"></script>
</body>
</html>

js代码java

$(document).ready(function(){
    $( window ).orientationchange();
    var height=$(window).width();
    var width=$(window).width();
    var oC = $('#myCanvas')[0];
    var ctx = oC.getContext('2d');
    $('#myCanvas').css('width',width);
    $('#myCanvas').css('height',height);
    oC.width = width;
    oC.height = height;
    ctx.strokeStyle="#ffffff";
    ctx.lineCap="round";
    var s=0;
    for(var i=0; i<4; i++){
        s=s+75;
        ctx.beginPath();
        ctx.moveTo(0,s);
        ctx.lineTo(width,s);
        ctx.stroke();
        ctx.beginPath();
    }
    $('#myCanvas').on("vmousedown",function(event){
        var ev = event || window.event;
        ctx.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
        $(document).on("vmousemove",function(event){
            var ev = event || window.event;//获取event对象
            ctx.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
            ctx.stroke();
        });
    });
    $('#myCanvas').on("vmouseup",function(event){
        $(document).unbind('vmousemove');
        $(document).unbind('vmouseup');
    });
});