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>

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

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