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>