画板(适用于手机、PC端)

Html代码

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

<!-- 定义画板的区域 -->
<canvas id="myCanvas" style="background-color: black; border: 1px solid #BFBFBF;"></canvas><br/>

<!-- 清空画板的按钮 -->
<button onclick="clean();" style="height: 3em;width: 5em;">清 空</button>

<!-- 根据画板里的内容,生成图片 -->
<button onclick="savePic();" style="height: 3em;width: 6em;">生成图片</button><br/>

<!-- 生成的图片存放的img标签 -->
<img id="img" alt="请签名"  width="100px" />

<script type="text/javascript">

    var canvas;  //定义一个全局的 canvas
    var board;   //定义一个画板的 全局变量
    var img;     //图片
    var mousePress = false;  //鼠标按压全局变量 , 默认不按压
    var last = null;   //最后的按压点全局变量  ,默认没有最后按压坐标

    //页面加载后进行的操作
    $(function(){

        canvas = document.getElementById(‘myCanvas‘);  //指定canvas区域
        img= document.getElementById(‘img‘);  //获取图片

        canvas.height = 300;  //定义 canvas 的高度
        canvas.width = 500;  //定义 canvas 的宽度

        board = canvas.getContext(‘2d‘);  //创建画板

        board.lineWidth = 2;   //画板的书写字体宽度
        board.strokeStyle = "#F5270B";  //画板的书写的字体颜色

        board.stroke();

        canvas.onmousedown = beginDraw;
        canvas.onmousemove = drawing;
        canvas.onmouseup = endDraw;

        canvas.addEventListener(‘touchstart‘,beginDraw,false);
        canvas.addEventListener(‘touchmove‘,drawing,false);
        canvas.addEventListener(‘touchend‘,endDraw,false);

    });

    /**
     *   开始画画,将鼠标按压全局变量设为true
     */
    function beginDraw(){
        mousePress = true;
    }

    /**
     *  画画
     */
    function drawing(event){    

        //算出canvs距离顶部的坐标,如果画板的顶部不在页面的最上边,会非常有用
        var canvs_top = $(‘#myCanvas‘).offset().top;
        event.preventDefault();

        //如果没有按压,返回
        if(!mousePress)return;

        //获取点触点的坐标
        var xy = pos(event);

        //如果最后的按压点全局变量 不为空,证明手或鼠标没有松开过,从最后按压点到现在按压点划线
        if(last!=null){
            board.beginPath();
            board.moveTo(last.x,last.y-canvs_top);
            board.lineTo(xy.x,xy.y - canvs_top);

            board.lineWidth = 2;
            board.strokeStyle = "#F5270B";

            board.stroke();
        }

        //将最后的按压点全局变量设置为当前的按压点坐标
        last = xy;
    }

    /**
     * 结束画画
     */
     function endDraw(event){
         mousePress = false;
         event.preventDefault();
         last = null;
    }

    /**
     * 生成的图片存放的img标签
     */
    function savePic(){
        var dataUrl = canvas.toDataURL();
        img.src = dataUrl;
    }

    /**
     * 清空画板
     */
    function clean(){
        board.clearRect(0,0,canvas.width,canvas.height);
    }

    /**
     * 获取按压点的坐标
     */
     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;
        }
    }
</script>
时间: 2024-10-22 05:31:33

画板(适用于手机、PC端)的相关文章

SmsManager - Windows Phone手机PC端短信管理工具检查版本更新地址

SmsManager - Windows Phone手机PC端短信管理工具检查版本更新时将抓取此页面中两个特殊字符串之间的文字内容(共3处),并替换\n为换行,html转义字符为原字符. wpsmsmanager0-start[1.2]end-wpsmsmanager0 wpsmsmanager1-start[新版本V1.2已发布(2015/4/10)\n更新说明:\n可导出短信至Android手机\n前往查看?]end-wpsmsmanager1 wpsmsmanager2-start[htt

mac 配置apache 服务器 实现手机pc 端局域网传输

mac 配置apache 服务器 一.上一篇太low 了 每次下载大的文件都会失败,经过苦苦的百度,终于找到了解决方案,那就是配置apache, 二.开启我们的配置 1.开启apache 服务,mac是自带apa服务的,直接开启即可,注意一下命令都要使用 sudu root 权限 ? html sudo apachectl start Password: /System/Library/LaunchDaemons/org.apache.httpd.plist: service already l

html调用手机PC 端摄像头和图片库

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + requ

PHP判断访问者手机移动端还是PC端的函数,亲测好用

,用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到PC端,我们团队在开发erdaicms二代旅游CMS网站管理系统的时候(http://www.erdaicms.com),分别开发了PC端和手机端,需要实现,用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到PC端,于是有了下面这个判断函数: 1 /*移动端判断*/ 2 function isMobile() 3 { 4 // 如果有HTTP_X_W

判断当前终端是手机还是pc端并进行不同的页面跳转

判断当前设备(终端)是手机还是pc端并进行不同的页面跳转 DEMO 1 <script type="text/javascript"> function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.mat

我的Android进阶之旅------&gt;Android实现用Android手机控制PC端的关机和重启的功能(一)PC服务器端

因为经常开着笔记本工作,累了就坐床上玩手机,但晚上要睡觉了又不想下床去关电脑,就想做个Android软件来控制PC端的关机和重启.要想实现此功能,就得让Android手机和PC之间进行通信才能,因此采用Socket编程来实现. ==================================Shutdown命令的用法======================================== 首先得了解一下关于Shutdown命令的用法. 选择win+R,打开命令行窗口,输入shutdo

我的Android进阶之旅------&amp;gt;Android实现用Android手机控制PC端的关机和重新启动的功能(二)Androidclient功能展示

Androidclient的实现思路大致例如以下: 1.首先扫描局域网内全部PC,看是否有PC端的server在执行并监听30000port. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"> 2.假设没有扫描到有PC端的server在执行并监听30000port.则又一次扫描或者退出. 3.扫描到了有

直播的本质(创业者应该要从商业模式的右边开始思考,你为用户创造了什么价值?找客户并不难,但要想办法让客户不离不弃;PC端功能的丰富很重要,因为手机版通常只是一个迷你版)

我想稍微给直播这件事浇点冷水. 的确,直播现在越来越火,YouTube凭着良好的基础建设平台前段时间也做起了直播,Facebook Live最近也加入了变脸.预定直播时间和双人录制的功能,更不用说国内的如火如荼:KTV在直播.电商行业在直播.金融行业在直播.不过想想以前的球赛.晚会也是直播,这并不稀奇.真正带来巨大改变的是移动端直播的兴起,让人具备了随时随地观看的可能,所以说关键是技术创新的整体“生产率提升”效应,而不是创新本身提高了“生产力”水平.我们对互联网连接一切这种文化所做的选择,结果却

bootstrap导航菜单,手机和PC端

<!DOCTYPE html> <html> <head lang="en"> <meta name="viewport" content="width=device-width"/> <meta charset="UTF-8"> <title></title> <!-- 新 Bootstrap 核心 CSS 文件 --> <

PC端和手机访问调用不同的页面,JS和PHP不同方法

js方法: var urlqr = location.href;    urlqr = urlqr.replace(/iphoneF_/, "pc")这里写正则替换页面地址 if(IsPC())  window.location.replace(urlqr);//PC端访问就跳转到PC页面 else window.location.replace(urlqr);//否则跳转移动页面 //判断是否pc端访问         function IsPC() {             va