使用Html5中Canvas实现一个画板_H5之家 - 中国HTML5教程资源分享第一站

众所周知，Canvas是HTML5的新元素之一，用于在网页上绘制图形，利用ta，我们可以在网页上进行图像图形操作，可是Canvas元素本身是没有绘图能力的，我们需要借助JavaScript来实现绘图的功能。

现在，我就用JavaScript中Canvas的API来实现一个画板。

先看一下实现后的效果，然后再看具体代码，效果截图如下：

使用一个Canvas元素在页面中画出一块黑色区域作为画板，然后在画板下方放置几个按钮来设置画笔的颜色，最后一个按钮将Canvas中所绘制的图像复制到下方的img标签区域。

最终效果图如下：

好了，看完效果图，再看一下具体代码：

html部分：

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel ="stylesheet" type="text/css" href=\'#\'" /style1.css"/> </head> <body> <canvas id="myCanvas" width="600" height="300"> 这个浏览器不支持Canvas标签 </canvas><br/> <button id="yellowBtn" = "yellow";'>Yellow</button> <button id="redBtn" = "red";'>Red</button> <button id="blueBtn" = "blue";'>Blue</button> <button id="greenBtn" = "green";'>Green</button> <button id="whiteBtn" = "white";'>White</button> <button id="blackBtn" = "black";'>Black</button> <button id="exportBtn" <br/> <img src="" id="image_png" width="600" height="300"/> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //画一个黑色矩形 ctx.fillStyle = "black"; ctx.fillRect(0,0,600,300); //按下标记 var onoff = false; var oldx = -10; var oldy = -10; //设置颜色 var lineColor = "white"; //设置线宽 var lineW = 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; } function up(event){ onoff = false; } function draw(event){ if(onoff === true){ var newx = event.pageX - 10; var newy = event.pageY - 10; ctx.beginPath(); ctx.moveTo(oldx, oldy); ctx.lineTo(newx, newy); ctx.strokeStyle = lineColor; ctx.lineWidth = lineW; ctx.lineCap = "round"; ctx.stroke(); oldx = newx; oldy = newy; } } function copyImage(event){ var image_png_ canvas.toDataURL("image /png"); document.getElementById("image_png"). image_png_src; } </script> </body> </html>

其中，有一句代码：

是引入外部的CSS文件，这里，我把该文件命名为style1.css。

#yellowBtn{ width: 80px; background-color: yellow; } #redBtn{ width: 80px; background-color: red; } #blueBtn{ width: 80px; background-color: blue; } #greenBtn{ width: 80px; background-color: green; } #whiteBtn{ width: 80px; background-color: white; color: black; } #blackBtn{ width: 80px; background-color: black; color: white; } #exportBtn{ width: 80px; background-color: navy; color: magenta; }

好了，以上就是这个画板的全部代码，只有简短的几行代码，就实现了一个简单的画板

热门搜索： Html5 Canvas 画板