<!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. 数据分析python应用到的ggplot(二)

    还是优达学院的第七课 数据:https://s3.amazonaws.com/content.udacity-data.com/courses/ud359/hr_by_team_year_sf_la. ...

  2. python实现IMAP协议下email收取

    本文为转载,原文在这里. 所谓无痕取信,目前主要是指从邮箱中把信件收取后,邮箱内状态不发生任何改变.这里的状态主要是指两部分,一部分是邮件状态不变,即已读与未读状态不变,另一部分是指邮箱记录的登陆IP ...

  3. 洛谷P1803凌乱的yyy 题解

    题目传送门 这道题也是贪心思想.先排序一遍(按照结束的时间排)在进行扫描,满足条件的直接保存,增加ans,最后输出即可. #include<bits/stdc++.h> using nam ...

  4. rmdir命令

    rmdir命令用来删除空目录.当目录不再被使用时,或者磁盘空间已到达使用限定值,就需要删除失去使用价值的目录.利用rmdir命令可以从一个目录中删除一个或多个空的子目录.该命令从一个目录中删除一个或多 ...

  5. 以Docker容器方式安装Ceph

    获取Ceph的Docker镜像 因为公司对于网络环境的限制,安装ceph时使用ceph-deploy反而很不方便,且ssh免密码方式也不适用,所以使用docker方式安装. Git地址 https:/ ...

  6. Eclipse的SVN插件与本地SVN客户端关联不上

    问题:当我们用SVN客户端把代码更新到本地,并导入到eclipse之后,却发现我们的SVN插件并没有起作用(没有代码入库.修改等小图标的显示,也没有check in,update等功能菜单).如果我们 ...

  7. MINIBASE源代码阅读笔记之heapfile

    Heapfile 用来管理heap file里的dir page们 成员 _firstDirPageId:这个文件的第一个dir page _ftype:文件类型 _file_deleted:删除的时 ...

  8. 【58沈剑架构系列】lvs为何不能完全替代DNS轮询

    上一篇文章“一分钟了解负载均衡的一切”引起了不少同学的关注,评论中大家争论的比较多的一个技术点是接入层负载均衡技术,部分同学持这样的观点: 1)nginx前端加入lvs和keepalived可以替代“ ...

  9. day4 二维数组旋转90度

    二维数组的旋转其实就是数组里面的元素对调的情况:下面有一个4×4的二维数组,[[0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3]],现在要求把 ...

  10. git客户端基本操作

    首先下载git 一路next安装好了之后,打开任意盘符,右键打开git bash here 首先:初始首次的用户名和邮箱,之后就不用了. git config --global user.name & ...