jquery_mobile结合canvas制作画板

最新推荐文章于 2023-08-13 21:56:58 发布

weixin_34085658

最新推荐文章于 2023-08-13 21:56:58 发布

阅读量182

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/luqiuren666/blog/917352

版权

2019独角兽企业重金招聘Python工程师标准>>>

jquery_mobile结合canvas制作画板

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

H5页面代码

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

$(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');
    });
});