最近刚学了canvas,写个小应用练习下

源代码

 <!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
var drawable=false;
$(function(){
$("#drawOnBoard").css({"background-color":$("#backgroundcolorChooser").val()});
});
function changeBackgroundColor()
{
$("#drawOnBoard").css({"background-color":$("#backgroundcolorChooser").val()});
}
function setDrawable(sdrawable)
{
drawable=sdrawable;
}
function beginDrawPicture(event)
{
if(drawable==true)
{
var canvas=$("#drawOnBoard");
canvas=canvas[0];
var content=canvas.getContext("2d"); var mouseX=event.clientX;
var mouseY=event.clientY; content.beginPath(); content.arc(mouseX,mouseY,$("#slider-fill").val()*2,0,Math.PI*2,true); content.closePath();
content.fillStyle=$("#pencolorChooser").val();
content.fill();
}
}
</script>
<style type="text/css">
.chooseBar{
display:inline-block;
width:200px;
}
div.ui-input-text{
display:inline-block;
width:270px;
}
div.ui-slider{
display:inline-block;
width:300px;
}
</style>
</head> <body>
<canvas id="drawOnBoard" width="600px" height="600px" onmousedown="setDrawable(true);" onMouseMove="beginDrawPicture(event);" onMouseUp="setDrawable(false);" style="border:5px wheat solid;background-color:white;float:left;"></canvas>
<div style="float:left;margin-top:50px;margin-left:20px;">
改变画笔颜色:<input type="color" id="pencolorChooser" class="chooseBar"/>
<br/>
改变画板颜色:<input type="color" id="backgroundcolorChooser" value="#ffffff" onChange="changeBackgroundColor();" class="chooseBar"/>
<br/>
改变画笔大小:<input type="range" name="slider-fill" id="slider-fill" value="5" min="1" max="10" step="1" data-highlight="true" class="chooseBar">
</div>
</body>
</html>

运行效果如图

[原创]基于html5新标签canvas写的一个小画板-LMLPHP

仍然有一些问题:

改变浏览器位置时实际绘画位置和鼠标位置有差

滑鼠走动过快会产生断点

希望学习更多知识以后来改进

05-08 08:17