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

简单的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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五只鸭子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值