html5教程制作简单画板代码分享


Posted in HTML / CSS onDecember 04, 2013

HTML5制作简单画板

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title></title>
<meta charset="UTF-8">
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>
</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;</p> <p> })
//放开鼠标
$("#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();
}</p> <p> })

})
</script>
</body>
</html>

效果图

html5教程制作简单画板代码分享

HTML / CSS 相关文章推荐
css3教程之倾斜页面
Jan 27 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 #HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 #HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 #HTML / CSS
HTML5样式控制示例代码
Nov 27 #HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 #HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 #HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 #HTML / CSS
You might like
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
img标签中onerror用法
2009/08/13 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
在Django框架中运行Python应用全攻略
2015/07/17 Python
pycharm安装图文教程
2017/05/02 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
python tqdm库的使用
2020/11/30 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
市场营销专业个人自荐信格式
2013/09/21 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
会计工作决心书
2014/03/11 职场文书
学校运动会霸气口号
2014/06/07 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
户籍证明模板
2014/09/28 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
华山导游词
2015/02/03 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
Golang的继承模拟实例
2021/06/30 Golang
php双向队列实例讲解
2021/11/17 PHP
Pandas-DataFrame知识点汇总
2022/03/16 Python
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android