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>
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！