本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能。分享给大家供大家参考，具体如下：

先来看运行效果：

具体代码如下：

www.jb51.net JS写字板

body,html {

padding: 0;

margin: 0;

}

a,div,span {

font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;

}

.canvas-box {

display: block;

margin: 40px auto;

background: #f5f5f5;

}

.color-box {

width: 1080px;

display: block;

margin: 20px auto;

text-align: center;

}

.color-item {

display: inline-block;

vertical-align: middle;

width: 48px;

height: 24px;

margin: 10px;

background: #989898;

cursor: pointer;

}

.red {

background: #e01d5b;

}

.blue {

background: #1d6ae0;

}

.green {

background: #1de087;

}

.yellow {

background: #f3e41d;

}

.orange {

background: #f9850b;

}

.black {

background: #333;

}

.color-item.active {

border: solid 3px #565656;

}

.btn {

display: block;

width: 120px;

height: 40px;

line-height: 40px;

margin: 10px auto;

text-align: center;

font-size: 18px;

border: solid 1px #999;

border-radius: 5px;

cursor: pointer;

}

var canvas = document.getElementById('canvas');

var context = canvas.getContext("2d");

var isDraw = false; //定义变量控制画笔是否可用

var movePos; //定义变量存放初始画笔开始位置

var linWidth = 10;

var linColor = '#333';

window.onload = function(){

draw();

}

function draw(){

canvas.width = 500;

canvas.height = 500;

context.strokeStyle = "red";

context.lineWidth = 10;

context.beginPath();

context.strokeRect(0,0,500,500);

//设置画笔颜色，宽度

context.strokeStyle = "red";

context.lineWidth = 1;

//使线段连续，圆滑

context.lineCap = "round";

context.lineJoin = "round";

drawDashedLine(context,0,0,500,500);

drawDashedLine(context,0,500,500,0);

drawLine(context,0,250,500,250);

drawLine(context,250,0,250,500);

}

//画虚线(参照网上大神)

function drawDashedLine(context, x1, y1, x2, y2, dashLength) {

dashLength = dashLength === undefined ? 5 : dashLength;

var deltaX = x2 - x1;

var deltaY = y2 - y1;

var numDashes = Math.floor(

Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);

for (var i=0; i < numDashes; ++i) {

context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ] (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);

}

context.stroke();

};

//画直线

function drawLine(context,x1,y1,x2,y2){

context.moveTo(x1,y1);

context.lineTo(x2,y2);

context.stroke();

};

//获取鼠标相对与canvas位置

function getPos(x,y){

var box = canvas.getBoundingClientRect();

return {x: x-box.left,y: y-box.top};

};

//画笔

function drawing(e){

if(isDraw){

var position = getPos(e.clientX,e.clientY);

context.strokeStyle = linColor;

context.lineWidth = linWidth;

context.save();

context.beginPath();

context.moveTo(movePos.x,movePos.y);

context.lineTo(position.x,position.y);

context.stroke();

movePos = position;

context.restore();

}

}

//鼠标点下

canvas.onmousedown = function(e){

isDraw = true;

movePos = getPos(e.clientX,e.clientY);

drawing(e);

}

//鼠标移动

canvas.onmousemove = function(e){

drawing(e);

}

//鼠标松开

canvas.onmouseup = function(e){

isDraw = false;

}

//鼠标离开

canvas.onmouseout =function(e){

isDraw = false;

}

//选择画笔颜色

$('.color-item').on('click',function(){

$(this).addClass('active').siblings().removeClass('active');

linColor = $(this).css('background-color');

});

//清除

function clearDraw(){

context.clearRect(0,0,500,500);

draw();

}

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，亲身体验一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。