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

最新推荐文章于 2024-09-14 19:33:38 发布

五只鸭子

最新推荐文章于 2024-09-14 19:33:38 发布

阅读量7.7k

点赞数 1

分类专栏： web前端文章标签： html5 canvas 画板画布涂鸦

本文链接：https://blog.csdn.net/tuposky/article/details/40796769

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

可以实现指定颜色和宽度，如图：

<!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>