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>

赞 (0)

相关推荐

  • 纯JS 绘制数学函数

    绘图对象Plot,包含了JS画点,JS画线,JS画正弦sin,JS画余弦cos,tan,圆,多边形. 可设置原点位置,画笔颜色,画笔粗细,坐标线颜色. 其实原理很简单,用长1px宽1px的div模拟点,由点及线,由线及面. 贴上来权当相互学习,以免JS新手觉得js画图是多神秘的事情. JS绘制数学函数图 body{ margin: 0px; padding: 0px; } //辅助函数 function $(id){return document.getElementById(id)}; /**

  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

  • 使用js在页面中绘制表格核心代码

    使用js在页面中绘制表格核心代码

    1.先写一个<table>,中间放入<tbody>,但是<tbogy>什么也不加  如何使用js在页面中绘制表格 2.在js中写入方法,绘制表格  如何使用js在页面中绘制表格 其核心语句就是: var row=document.createElement_x("tr"); 就是创建行 var cell=document.createElement_x("td"); 就是创建列 cell.appendChild(document.

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • js实现两点之间画线的方法

    本文实例讲述了js实现两点之间画线的方法.分享给大家供大家参考.具体分析如下: 最近有点无聊,琢磨了很久,想到了一消磨时间的点子,也就是做js版的连连看. 两点之间画线也只是连连看最基本功能的一部分,所以我画的线也仅是折线,而且还只能向左折,后面将根据连连看中图片位置点来确定折线的方向. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

  • 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&quo

  • JS返回顶部实例代码

    本文实例为大家分享了JS返回顶部实例代码,供大家参考,具体内容如下 html/css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="返回顶部效果.js"></script> <style&g

  • 三种动态加载js的jquery实例代码另附去除js方法

    复制代码 代码如下: !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js");就ok了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.

  • 2019手机号码JS正则表达式验证实例代码

    概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串的一种过滤逻辑. 简介 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串

  • js判断节假日实例代码

    效果展示: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery.min.js" type="text/javascript">

  • C++画正弦线实例代码

    本文实例讲述了C++画正弦线的实现代码,分享给大家供大家参考. 主要功能代码如下: 复制代码 代码如下: case WM_PAINT:          hdc = BeginPaint(hWnd, &ps);          // TODO: 在此添加任意绘图代码...          //画正玄线          #define  PI 3.1415926          #define SEGMENT 500          int cxClient,cyClient;     

  • android实现简单的画画板实例代码

    android实现简单的画画板实例代码

    直接看代码,注释都写清楚了 复制代码 代码如下: public class MainActivity extends Activity { private ImageView iv; private Bitmap baseBitmap; private Canvas canvas; private Paint paint; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedIns

  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

  • Node.js连接mongodb实例代码

    Node.js连接mongodb实例代码

    前面介绍了node.js操作mysql以及redis的内容,这里继续学习操作mongodb的内容. 安装驱动 安装命令 cnpm install mongodb 安装成功 数据库操作 因为mongodb是文档类型的数据库,与mysql有很大不同,mongodb会自动创建数据库和集合,并不需要提前进行手动创建. Insert var MongoClient = require("mongodb").MongoClient; var DB_CONN_STR = "mongodb:

  • python海龟绘图之画国旗实例代码

    画之前肯定要知道规格图,我找了一个大致的图. 参考图片: 绘制大星的方法很简单,五角星的补角是144度. 绘制小五角星有点麻烦,因为我国国旗上的小五角星并不是平放的(美帝曾经这样把我们的国旗搞错过),而是总有一个角正对着大五角星的中心!我的方法是,定位到小五角星的中心点,然后根据角度后退一定的长度.这个角度可以根据反勾股定理算出来(这有计算工具),长度我是按照大五角星的中心点到角尖的距离除以3得到的. 代码: from turtle import * screensize(2000,2000,'

随机推荐