JS画线(实例代码)
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>
相关文章
这个脚本会改变一个段落内的任何文字的字体大小（<P>标签）。如果你想改变其他标签内的文本编辑的getElementsByTagName（"P"）;的一部分。2011-10-10
这篇文章主要介绍了9102了，你还不会移动端真机调试吗，本文详细的介绍了3种移动端真机调试方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
这篇文章主要为大家详细介绍了JavaScript实现经典排序算法之选择排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要给大家介绍了关于js日期时间格式化的相关资料,文中分别介绍了利用原生js以及Moment.js库处理日期时间格式化的方法,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了微信小程序时间轴实现方法,结合实例形式分析了微信小程序wx:for语句使用与时间轴纵向布局相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了小程序跨页面交互的作用与方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家详细介绍了JavaScript实现文件上传与下载功能的相关资料，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以学习一下2023-01-01
js 通过html()及text()方法获取并设置p标签的显示值
这篇文章主要介绍了js 通过html()及text()方法获取并设置p标签的显示值,需要的朋友可以参考下2014-05-05
uniapp小程序自定义tabbar以及初次加载闪屏解决方法
Uniapp小程序可以通过自定义tabbar来实现更加个性化的界面设计,下面这篇文章主要给大家介绍了关于uniapp小程序自定义tabbar以及初次加载闪屏解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了npm包全局安装和局部安装过程，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
最新评论