<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <title></title>

    <meta charset="UTF-8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>

<style>

canvas{ border:2px solid #000;}

</style>

<body>

    <canvas id="draw" width="500" height="500"></canvas>

    <script type="text/javascript">

    $(document).ready(function(){

    var canvas=document.getElementById("draw");

    var draw=canvas.getContext("2d");

    draw.lineWidth=5;        //线条粗细

    draw.strokeStyle="red";    //颜色

    var godraw=false;        

        //按下鼠标

    $("#draw").mousedown(function(e){

        //准确坐标

    var mouseX=e.pageX-this.offsetLeft;

    var mouseY=e.pageY-this.offsetTop;

    draw.moveTo(mouseX,mouseY);

    godraw=true;

    })

        //放开鼠标

        $("#draw").mouseup(function(e){

    godraw=false;

    })

        //移动鼠标

        $("#draw").mousemove(function(e){

        if(godraw){

    var mouseX=e.pageX-this.offsetLeft;

    var mouseY=e.pageY-this.offsetTop;

    draw.lineTo(mouseX+4,mouseY+4);

    draw.stroke();

        }

    })

    })

    </script>

</body>

</html>

PHP100的笔记

效果：

 相关：

HTML画线

HTML5制作简单画板的更多相关文章

  1. 使用HTML5制作简单的RPG游戏

    很久以前就想着做一个游戏,但什么都不会又不知道从哪里开始,胡乱找来一些书籍和资料结果太深奥看不懂,无奈只能放弃.这一弃就是十多年,倥偬半生,眼看垂垂老矣,还是没能有什么成果. 近年来游戏引擎越来越多, ...

  2. 使用canvas制作在线画板

    canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...

  3. 程序员用HTML5制作的爱心树表白动画

    体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...

  4. Highcharts使用教程（1）：制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  5. ZAM 3D 制作简单的3D字幕 流程(二)

    原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...

  6. phalcon: eventManager事件管理（结合dispatcher调度控制器）制作简单的acl

    制作简单的acl, dispatcher(专门用来加载或调度或跳转到相应的url地址即XXXcontroller的调度器或控制器,能够在controller执行前对controller进行停止跳转等) ...

  7. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  8. JSP制作简单登陆

    JSP制作简单登陆界面 运行环境 eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境--Tomcat 项目列表 这里我先把jsp文件先放在Web-INF外面访问 需要建立的几个文 ...

  9. 【html5】html5本地简单存储

    html5本地简单存储 HTML5 提供了四种在客户端存储数据的新方法,即 localStorage .sessionStorage.globalStorage.Web Sql Database. 前 ...

随机推荐

  1. Butter Knife:一个安卓视图注入框架

    Butter Knife:一个安卓视图注入框架 2014年5月8日 星期四 14:52 官网: http://jakewharton.github.io/butterknife/ GitHub地址: ...

  2. Oracle数据库（64位） 及 PLSQL（64位）的组合安装【第一篇】

    目前PC端普遍使用64位操作系统,64位操作系统在性能上比32位更佳,但是兼容性上则不如32的操作系统,Oracle提供了64和32两种版本,而PLsql工具则只有32位,在这篇文章详细的讲述了如何在 ...

  3. before_request after_request

    Flask我们已经学习很多基础知识了,现在有一个问题 我们现在有一个 Flask 程序其中有3个路由和视图函数,如下: from flask import Flask app = Flask(__na ...

  4. HDU 3533 Escape（BFS+预处理）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3533 题目大意:给你一张n* m的地图,人在起点在(0,0)要到达终点(n,m)有k(k<=10 ...

  5. 【ASP.NET】:Ckeditor+Fckeditor的使用

    首先这三个文件:下载ckeditor和ckeditor_aspnet_3.6.4和ckfinder 然后把这三个文件复制到项目根目录下 添加引用CKEditor.NET.dll      CKFind ...

  6. springMVC项目，存中文到mysql是乱码（?????）

    问题:jdbc连接mysql数据库,web页面输入的中文,存到数据库却变成"????”: 但是数据库中的中文却能够正常读出并在页面显示 mysql中运行 :SHOW VARIABLES LI ...

  7. JS延迟执行

    <!DOCTYPE html> <html> <head> <title></title> <script type="te ...

  8. [NOIP2017]列队(线段树/裂点splay)

    考虑n=1的做法,就是支持: 1.在线删一个数 2.在结尾加一个数 3.查询序列的第y个数 用线段树记录区间内被删元素的个数,可以通过线段树上二分快速得解,对于新增的数,用vector记录即可. 对于 ...

  9. [HDU3240]Counting Binary Trees(不互质同余除法)

    Counting Binary Trees Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  10. POJ 3974 Palindrome 字符串 Manacher算法

    http://poj.org/problem?id=3974 模板题,Manacher算法主要利用了已匹配回文串的对称性,对前面已匹配的回文串进行利用,使时间复杂度从O(n^2)变为O(n). htt ...