`

html5 canvas作的手写板【兼容手机】

html5html 
阅读更多 
<!DOCTYPE html>
<html>
    <head>
        <title>画板实验</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--        <script type="text/javascript"
            src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
          </script>-->
        <style type="text/css">
        </style>
    </head>
    <body >
        <canvas id="myCanvas" ></canvas>
         
        <div>
            <button onclick="clean();">清 空</button>
            <button onclick="save();">生成图片</button>
        </div>

        <img id='img' alt='请涂鸦……'/>
        
        <textarea id="log" cols="30" rows="5"></textarea>
        <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();
//                dataUrl = dataUrl.replace("image/png", "image/octet-stream");
                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>
        
        

\[
\lim_{x \to 0} 
\]

    </body>
</html>
分享到：
| backbone.js model和view视图的单元测试
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    canvas 画板 手写板

    手写板功能则利用Canvas API，为用户提供了一个可以在屏幕上自由绘画、书写的空间，常见于在线教育、设计工具、签名验证等应用场景。 一、Canvas基础 1. 创建Canvas元素：在HTML中，通过`&lt;canvas&gt;`标签来创建一个...

    手写板签名canvas For PC and Mobile

    标题中的“手写板签名canvas For PC and Mobile”暗示了我们将在讨论如何在个人电脑（PC）和移动设备上实现基于HTML5 Canvas的手写板签名功能。Canvas是HTML5的一个重要组成部分，允许开发者在网页上进行图形绘制，...

    H5手机签字 canvas_sign 手机电子签字 电子签名

    本技术分享将深入探讨如何使用HTML5中的Canvas API实现手机电子签字功能，即canvas_sign，它允许用户在手机或电脑端进行签名并保存为电子格式。 首先，Canvas是HTML5提供的一种强大的绘图工具，允许开发者在网页上...

    纯粹手写板 V1.1

    总之，【纯粹手写板 V1.1】是一个结合了JavaScript编程、HTML5 Canvas绘图、可能的机器学习技术以及良好用户体验设计的Web应用实例，对于学习和提升前端开发技能，尤其是互动元素的实现，具有很高的参考价值。

    前端实现canvas手机端手写签名

    本文将深入探讨如何使用HTML5的Canvas API来构建一个手机端的手写签名控件。 Canvas是HTML5中的一个绘图元素，它提供了一个二维的画布，开发者可以通过JavaScript来绘制图形、文本、图像等。在手机端，Canvas与触屏...

    jquery+html5 手写签名横屏

    总结来说，"jquery+html5 手写签名横屏"项目利用了jQuery的便利性、HTML5的`canvas`功能和CSS3的样式与布局能力，创建了一个高效、可复用的移动设备横屏签名工具。这个工具不仅提供了直观的用户体验，还具备良好的...

    canvas签名支持PC、手机、iPad.zip

    "canvas签名支持PC、手机、iPad.zip"这个压缩包提供了一个兼容多平台的电子签名demo，包括PC、手机和iPad。下面我们将深入探讨与这个主题相关的知识点。 1. **电子签名**：电子签名是通过电子方式表示同意、认可或...

    vue使用canvas实现移动端手写签名

    在Vue.js中实现移动端的手写签名功能，通常会结合HTML5的Canvas API来完成。Canvas提供了一个二维绘图表面，我们可以在这个表面上绘制图形、线条等。以下是一个详细的步骤和知识点： 1. **HTML结构**： 首先，我们...

    vue 使用 canvas 实现手写电子签名

    在本文中，我们将深入探讨如何使用 Vue.js 集成 Canvas 实现手写电子签名功能。Vue-esign 是一个专门为此目的设计的 Vue 组件，它提供了丰富的特性以满足不同场景的需求。 首先，Vue-esign 支持在 PC 和 Mobile ...

    一个基于canvas开发,封装于Vue组件的通用手写签名板

    本项目"sign-canvas"将Vue组件与Canvas技术相结合，创建了一个通用的手写签名板，适用于PC端和移动端的电子签名需求。它不仅实现了基本的手写签名功能，还提供了丰富的附加功能，如重新签名、覆盖签名、下载签名图像...

    jSignature HTML5签名工具

    然而，部分老旧浏览器不支持Canvas，为了保证兼容性，jSignature会利用FlashCanvas这类库（如压缩包中的`flashcanvas.swf`和`flashcanvas.js`）来模拟Canvas功能，确保在不支持Canvas的环境中也能正常工作。...

    js实现的带笔锋手写签名

    6. **跨平台兼容性**: 由于是基于HTML5的解决方案，这个手写签名功能理论上可以在任何支持HTML5的浏览器上运行，包括桌面和移动设备，这极大地扩展了其适用范围。 7. **安全与隐私**: 在实际应用中，确保用户的签名...

    vue-sign-canvas-master.zip

    这个组件基于HTML5的canvas元素，使得用户能够在PC和移动设备上进行手写签名，适用于各种需要签名确认的场景，如电子商务、文档签署等。 在深入探讨Vue-sign-canvas组件之前，我们先了解一下关键组成部分： 1. **...

    canvas电子签名，支持保存签名图片

    Canvas是HTML5提供的一种强大的图形绘制工具，它允许开发者通过JavaScript在网页上进行动态图形编程。以下是对这个知识点的详细阐述： 首先，我们需要理解canvas的基本用法。Canvas是一个基于矢量图形的画布元素，...

    JS画图板可改成手写签字

    JS画图板的核心是利用HTML5的Canvas元素。Canvas提供了强大的绘图功能，允许我们在网页上动态绘制图形。通过监听鼠标或触屏事件，我们可以捕捉到用户的移动轨迹，进而实现画笔的移动，模拟手写签字的效果。 2. **...

    SignaturepadHTML5:带有HTML5 Canvas和jQuery Mobile的简单签名板

    【标题】"SignaturepadHTML5:带有HTML5 Canvas和jQuery Mobile的简单签名板"是一个用于创建数字签名功能的开源项目，它结合了HTML5的Canvas元素和jQuery Mobile框架的优势，为移动设备和桌面浏览器提供了流畅的用户...

    html手写签名

    Canvas是HTML5引入的一个画布元素，允许开发者通过JavaScript进行动态图形绘制。在这个场景下，Canvas将作为手写签名的画板，用户的所有笔触都会在这个画布上被记录下来。 首先，我们需要在HTML文件中创建一个`...

    web页面手写功能。

    综上所述，实现"web页面手写功能"涉及到多个Web技术的综合运用，包括jQuery、HTML5 Canvas、事件处理、数据序列化和解码，以及可能的浏览器兼容性策略。这不仅提升了用户体验，也为Web应用带来了更多的可能性。

    网页手写输入法代码和控件

    在网页上实现手写输入法涉及的主要技术包括JavaScript、HTML5 Canvas和可能的Web字体服务。JavaScript是实现动态交互的核心，它处理用户的鼠标或触屏输入，识别笔画，并将其转化为可识别的文字。HTML5 Canvas则作为...

Magicbox
Global site tag (gtag.js) - Google Analytics