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 相关文章推荐
js单向链表的具体实现实例
Jun 21 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 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
世界收音机发展史
2021/03/01 无线电
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
不假外出检讨书
2014/01/27 职场文书
教师业务培训方案
2014/05/01 职场文书
社区清明节活动总结
2014/07/04 职场文书
员工安全责任书范本
2014/07/24 职场文书
湘江北去观后感
2015/06/15 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Nginx配置使用详解
2022/07/07 Servers