• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    JavaScript+Canvas实现自定义画板的示例代码

    最近研究了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>
    

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

    上一篇:使用html5实现表格实现标题合并的实例代码
    下一篇:HTML5的postMessage的使用手册
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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