JavaScript を使用して、mouse_javascript スキルで線を描画するためのサンプルコードを実装します。-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript を使用して、mouse_javascript スキルで線を描画するためのサンプルコードを実装します。

May 16, 2016 pm 04:39 PM

線を引くねずみ

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 

&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 
&lt;title&gt;Untitled 1&lt;/title&gt; 
&lt;style type="text/css"&gt; 
.style1 { 
  font-size: x-small; 
} 
&lt;/style&gt; 
&lt;script type="text/javascript"&gt; 
/**
  画点
*/  
function makedot(x, y){ 
 pointDiv = "&lt;div style='height:1px;position:absolute;left:" + x +
   "px;top:" + y + "px;width:1px;background:#f00;overflow:hidden'&gt;&lt;/div&gt;"; 
 return pointDiv;
} 
/** 
 根据两点坐标画直线。 
*/ 

function line(x1,y1,x2,y2){ 
 var slope; //斜率
 var direction;//坐标运动方向
 var tx = x2 - x1;
 var ty = y2 - y1;
 if(tx == 0 && ty == 0)return;
 var points = "";
 var axis;//坐标轴上的坐标
 if(Math.abs(tx) &gt;= Math.abs(ty)){//在x轴上移动
   direction = tx &gt; 0 &#63; 1 : -1;
   tx = Math.abs(tx);
   slope = ty / tx;
   axis = x1;
   for(i = 0; i &lt; tx; i ++){
     points += makedot(axis, y1 + i * slope);
     axis += direction;
   }
    
 }else{//在y轴上移动
   direction = ty &gt; 0 &#63; 1 : -1;
   ty = Math.abs(ty);
   slope = tx / ty; 
   axis = y1;  
   for(i = 0; i &lt; ty; i ++){
     points += makedot(x1 + i * slope, axis);
     axis += direction;
   }
 }
 var container = document.getElementById("container");
 container.innerHTML += points; 
} 
var oldPoint = null;
//获取鼠标位置
function mousePosition(ev){
  ev = ev || window.event;
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  var doc = document.documentElement, body = document.body;
  var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
  var pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);    
  return {x:pageX, y:pageY};
}

function recordPoint(ev){
  
  var point = mousePosition(ev);
  if(oldPoint != null){
    line(oldPoint.x, oldPoint.y, point.x, point.y);
  }
  oldPoint = point;
}
&lt;/script&gt;
&lt;/head&gt; 

&lt;body&gt; 
&lt;div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onclick="recordPoint(event);"&gt;
  
&lt;/div&gt;
&lt;script type="text/javascript"&gt; 
  //line(19,19,22,300); 
&lt;/script&gt;
&lt;/body&gt; 
&lt;/html&gt;

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。