js和html5实现画板

html5新添了一个重要又强大的标签元素<canvas>,该标签真有彻底替换掉flash的尽头，现在很多网页游戏就是用<canvas>完成的，下面代码就是用该标签制作的一个画板。

效果图：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8"/>
<style>
#canvas{cursor:crosshair;}
#red{background:red; width:30px;height: 27px}
#blue{background:blue; width:30px;height: 27px}
#yellow{background:yellow; width:30px;height: 27px}
#white{background:white; width:30px;height: 27px}
#zi{background:#8B026B; width:30px;height: 27px}
</style>

</head>
<body>
<canvas id="canvas" width="600" height="400"> </canvas>
<br><label>画笔颜色：</label>
<input type="button" id="red" onclick="linecolor='red'">
<input type="button" id="blue" onclick="linecolor='blue'">
<input type="button" id="yellow" onclick="linecolor='yellow'">
<input type="button" id="white" onclick="linecolor='white'">
<input type="button" id="zi" onclick="linecolor='#8B026B'">
<label>画笔宽度：</label>
<select id="sel">
	<option value="4">4</option>
	<option value="8">8</option>
	<option value="16">16</option>
	<option value="30">30</option>
</select>
<input type="button" value="生成图片" onclick="change()"><br>
<img id="image" src="" width="500px" height="200px">

<script type="text/javascript">
function change(){
	document.getElementById("image").src=canvas.toDataURL("image/jpg");
	//window.open("demo.htm", "height=100px, width=400px");
	//alert(document.getElementById("image"));
	}
//下拉画笔宽度
window.onload=function(){
	var huabi=document.getElementById("sel");
	huabi.onchange=function(){
	linw=huabi.value;
	};
	//linw=huabi;
};
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//画一个黑色矩形
ctx.fillStyle="#002200";
ctx.fillRect(0,0,600,400);
//按下标记
var onoff=false;
var oldx=-10;
var oldy=-10;
//设置颜色默认为白色
var linecolor="white";
//宽度默认为4
var linw=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(){
	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=linw;
		ctx.lineCap="round";
		ctx.stroke();

		oldx=newx;
		oldy=newy;
		}
	}
</script>
</body>
</html>