Html5 canvas 简单画布画板涂鸦例子

简单的Html5 canvas 画板涂鸦例子,巧妙的使用onmousemove 事件来实现画画,

可以实现指定颜色和宽度,如图:

Html5 canvas 简单画布画板涂鸦例子_第1张图片

<!DOCTYPE HTML>
<html>
	<head>
		<title>html5 canvas drawing board</title>	
	</head>
	<input type="hidden" id="hid_color" value="red"/>

	COLOR:<input type="button" value="black" style="background:black" name="btn_color"/>
	<input type="button" value="red" style="background:red" name="btn_color"/>
	<input type="button" value="blue" style="background:blue" name="btn_color"/>
	
	SIZE:<input type="radio" value="1" name="rad_size" checked="checked"/>1
	<input type="radio" value="3" name="rad_size"/>3
	<input type="radio" value="5" name="rad_size"/>5
	
	<input type="button" value="Clear" id="btn_clear">
	<br>
	
	<canvas id="mycanvas" width="1000" height="500" style="border:1px solid blue;">
		your browser does not support the canvas tag	
	</canvas>

</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>


$(function(){

	draw();

	$("[name='btn_color']").click(function(){
		$("#hid_color").val(this.value);
		draw();
	});
	
	$("[name='rad_size']").click(function(){
		draw();
	});

	$("#btn_clear").click(function(){
		//用clearRect方法清空画布,
		document.getElementById('mycanvas').getContext("2d").clearRect(0,0,$("#mycanvas").attr("width"),$("#mycanvas").attr("height"));
	});
});

function draw(){

	var drawflag = false;
	var canvas = document.getElementById('mycanvas');
	var cxt = canvas.getContext('2d');

	//指定颜色
	cxt.strokeStyle= $("#hid_color").val(); 
	//指定尺寸
	cxt.lineWidth=$("input[name='rad_size']:checked").val();

	//开始绘画
	canvas.onmousedown = function(event) {
		drawflag = true;
		cxt.beginPath();
		cxt.moveTo(event.clientX, event.clientY);	
	}

	//结束绘画
	canvas.onmouseup = function(event) {
		drawflag = false;
		cxt.closePath();
	}

	//鼠标移动,绘画
	canvas.onmousemove = function(event) {
		if(drawflag) {
			cxt.lineTo(event.clientX, event.clientY);
			cxt.stroke();
		}
	}
}


</script>



你可能感兴趣的:(html5,canvas,涂鸦,画板,画布)