canvas画布,canvas绘画板

　　最近研究了HTML5的一些新元素属性，发现确实很好用，尤其是新标签元素Canvas。官方介绍：Canvas API(画布API)是HTML5中新加入的标签，用于在网页上实时生成图片，可以对图片内容进行操作。基本上就是一个可以用JavaScript操作的位图。下面JavaScript结合Canvas实现一个画板功能。

　　演示图：

　　代码部分(可直接复制)

　　！type dochtmlhtmlhead metacarset= utf-8 /title JavaScript canvas实现自定义画板/title/head body canvas id= canvas width= 600 height= 300 /canvasscript type= text/JavaScript var canvas=document . getelementbyid( canvas )；var CTX=canvas . get context( 2d )；//画一个黑色矩形ctx.fillStyle= blackctx.fillRect(0，0，600，300)；//按下标记var onoff=false//变量oldx和oldy代表鼠标移动前的坐标var oldx=-10；var oldy=-10；//设置颜色变量linecolor= white//设置线宽var linw=4；//添加鼠标移动事件canvas . addevent listener( mousemove ，draw，true)；//第三个参数主要和捕获或者冒泡有关。//添加鼠标按下事件canvas . addevent listener( mousedown ，down，false)；//添加鼠标抬起事件canvas . addevent listener( mouseup ，up，false)；函数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；}函数draw(event){ if(onoff==true){ var newx=event . pagex-10；var newy=event . pagey-10；CTX . begin path()；//beginPath()放弃任何当前定义的路径，并开始一个新的路径。它将当前点设置为(0，0)。ctx.moveTo(oldx，oldy)；//点击时移动到坐标，以该坐标为原点ctx.lineTo(newx，newy)；//绘制新路径CTX . stroke style=line color；ctx.lineWidth=linwctx.lineCap= roundCTX . stroke()；//stroke()方法将实际绘制由moveTo()和lineTo()方法定义的路径。默认颜色是黑色。//将新的鼠标位置赋给下一个绘图的起始坐标oldx=newxoldy=newy};};/script/body/html以上是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。