原生js实现画图

原生js实现画图

可以用来做你画我猜小游戏的前半部分。

首先写出canvas属性

<canvas id="canvas" width="400" height="400">
			canvas
		</canvas>

然后给body和canvas属性 突出canvas的范围

<style>
			body{
				width: 100%;
				height: 100%;
				background: black;
			}
			canvas{
				background: #fff;			
			}
</style>

接下里的原生js

oC.onmousedown = function(e){
				var disX = e.clientX-oC.offsetLeft
				var disY = e.clientY-oC.offsetTop
				
				oGC.moveTo(disX,disY)
				document.onmousemove = function(e){
					var disX = e.clientX-oC.offsetLeft
					var disY = e.clientY-oC.offsetTop
					oGC.lineTo(disX,disY)
					oGC.stroke()
				}
				document.onmouseup = function(){
					document.onmousedown = null
					document.onmousemove = null
				}
				
			}

分析：

首先获取节点（oGC是获取canvas的2d画面）

var oC = document.getElementById("canvas")
var oGC = oC.getContext("2d")		

鼠标在canvas范围内初次点击（获取当前的X轴和Y轴的值  然后持续拖动画图）

oGC.moveTo(disX,disY)
                    var disX = e.clientX-oC.offsetLeft
		    var disY = e.clientY-oC.offsetTop
				document.onmousemove = function(e){
					var disX = e.clientX-oC.offsetLeft
					var disY = e.clientY-oC.offsetTop
					oGC.lineTo(disX,disY)
					oGC.stroke()
				}

鼠标抬起 重置X轴和Y轴的值

document.onmouseup = function(){
					document.onmousedown = null
					document.onmousemove = null
				}

然后打开浏览器 就可以实现画图