<!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. leetcode 之Longest Consecutive Sequence(六)

    这题要仔细体会下哈希表的用法,要注意的是数组本身是无序的,因此需要向左右进行扩张. 另外这个思路可以进行聚类,把连续的标记为一类. int longestConsecutive(const vecto ...

  2. @PathVariable @RequestParam @RequestBody 的区别

    转载自:@RequestParam @RequestBody @PathVariable 等参数绑定注解详解 简介: handler method 参数绑定常用的注解,我们根据他们处理的Request ...

  3. [转]Java中堆和栈创建对象的区别

    转载自http://blog.csdn.net/hbhhww/article/details/8152838 栈与堆都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序 ...

  4. spring-cloud-sleuth+zipkin追踪服务实现(一)

    1.简述 最近在学习spring cloud构建微服务,研究追踪微服务rest服务调用链路的问题,接触到zipkin,而spring cloud也提供了spring-cloud-sleuth来方便集成 ...

  5. Delphi idHttpServer接收Http Get请求解码问题

    引用 Httpapp单元,使用Httpdecode函数进行解码 procedure TFrmMain.HTTPServerCommandGet(AThread: TIdPeerThread; AReq ...

  6. ELK系列--问题汇总(二)

    1.Kibana4 dashboard无法保存拖动的visualization位置 原因: 程序bug,json部分未能及时保存拖动的情况 解决方法: 手动在设置中,手动编辑dashboard的jso ...

  7. Web开发——服务器端应用技术简单比较

    在开发动态网站时,离不开服务器端技术,服务器端技术主要有CGI.ASP.PHP.ASP.NET和JSP. 1.CGI CGI(Common Gateway Interface 通用网关接口)是最早用来 ...

  8. 9 行 javascript 代码获取 QQ 群成员

    昨天看到一条微博:「22 行 JavaScript 代码实现 QQ 群成员提取器」. 本着好奇心点击进去,发现没有达到效果,一是 QQ 版本升级了,二是博客里面的代码也有些繁琐. 于是自己试着写了一个 ...

  9. 将内存图像数据封装成QImage V2

    转:http://www.cnblogs.com/bibei1234/p/3161555.html 如何将内存图像数据封装成QImage 当采用Qt开发相机数据采集软件时,势必会遇到采集内存图像并进行 ...

  10. 牛客网 牛客练习赛43 B.Tachibana Kanade Loves Probability-快速幂加速

    链接:https://ac.nowcoder.com/acm/contest/548/B来源:牛客网 Tachibana Kanade Loves Probability 时间限制:C/C++ 1秒, ...