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自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
浅谈js闭包理解
Apr 01 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
原生JavaScript实现换肤
Feb 19 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&amp;&amp;mysql)二
2006/10/09 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
python根据文件大小打log日志
2014/10/09 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python实现ping指定IP的示例
2018/06/04 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
《学棋》教后反思
2014/04/14 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
会计试用期自我评价
2014/09/19 职场文书
政协常委会议主持词
2015/07/03 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL