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参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
mysql 字段类型说明
2007/04/27 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
js实现分页功能
2017/05/24 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python super用法及原理详解
2020/01/20 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
2016年党员干部廉政承诺书
2016/03/24 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python