<!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. [笔记]Linux NTP命令 (ESX适用)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://delxu.blog.51cto.com/975660/307513 [推荐阅读] ...

  2. webStorage，离线缓存

    一.webStorage 1.目标 1.了解cookie的不足之处,引入webstorage的概念    2.学习并且掌握webstorage有哪两种    3.学习并且掌握sessionStorag ...

  3. javscript练习（三）

    编写一个函数,计算两个数字的和差积商 function calculator(num1,num2,sign){          switch(sign){                   cas ...

  4. Android学习笔记（三） UI布局

    每一个布局都有其适合的方式,另外,这几个布局元素可以相互嵌套应用,做出美观的界面. 一.线性布局(LinearLayout) 线性布局,这个东西,从外框上可以理解为一个div,他首先是一个一个从上往下 ...

  5. fatal error LNK1104: 无法打开文件“libc.lib”的问题

    如果将用低版本的VC开发的项目,拿到高版本的VC开发环境上去编译,链接时也许会触发LNK1104错误.解决方案是链接时忽略此库,在此提供三种解决方案: 1.解决如下:项目->属性中->配置 ...

  6. Codeigniter的一些优秀实践

    最近准备接手改进一个别人用Codeigniter写的项目,虽然之前也有用过CI,但是是完全按着自己的意思写的,没按CI的一些套路.用在公众的项目,最好还是按框架规范来,所以还是总结一下,免得以后别人再 ...

  7. [BZOJ4945][Noi2017]游戏 2-sat

    对于所有的x,我们枚举他的地图类型,事实上我们只需要枚举前两种地形就可以覆盖所有的情况. 之后就变成了裸的2-sat问题. 对于一个限制,我们分类讨论: 1.h[u]不可选,跳过 2.h[v]不可选, ...

  8. electron主进程引入自定义模块

    对于electron以及nodejs开发,是一只小菜鸟,第一次想做个应用 只能边学边做,遇到各种各样的问题. 1.不想把所有的主进程函数放到一个文件中,这样文件比较乱,并且不好处理 想法:将另一个js ...

  9. [实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面，头像等比例压缩

    写在前面 关于该项目,已经很久没更新了.实在是找不到一个好的ui,没办法就在网上找了一个还不错的,就凑合着先用着吧,先出第一版,以后的再想着去优化.最近更新与网盘项目相关的内容是准备在项目中使用一个美 ...

  10. node+express+socket.io+mysql=通讯服务器搭建（一）

    首发github/blog 欢迎大家评论给星 安装 首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后安装express-generator应用骨架 $ mkdir node-d ...