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>
相关文章
这段时间在项目组都是做静态页面，都是些复制粘贴的活，难得碰到个稍微有点难度的页面。后来看到这个页面还不错，可以自己做做看，虽然公司已经有这样的组件，但不想用，反正没什么事，就当多学学JS好了。2008-10-10
这篇文章主要介绍了js数组常见操作及数组与字符串相互转化方法,以实例形式较为详细的分析并总结了JavaScript数组的常见使用技巧与转化方法,需要的朋友可以参考下2015-11-11
这篇文章主要给大家介绍了关于小程序自定义tab-bar踩坑实战的相关资料,包括下载代码、放置文件、修改JS文件、配置app.json和隐藏原生导航栏等步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-12-12
基于JavaScript FileReader上传图片显示本地链接
这篇文章主要为大家详细介绍了基于JavaScript FileReader上传图片显示本地链接的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
微信小程序 连续旋转动画（this.animation.rotate）详解
这篇文章主要介绍了微信小程序 连续旋转动画（this.animation.rotate）详解的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了JavaScript实现旋转轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家详细介绍了小程序Scroll-view上拉滚动刷新数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
关于使用runtimeStyle属性问题讨论文章...2007-03-03
下面小编就为大家带来一篇js学习阶段总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了JS桶排序的简单理解与实现方法,结合实例形式详细分析了js桶排序的概念、原理、实现方法及操作注意事项,需要的朋友可以参考下2019-11-11
最新评论