JS画线(实例代码)

所属分类: 网络编程 / JavaScript 阅读数: 561
收藏 0 赞 0 分享

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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多