Canvas画板_freedrawingcursor-CSDN博客

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		html{
			height: 100%;
		}
		body{
			margin-top: 100px;
			height: 100%;
			background: url({3E464148-F55C-2F6C-8BCE-A3FECE661628}.png) no-repeat center;
		}
		#canvas{
			background: #F9F4F1;
			cursor: url(brush.cur),auto;
		}
		#text{
			width:18px;
			text-align: center;
		}
		.box{
			position: absolute;
			/*background: rgba(0,0,0,.5);*/
			background: grey;
			top: 97px;
			left: 328px;
			color: white;
			font-size: 12px;
			
		}
	</style>
	<script type="text/javascript">
		window.onload = function()
		{
			var canvas = document.getElementById("canvas");
			var Context = canvas.getContext('2d');
			//设置填充颜色
//			Context.fillStyle = 'royalblue';
//			//x,y, w,h  在那里开始画
//			Context.fillRect(10,20,30,30);
//			
//			Context.fillStyle = 'red';
//			Context.fillRect(100,20,30,30);
			
			//线条粗细
//			Context.lineWidth = '10';
//			//线条颜色
//			Context.strokeStyle = '#fff';
//			//绘制圆角
//			Context.lineJoin = 'round';
//			// 画位置，没有填充
//			Context.strokeRect(100,100,200,200);
//			
//			//填充颜色
//			Context.fillStyle = 'red';
//			//填充到那里
//			Context.fillRect(100,100,200,200);
//--------------------------------------------------------------------
//画线
//			Context.lineWidth = '10';
//			//线的颜色
//			Context.strokeStyle = 'yellow';
//			
//			//准备画线
//			Context.beginPath();
//			//画线起始位置
//			Context.moveTo(100,50);
//			//画线结束位置
//			Context.lineTo(200,200);
//			//把2点连接起来
//			Context.stroke();
//----------------------------------------------------------------
//画板

			Context.lineWidth = '1';
			Context.strokeStyle = '#fff';
			
			canvas.onmousedown = function(e){
			var e = e||window.event;
//				获得鼠标按下是当前点的X轴的坐标
				var starX = e.offsetX||e.layerX;
//				获得鼠标按下是当前点的Y轴的坐标
				var starY = e.offsetY||e.layerY;					
//				console.log(starX+'|'+starY);
			
				//开始画线，起始位置
				
				
				Context.beginPath();  //开始画画
				Context.moveTo(starX,starY);   //设置开始画画的xy坐标 就是上面鼠标按下时的位置
				
				canvas.onmousemove = function(e)   //、 给画板里 加  移动事件
				{
					var e = e||window.event;
					var endx = e.offsetX||e.layerX;  
					var endy = e.offsetY||e.layerY;
					Context.lineTo(endx,endy);   //设置结束画画的xy 坐标， 就是 鼠标一直在画板里面  一直移动的获取的 x y
					Context.stroke();     //连接  、、 或当作结束 画画
				}
				
				canvas.onmouseup = function()  // 当 在画板上 鼠标 松开的 时候
				{
					canvas.onmousemove = null;  //， 清除  鼠标   移动事件 
				}
			//  一直都是在 操作 画板的  id，  注意！！	
			}
		
		
		var btn = document.getElementById("btn");
		btn.onclick = function()   //橡皮
		{ 
			canvas.style.cursor = 'url(eraser.cur),auto';  // 点击 橡皮时，   换鼠标图标
//			clearInterval(timer);
//			color.value = '#F9F4F1';
			Context.strokeStyle = '#F9F4F1';  //  把 画笔颜色 换成   和 背景 一样的 颜色  
		}
		
		
		
		var color = document.getElementById("color");
		var t;
		color.onclick = function()      // 选颜色
		{
			canvas.style.cursor = 'url(brush.cur),auto';  //点击选颜色 
//			timer = setInterval(function(){
//				Context.strokeStyle = color.value;  //    
//				console.log(Context.strokeStyle);
//			},1000)
		}
		
//		var timer = setInterval(function(){
		color.onchange = function()
		{
			Context.strokeStyle = color.value; //  颜色改变时 把 颜色值 给 画笔 
		}
			
//		},1000)
		
//		var sx = setInterval(function(){
//			Context.lineWidth = txt.value;
//			Context.lineWidth = huabi.value;
//			
//		})
		
		
		/
		var huabi = document.getElementById("huabi");
		var txt = document.getElementById("text");
		
		huabi.onchange = function()  //画笔 粗细
		{
			txt.value = huabi.value;
			Context.lineWidth = txt.value;
		}
		
		var re = document.getElementById("re");
		re.onclick = function()  //重置画板
		{
//			Context.clearRect(0,0,635,400);
			location.reload();   
		}
}		


	</script>
</head>
<body>
	<div class="box">
		<canvas id="canvas" width="635" height="400"></canvas>
			<div class="clear">
				<input type="button" name="btn" id="btn" value="橡皮擦" />
				选择颜色<input type="color" name="" id="color" value="#FFFFFF" />
				选择画笔粗细<input type="range" name="" max="10" min="1" id="huabi" value="1" />
				<input type="text" name="" id="text" value="1" />
				<input type="button" value="重置画板" id="re"/>
			</div>
	</div>
	
</body>
</html>