全国服务热线:4008-888-888

技术知识

JavaScript+Canvas完成自定画板的示例编码

近期科学研究了HTML51些新的元素特性,发现的确功能强大,非常是里边的Canvas这个新的标识元素。官方详细介绍:Canvas API(画布)是在HTML5中新增的标识用于在网页页面即时转化成图象,而且能够实际操作图象內容,基础上它是1个能够用JavaScript实际操作的位图(bitmap)。下列应用JavaScript融合Canvas完成1个画板作用

实际效果演试图:

编码一部分(立即拷贝即可应用)

<!DOCTYPE HTML>
<html>
<head>  
<meta charset="utf⑻" />  
<title>JavaScript+Canvas完成自定画板</title>
</head>
<body>
<canvas id="canvas"  width="600" height="300"></canvas>
<script type="text/javascript">   
  var canvas = document.getElementById("canvas");   
  var ctx = canvas.getContext("2d");   
  //画1个黑色矩形框   
  ctx.fillStyle="black";   
  ctx.fillRect(0,0,600,300);   
  //按下标识   
  var onoff = false;  
  //自变量oldx跟oldy意味着电脑鼠标挪动前的座标  
  var oldx = ⑴0;   
  var oldy = ⑴0;   
  //设定色调  
  var linecolor = "white";   
  //设定线宽   
  var linw = 4;   
  //加上电脑鼠标挪动恶性事件   
  canvas.addEventListener("mousemove",draw,true);  //第3个主要参数关键跟捕捉或冒泡相关   
  //加上电脑鼠标按下恶性事件   
  canvas.addEventListener("mousedown",down,false);   
  //加上电脑鼠标弹起恶性事件   
  canvas.addEventListener("mouseup",up,false);   
  function down(event){     
   onoff = true;     
   oldx = event.pageX⑴0;      
   oldy = event.pageY⑴0;  
   //console.log(event.pageX+'..............000.............'+event.pageY);
  //event.pageX跟event.pageY相对全部网页页面电脑鼠标的部位 包含外溢的一部分(便是翻转条)   
  }   
  function up(){     
   onoff = false;   
 }  
 function draw(event){    
  if(onoff == true){        
   var newx = event.pageX⑴0;        
   var newy = event.pageY⑴0;        
   ctx.beginPath();//beginPath() 抛弃任何当今界定的相对路径而且刚开始1条新的相对路径。它把当今的点设定为 (0,0)。       
   ctx.moveTo(oldx,oldy);   //挪动到点一下情况下的座标,以那个座标为原点      
   ctx.lineTo(newx,newy);   //绘图新的相对路径       
   ctx.strokeStyle=linecolor;       
   ctx.lineWidth=linw;       
   ctx.lineCap="round";       
   ctx.stroke();//stroke() 方式会具体地绘图出根据 moveTo() 和 lineTo() 方式界定的相对路径。默认设置色调是黑色。    
//将新的电脑鼠标部位赋给下1次刚开始绘图的起止座标      
   oldx = newx;      
   oldy = newy;   
  };
 };
</script>
</body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服