JavaScript+Canvas实现自定义画板

最新推荐文章于 2022-01-20 18:55:13 发布

zhoutingxixi

最新推荐文章于 2022-01-20 18:55:13 发布

阅读量600

点赞数

文章标签： canvas javascript

本文链接：https://blog.csdn.net/weixin_43844696/article/details/107047294

版权

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

这个实现的功能是进行签字功能

以下使用JavaScript结合Canvas实现一个画板功能得代码

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8" >  
<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");  
   //画一个黑色矩形  
   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("mousemove",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.beginPath();//beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。  
       ctx.moveTo(oldx,oldy);   //移动到点击时候的坐标，以那个坐标为原点  
       ctx.lineTo(newx,newy);   //绘制新的路径  
       ctx.strokeStyle=linecolor;  
       ctx.lineWidth=linw;  
       ctx.lineCap="round";  
       ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。  
    //将新的鼠标位置赋给下一次开始绘制的起始坐标  
       oldx = newx;  
       oldy = newy;  
    };  
 };  
</script>  
</body>  
</html>

zhoutingxixi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript+Canvas实现自定义画板

最近研究了HTML5一些新的元素属性，发现确实好用，特别是里面的Canvas这个新的标签元素。官方介绍：Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。以下使用JavaScript结合Canvas实现一个画板功能得代码<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" &gt
复制链接

扫一扫