Cavas画板功能

最新推荐文章于 2024-04-20 16:29:18 发布

原创最新推荐文章于 2024-04-20 16:29:18 发布 · 752 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

Cavas网页画板功能专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用HTML5的Canvas元素创建一个简单的在线画板。通过监听鼠标事件，如按下、移动和释放，结合CSS样式，实现了画笔效果。代码中包含了完整的HTML、CSS和JavaScript实现。

Cavas画板功能-许俊活

CSS样式代码

body,
			html {
				text-align: center;
				padding-top: 20px;
				/*margin: 0;*/
			}

			canvas {
				box-shadow: 0 0 10px #333;
				margin: 0 auto;
				/*position: absolute;
				left: 0; 
				border: 1px solid red;*/
			}

这是主体代码

<body onload="draw()">
   <canvas id="canvas" width="800" height="600">
   </canvas>
   <script>
			function draw() {
				var canvas = document.getElementById("canvas");
				 if (canvas.getContext) {
					var ctx = canvas.getContext('2d');
					 //涂鸦
					//添加鼠标按下事件
					 canvas.onmousedown=function(e){
						var ev=e||window.event;//兼容性
					var x=ev.clientX-canvas.offsetLeft;
						var y=ev.clientY-canvas.offsetTop;
						
						ctx.strokeStyle='red';
					 	ctx.lineWidth=10;
					
					 	ctx.beginPath();
						ctx.moveTo(x,y);

					//onmousemove
					 	canvas.onmousemove=function(e){
							var ev=e||window.event;//兼容性
						var x=ev.clientX - canvas.offsetLeft;
						var y=ev.clientY - canvas.offsetTop;
							ctx.lineTo(x,y);
					 		ctx.stroke();
				 	}
					 canvas.onmouseup=function(){
					  canvas.onmousemove="";//当鼠标不点击时则不会画画
					
					   }
					 }
					}
            }
            </script>
            </body>