点击查看演示地址
<!DOCTYPE HTML>
<html>
<title>HTML5-CanvasDrawDemo</title>
<meta charset="utf-8"/>
<body>
<style>
div {
border:0;
margin:auto;
500px;
}
#div_head {
border:0;
}
#div_head span{
font-size:10px;
}
body canvas
{
border: 2px solid blue;
border-radius:10px;
}
#txt_alpha { 20px;}
#txt_width{ 30px;}
footer {
margin:auto;
text-align:center;
font-size:10px;
}
</style>
<div id="div_head">
<fieldset>
<legend>Controller</legend>
Color:<input id='btn_color' type='color' />
Alpha:<input id="txt_alpha" type='range' min="0" max="1" step="0.1" value="1"/>
Size:
<input id='txt_width' type='range' min="1" max="10" step="1" value="4"/>
<input id="btn_pre" type='button' value="撤销"/>
<input id="btn_next" type='button' value="恢复"/>
<input id="btn_clear" type='button' value="Clear"/>
</fieldset>
</div>
<div>
<canvas id="drawgph" width="500" height="400" >
<span><font color='red'>浏览器不支持Html5中的Canvas元素!</font></span>
</canvas>
</div>
<footer>
<span>Google Chrome 版本 33.0.1750.154 m 测试通过!</span></br>
<span>IE9.0 不支持颜色选择,需手动填入颜色值,格式为“#FFFFFF”。</span></br>
<span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=170515071&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:170515071:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a></span></br>
<span>
<a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2qKzu7Wjr_-q7Oiaq6v0ubW3" style="text-decoration:none;"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_12.png"/></a>
</span>
</footer>
<script type="text/javascript">
//检测浏览器版本
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([d.]+)/)[1] :
document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox/([d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome/([d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([d.]+)/)[1] :
window.openDatabase ? Sys.safari = ua.match(/version/([d.]+)/)[1] : 0;
if(Sys.ie>=9){//IE9.0目前不支持type=color
document.getElementById('btn_color').value="#000000";
}
if(Sys.firefox) ver='Firefox: '+Sys.firefox;
if(Sys.chrome) ver='Chrome: '+Sys.chrome;
if(Sys.opera) ver='Opera: '+Sys.opera;
if(Sys.safari) ver='Safari: '+Sys.safari;
var obj = document.getElementById('drawgph');
var ctx = obj.getContext('2d');
var start_X = 0;//起点X轴位置
var start_Y = 0;//起点Y轴位置
var isMove = false;//是否绘制图形
var history=[];//历史操作记录
var count=0;//记录当前执行的步骤数(绘制+1;撤销-1 ;恢复+1)
var colorObj=document.getElementById('btn_color');//颜色对象
var alpha=document.getElementById('txt_alpha');//透明对象
var size=document.getElementById('txt_width');//画笔宽度
obj.addEventListener("mousedown", function (e) {
start_X = e.pageX-e.target.offsetLeft;
start_Y = e.pageY-e.target.offsetTop;
//console.log('mousedown on ('+start_X+','+start_Y+')');
isMove = true;
ctx.lineWidth =size.value;
ctx.strokeStyle=colorObj.value;
ctx.globalAlpha=alpha.value;
ctx.save();
});
obj.addEventListener("mousemove", function (e) {
if (isMove) {
ctx.beginPath();
ctx.moveTo(start_X,start_Y);
ctx.lineTo(e.pageX-e.target.offsetLeft, e.pageY-e.target.offsetTop);
ctx.stroke();
start_X = e.pageX-e.target.offsetLeft;
start_Y = e.pageY-e.target.offsetTop;
}
});
obj.addEventListener("mouseup", function (e) {
ctx.restore();
//如果有产生绘图则记录操作
if(isMove){
historyLog();
}
isMove = false;
//如果在内部释放中断冒泡事件
window.event.cancelBubble=true;
});
//防止用户画笔在画布范围外释放后回到画布持续绘画状态
window.addEventListener('mouseup',function(e){
ctx.restore();
//如果有产生绘图则记录操作
if(isMove){
historyLog();
}
isMove=false;
});
//首次加载时保存空白画布历史记录
window.addEventListener('load',historyLog);
//Clear按钮清除画布内容
btn_clear.onclick=function(){
//console.log("Action: btn_clear.onclick" );
ctx.clearRect(0,0,500,400);
count=0;
history=[];
historyLog();
}
//撤销
btn_pre.onclick=function(){
count--;
//console.log("撤销操作时变量Count:"+count);
if(count==0){
count++;
}
ctx.putImageData(history[count-1],0,0);
//console.log(history);
}
//恢复
btn_next.onclick=function(){
//console.log("恢复操作时变量Count:"+count);
if(history[count]){
ctx.putImageData(history[count],0,0);
count++;
}
}
//记录操作
function historyLog(){
//console.log("记录操作时变量Count:"+count);
history[count]=(ctx.getImageData(0,0,500,400));
count++;
//console.log(history);
}
</script>
</body>
</html>
点击查看演示地址