java 在线画布_使用canvas制作在线画板

canvas绘图的强大功能，让人前仆后继的去研究它。代码全部加起来不足百行。还用到了h5中的和

使得页面更加简洁。

本文只用了鼠标的三个事件 onmousedown onmousemove onmouseup就轻松实现了网页画板的制作。

上代码：

#canvas{

border: 1px solid #333;

display: block;

margin:20px auto;

}

#color{

width:100px;

height:32px;

position:absolute;

right:115px;

top:200px;

}

#range{

width:100px;

height:32px;

position:absolute;

right:115px;

top:125px;

}

#demo{

background:black;

width:100px;

height:5px;

position:absolute;

right:115px;

top:100px;

}

CANVAS制作简单在线画板

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

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

va