这篇“怎么用JavaScript Canvas自定义画板”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么用JavaScript Canvas自定义画板”文章吧。

官方介绍：Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

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

<!DOCTYPEHTML><html><head><metacharset="utf-8"/><title>JavaScript+Canvas实现自定义画板</title></head><body><canvasid="canvas"width="600"height="300"></canvas><scripttype="text/javascript">varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");//画一个黑色矩形ctx.fillStyle="black";ctx.fillRect(0,0,600,300);//按下标记varonoff=false;//变量oldx跟oldy代表鼠标移动前的坐标varoldx=-10;varoldy=-10;//设置颜色varlinecolor="white";//设置线宽varlinw=4;//添加鼠标移动事件canvas.addEventListener("mousemove",draw,true);//第三个参数主要跟捕获或者冒泡有关//添加鼠标按下事件canvas.addEventListener("mousedown",down,false);//添加鼠标弹起事件canvas.addEventListener("mouseup",up,false);functiondown(event){onoff=true;oldx=event.pageX-10;oldy=event.pageY-10;//console.log(event.pageX+'..............000.............'+event.pageY);//event.pageX跟event.pageY相对于整个页面鼠标的位置包括溢出的部分（就是滚动条）}functionup(){onoff=false;}functiondraw(event){if(onoff==true){varnewx=event.pageX-10;varnewy=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自定义画板”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。