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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。