wyr123789
- 浏览: 37977 次
- 性别:
-
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端，js，jquery (8)
- html (2)
- jquery，html5，html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端，js，jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒，ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
<body>
<header>
<canvas id="chacktext"style="border: #00FF00 1px solid;">
</canvas><br/>
<script >
function dwa(){
//获取文本框的值；
var stractx=$("#chackbox").val();
var stactY=$("#caackbox1").val();
var endx=$("#chackbox2").val();
var endy=$("#chackbox3").val();
//获取画布的信息;
var c = document.getElementById("chacktext");
//进行2d绘画
var myc =c.getContext("2d");
myc.beginPath();
myc.moveTo(stractx,stactY);
myc.lineTo(endx,endy);
myc.closePath();
myc.stroke();
//交换文本框的值
$("#chackbox").val(endx);
$("#caackbox1").val(endy);
$("#chackbox2").val("");
$("#chackbox3").val("");
}
</script>
确定开始的节点a：<input type="text" id="chackbox" /><br />
确定开始的B节点：<input type="text" id="caackbox1" /><br />
开始的节点a：<input type="text" id="chackbox2"/><br />
开始的B节点：<input type="text" id="chackbox3"/>
<input type="button"onclick=dwa() value="dwa">
</header>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
<body>
<header>
<canvas id="chacktext"style="border: #00FF00 1px solid;">
</canvas><br/>
<script >
function dwa(){
//获取文本框的值；
var stractx=$("#chackbox").val();
var stactY=$("#caackbox1").val();
var endx=$("#chackbox2").val();
var endy=$("#chackbox3").val();
//获取画布的信息;
var c = document.getElementById("chacktext");
//进行2d绘画
var myc =c.getContext("2d");
myc.beginPath();
myc.moveTo(stractx,stactY);
myc.lineTo(endx,endy);
myc.closePath();
myc.stroke();
//交换文本框的值
$("#chackbox").val(endx);
$("#caackbox1").val(endy);
$("#chackbox2").val("");
$("#chackbox3").val("");
}
</script>
确定开始的节点a：<input type="text" id="chackbox" /><br />
确定开始的B节点：<input type="text" id="caackbox1" /><br />
开始的节点a：<input type="text" id="chackbox2"/><br />
开始的B节点：<input type="text" id="chackbox3"/>
<input type="button"onclick=dwa() value="dwa">
</header>
</body>
</html>
分享到：
发表评论
-
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端碰到的坑
2017-09-22 15:34 689不废话 直接上代码： *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11661.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 474<div class="js_mobile&q ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 352/*遮罩层*/ .shadow{ position: fixe ... -
common 校验
2017-03-15 10:32 0/*限制只能输入数字*/ $("#username& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4535加广告与加封页脚的代码是差不多的！ 以前封页脚都是图片现在 ... -
图形笑脸 增加动画
2016-07-21 15:23 578<!DOCTYPE html> <html& ... -
各种图形
2016-07-21 14:47 492<!DOCTYPE html PUBLIC " ... -
css3样式
2016-07-15 18:58 477<!DOCTYPE html> <html& ... -
mui框架 上拉加载 下拉刷新
2016-07-15 15:38 721<!DOCTYPE html> <html& ... -
html5放大缩小
2015-06-26 10:06 426<style> div{ margin: ... -
html5+css3动画
2015-06-11 17:51 467此动画仅限谷歌浏览器···· <!DOCTYPE h ... -
html5画布=圆
2015-06-08 16:56 525<!DOCTYPE html> <html& ...
相关推荐
HTML5和JQuery Mobile是构建移动WebApp的两个关键技术，它们共同为开发者提供了在移动设备上创建交互式、响应式的Web应用的能力。本实例通过一个金融系统的移动端页面演示了这两者的应用，旨在促进学习和理解。 ...
在这个实例中，“html5+jquery+canvas 实现调用手机拍照上传图片”利用了HTML5的File API、jQuery库以及Canvas元素，实现了用户通过手机摄像头拍照并即时上传图片的功能。 1. **HTML5 File API**：File API提供了...
HTML5是当前最常用的版本，增加了许多新特性，如离线存储、音频视频处理、画布元素等。 CSS（Cascading Style Sheets）是用于控制网页样式的语言，它与HTML分离，使得内容和表现形式分离，提高了网页设计的灵活性。...
HTML5、CSS3和jQuery Mobile是现代Web开发中的三大核心技术，它们共同为构建功能丰富的APP与移动网站提供了强大的支持。本书“HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站”由陈婉凌编著，由清华大学出版社于...
此外，HTML5还引入了离线存储、拖放功能、媒体元素（如`<audio>`和`<video>`）、画布（Canvas）和SVG矢量图等新元素，极大地丰富了网页内容的呈现方式。 接下来是CSS3，它提供了大量的新选择器，如伪类`:nth-child...
- 初始化SVG画布：在HTML页面中创建一个SVG元素，作为图形的容器。 - 数据绑定：将数据与SVG元素关联，例如，每个节点和边都对应数据对象。 - 编写转换函数：定义如何根据数据的属性来决定节点的位置和形状。 - 更新...
5. **Canvas绘图**：HTML5的Canvas元素提供了JavaScript画布功能，可以进行动态图形绘制，适用于创建图表、游戏等。 6. **Geolocation API**：允许网页获取用户的地理位置信息，为本地化服务提供了可能。 接下来，...
HTML5作为下一代超文本标记语言，引入了许多新特性，如离线存储、拖放功能、媒体元素、 canvas 画布、svg矢量图、geolocation 定位服务、web workers 和 web sockets等。这些特性使得开发者能够创建更富交互性和动态...
2. Canvas元素：学习如何在HTML5中创建Canvas，以及如何通过JavaScript访问和操作Canvas画布，进行像素级的绘图。 3. jQuery的DOM操作：掌握如何使用jQuery选择器选择页面元素，以及如何添加、修改或删除元素内容。...
首先，HTML5是超文本标记语言的最新版本，它引入了许多新特性，比如离线存储、音频/视频处理、 canvas（画布）元素等。在这个特效中，canvas元素起着关键作用。Canvas是一个二维绘图环境，允许开发者用JavaScript来...
在这个项目中，“HTML5 canvas+JQuery绘制心电图(ECG)动画代码.zip”显然是一个利用canvas和jQuery库来创建心电图动画效果的示例。心电图（ECG或EKG）是一种记录心脏电信号的医疗设备，而此代码可能是为了模拟这种...
HTML5和jQuery是现代网页开发中的重要技术，它们在创建交互式、动态用户界面方面发挥着巨大作用。在这个“HTML5+JQuery 时钟”项目中，我们将深入探讨如何结合这两种技术，实现一个实时更新的时钟效果。 首先，...
HTML5和jQuery是一种常见的前端开发组合，用于创建交互性强、功能丰富的网页应用。在这个特定的案例中，"html5+jquery 表盘式时钟 源码"指的是一个使用这两种技术实现的模拟表盘时钟的应用。让我们深入探讨这个项目...
首先，HTML5是超文本标记语言的最新版本，它引入了许多新特性，如语义化元素（如, , 和)、离线存储（Application Cache）、画布（canvas）和视频/音频元素等。在表白神器中，HTML5可能用于构建页面结构，创建具有...
HTML5引入了许多新特性，比如离线存储、拖放功能、媒体元素、canvas画布和svg矢量图，这些都极大地增强了Web应用的功能和表现力。HTML5的语义化标签，如、、和，有助于提高页面的可读性和SEO优化。 CSS（层叠样式表...
HTML5、JavaScript、jQuery、PHP5和Smarty是Web开发中常用的技术栈，它们各自拥有丰富的功能和广泛的应用。下面将分别介绍这些技术的核心知识点，并结合ThinkPHP框架的快速入门，帮助你理解它们的重要性和实际应用。...
在移动端开发中，为了提供用户友好的体验，尤其是在涉及到图像处理的应用中，如上传头像，HTML5和jQuery结合的图片裁剪插件扮演着重要角色。本文将深入探讨这个"移动端html5+jQuery图片裁剪插件头像"的相关知识点。 ...
总结起来，"HTML5+jQuery圆球碰撞动画特效"项目展示了HTML5的Canvas、CSS3以及jQuery的综合运用。开发者利用HTML5的Canvas创建动态图形，通过jQuery实现流畅的动画效果，再结合CSS进行样式设计，最终构建出一个视觉...
在本项目"Html5_Canvas+JQuery绘制心电图(ECG)"中，开发者利用Canvas结合jQuery库来创建了一个动态的心电图显示功能。 心电图（ECG）是一种记录心脏电信号的医学检测方法，用于分析心脏的健康状况。在Web应用中模拟...
在这个"html5+canvas+jquery拼图游戏实例"中，我们看到的是如何利用这些技术来创建一个有趣的游戏体验。Canvas是HTML5的一个核心元素，它允许开发者在网页上进行动态图形绘制，而jQuery则是一个流行的JavaScript库，...