//下面是一个简单的画布项目,通过今天学习后随意敲的,还是比较有趣
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var canvas,context;
window.οnlοad=function(){
//获得canvas对象--画布
canvas=document.getElementById("c");
//使用cancas对象的getContext()方法
//来获得Context对象--画笔
context=canvas. getContext("2d");
//抗锯齿
context.lineCap="round";
//粗细
context.lineWidth=4;
//颜色
context.strokeStyle="brown"
canvas.οnmοusedοwn=function(event){
move1=event.offsetX;
move2=event.offsetY;
flag=true;
}
canvas.οnmοusemοve=function(event){
if(flag){
//准备画线
context.beginPath();
//确定起始点
context.moveTo(move1,move2);
//确定结束点
context.lineTo(event.offsetX,event.offsetY);
//连接起始结束点
context.stroke();
//定义结束点为起始点
move1=event.offsetX;
move2=event.offsetY;
}
}
canvas.οnmοuseup=function(){
flag=false;
}
}
</script>
<style type="text/css">
#fl{
float: left;
margin-top: 15px;
}
</style>
</head>
<body>
<div>
<div id="fl" style="background-color: red;width: 40px;height: 20px;"
οnclick="context.strokeStyle='red'"></div>
<div id="fl" style="background-color: blueviolet;width: 40px;height: 20px;"
οnclick="context.strokeStyle='blueviolet'"></div>
<div id="fl" style="background-color: greenyellow;width: 40px;height: 20px;"
οnclick="context.strokeStyle='greenyellow'"></div>
<div id="fl" style="background-color: teal;width: 40px;height: 20px;"
οnclick="context.strokeStyle='teal'"></div>
<div id="fl" style="background-color: firebrick;width: 40px;height: 20px;"
οnclick="context.strokeStyle='firebrick'"></div>
<div id="fl" style="background-color: darkorange;width: 40px;height: 20px;"
οnclick="context.strokeStyle='darkorange'"></div>
<div id="fl" >线条宽度:<input type="text" value="2" style="width: 100px;height: 25px;margin-left: 30px;"
οnblur="context.lineWidth=this.value"></div>
<div id="fl" ><input type="button" value="清空" οnclick="context.clearRect(0,0,800,500)"
style="width: 100px;height: 30px;margin-left: 30px;font-size: 20px;"/></div>
<br />
<canvas id="c" width="800px" height="500px"
style="border: 3px solid blueviolet;">
</canvas>
</div>
</body>
</html>