JS画线(实例代码)


Posted in Javascript onNovember 20, 2013

IE下画线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">   
  v/:* { behavior:url(#default#VML); }   
  </style>
</head>
<body>
<v:line  
from='200,200'  
to='300,100'  
style='position:absolute;z-index:8'>  
</v:line>  
</body>
</html>
<script>
var R =function(){};
R.prototype.createLine = function (startX,startY,endX,endY){  
  var le = document.createElement( "<v:line><v:line>" );  
  le.from = startX + ',' + startY ;  
  le.to = endX + ',' + endY ;  
  le.strokecolor= "red" ;  
  le.strokeweight= "1pt" ;  
  return le;  
}  
var d =new R();
document.body.appendChild(d.createLine(1,1,200,100));
</script>

FF下画线
<html>
  <head>
  <title>A canvas fillRect, strokeRect and clearRect example</title>
  <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
  <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
  <script type="text/javascript">
  function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('tutorial');
  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){
  // use getContext to use the canvas for drawing
  var ctx = canvas.getContext('2d');
  // Draw shapes
  ctx.fillRect(25,25,100,100);
  ctx.clearRect(45,45,60,60);
  ctx.strokeRect(50,50,50,50);
  ctx.beginPath();
  ctx.moveTo(100,100);
  ctx.lineTo(200,250);
  ctx.lineTo(50,250);
  ctx.closePath();
  ctx.stroke();
  } else {
  alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
  }
  </script>
  <style type="text/css">
  </style>
  </head>
  <body onload="drawShape();">
  <div>
  <canvas id="tutorial" width="400" height="400"></canvas>
  </div>
  </body>
</html>
Javascript 相关文章推荐
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
javascript正则表达式总结
Feb 29 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 #Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 #Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 #Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 #Javascript
JavaScript中setInterval的用法总结
Nov 20 #Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 #Javascript
jquery iframe操作详细解析
Nov 20 #Javascript
You might like
优化PHP程序的方法小结
2012/02/23 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
php实现登陆模块功能示例
2016/10/20 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
介绍一下Ruby的特点
2013/01/20 面试题
致垒球运动员加油稿
2014/02/16 职场文书
老师的检讨书
2014/02/23 职场文书
投标承诺函范文
2015/01/21 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书