JavaScript+Canvas实现自定义画板的示例代码

最近研究了HT ML 5一些新的元素属性，发现确实好用，特别是里面的Canvas这个新的标签元素。官方介绍：Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（b IT map）。以下使用JavaScript结合Canvas实现一个画板功能

效果演示图：

代码部分（直接复制便可使用）

<!DOCTY PE  HTML>
<html>
<head>  
< ;m eta charset="utf-8" />  
<title>JavaScript+Canvas实现自定义画板</title>
</head>
<body>
<canvas id="canvas"  width="600" h ei ght="300"></canvas>
<script type="text/javascript">   
   VAR  canvas = document.getElementById("canvas");   
  var ctx = canvas.getContext("2d");   
  //画一个黑色矩形   
  ctx.fillStyle="black";   
  ctx.fillRect(0,0,600,300);   
  //按 下标 记   
  var onoff = false;  
  //变量oldx跟oldy代表鼠标移动前的坐标  
  var oldx = -10;   
  var oldy = -10;   
  //设置颜色  
  var linecolor = "white";   
  //设置线 宽    
  var linw = 4;   
  //添加鼠标移动事件   
  canvas.addEventListener("mou SEM ove",draw,true);  //第三个参数主要跟捕获 或者 冒泡有关   
  //添加鼠标按下事件   
  canvas.addEventListener("mousedown",down,false);   
  //添加鼠标弹起事件   
  canvas.addEventListener("mouseup",up,false);   
  function down(event){     
   onoff = true;     
   oldx = event.pageX-10;      
   oldy = event.pageY-10;  
   //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-10;        
   var newy = event.pageY-10;        
   ctx.be gin Path();//beginPath() 丢弃任何当前定义的路径并且 开始 一条新的路径。它把当前的点设置为 (0,0)。       
   ctx.moveTo(oldx,oldy);   //移动到点击时候的坐标，以那个坐标为原点      
   ctx.l inet o(newx,newy);   // 绘制 新的路径       
   ctx. stroke Style=linecolor;       
   ctx.lineWidth=linw;       
   ctx.lineCap="round";       
   ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。    
//将新的鼠标位置赋给下一次开始绘制的起始坐标      
   oldx = newx;      
   oldy = newy;   
  };
 };
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是为你收集整理的 JavaScript+Canvas实现自定义画板的示例代码全部内容，希望文章能够帮你解决 JavaScript+Canvas实现自定义画板的示例代码所遇到的问题。

如果觉得网站内容还不错，推荐好友。

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did205798

更新时间：2023-05-03 阅读：27次