JS绘图，JQuery，DOM2综合运用

​x
 
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
    <h1>绘画板</h1>
    <p>我的第一个JS程序绘画。</p>
    <input id='renew-btn' type = 'button' value = "刷新图形">
    <span id ='msg'>请输入想要查询的路径坐标</span>
  <div id='mydiv'>
    路径坐标 X：<input id ='path-x'type = 'text'value ='0'>
    路径坐标 Y：<input id = 'path-y'type = 'text'value ='0'>
    <input id ='cod-btn' type =button value='提交'>
  </div>  
  <div id ='cod'>  
    Page X:<div id = 'page-x'></div> 
    Page Y:<div id = 'page-y'></div> 
    Client X:<div id = 'client-x'></div> 
    Client Y:<div id = 'client-y'></div>  
    Screen X:<div id = 'screen-x'></div> 
    Screen Y:<div id = 'screen-y'></div>  
  </div>     
​
  <canvas id='mypad' width='200' height='200'>在这里绘画
  </canvas>
</body>
</html>

HTML

xxxxxxxxxx
 
//获取画板和上下文变量
var drawing = document.getElementById('mypad');
var context=null;
if(drawing.getContext){
  context=drawing.getContext('2d');
}
drawClock(context);//绘制图形
​
$('#renew-btn').click(function(){
  drawClock(context);
  $('#mypad').css("background-color","rgba(25,200,180,0.5)");
});//刷新图形
​
//DOM2增加事件，检测鼠标坐标，可以用jQuery的事件方法更简单
drawing.addEventListener('mousemove',function(event){
  $('#page-x').text(event.pageX);
  $('#page-y').text(event.pageY);
  $('#client-x').text(event.clientX);
  $('#client-y').text(event.clientY);
  $('#screen-x').text(event.screenX);
  $('#screen-y').text(event.screenY);
},false)
​
//封装绘图函数，导入全局变量-上下文参数
function drawClock(context){
  context.beginPath();
  context.strokeStyle = "rgba(0,0,255,1)"
  context.arc(100,100,99,0,2*Math.PI,false);
  context.moveTo(194,100);
  context.arc(100,100,94,0,2*Math.PI,false);
  context.moveTo(100,100);
  context.lineTo(100,15);
  context.moveTo(100,100);
  context.lineTo(35,100);
  context.stroke()
}
​
var prepathx = -1;
var prepathy = -1;
//标注当前查询路径坐标，并消除前一个坐标
$('#cod-btn').click(function(){
​
var pathx=$('#path-x').val();
var pathy=$('#path-y').val();
​
context.clearRect(prepathx,prepathy,5,5);
​
context.fillStyle='red';
context.fillRect(pathx,pathy,4,4);
prepathx=pathx;
prepathy=pathy;
​
var msg= document.getElementById('msg');
if (context.isPointInPath(pathx,pathy)){
  msg.innerText = "坐标在路径中！";
  msg.style.color='green';
}
else{ 
  msg.innerText="坐标不在路径中！";
  msg.style.color='red';
}
})

JavaScript

xxxxxxxxxx
 
#mypad{
  background-color:rgba(25,200,180,0.5);
  border: 1px solid;
  padding:10px;
  box-shadow:10px 10px 5px #000050; 
  margin:10px;
 
}
div{
  border:1px solid green;
  padding:5px;
  margin-top:20px;
​
}
#mydiv input{
  display:inline;
}
​
#cod div{
display:inline;
border:none;
}
#renew-btn{
  float:right;
  margin-right:100px;
  background-color:rgb(100,200,209);
  font-size:15px;
  padding:5px;
}

CSS