<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>无标题文档</title> | |
<script type="text/javascript"> | |
var canvas,context; | |
window.οnlοad=function(){ | |
//获得canvas对象--画布 | |
canvas=document.getElementById("mycanvas"); | |
//使用cancas对象的getContext()方法 | |
//来获得Context对象--画笔 | |
context=canvas. getContext("2d"); | |
context.lineCap="round"; | |
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> | |
div{float:left;} | |
</style> | |
</head> | |
<body> | |
<canvas id="mycanvas" width="800" height="600" style="border:1px solid black;"> | |
</canvas> | |
<div id="fatherdiv"> | |
<div style="width:50px; height:20px; | |
background-color:#F00;" | |
onclick="context.strokeStyle='#F00'"> | |
</div> | |
<div style="width:50px; height:20px; | |
background-color:#0F0;" | |
onclick="context.strokeStyle='#0F0'"> | |
</div> | |
<div style="width:50px; height:20px; | |
background-color:#00F;" | |
onclick="context.strokeStyle='#00F'"> | |
</div> | |
<div style="width:50px; height:20px; | |
background-color:#FF0;" | |
onclick="context.strokeStyle='#FF0'"> | |
</div> | |
<div style="width:50px; height:20px; | |
background-color:#0FF;" | |
onclick="context.strokeStyle='#0FF'"> | |
</div> | |
<div style="width:50px; height:20px; | |
background-color:#F0F;" | |
onclick="context.strokeStyle='#F0F'"> | |
</div> | |
<div style="width:50px; height:20px; | |
background-color:#F60;" | |
onclick="context.strokeStyle='#F60'"> | |
</div> | |
<div style="width:50px; height:20px; | |
background-color:#000;" | |
onclick="context.strokeStyle='#000'"> | |
</div> | |
线条宽度:<input type="text" value="2" | |
onblur="context.lineWidth=this.value"/> | |
<input type="button" value="清空" onclick="context.clearRect(0,0,800,600)"/> | |
</div> | |
</body> | |
</html> |
HTML5网页绘画板
最新推荐文章于 2022-04-08 10:46:04 发布