JSFiddle - React, Tailwind, and code Playground

by liyilongcarlos

HTML

<canvas width="900" height="500" id="canvas" style="border:1px solid black">请更新浏览器版本</canvas>

JavaScript

var canvas=document.getElementById("canvas");
		var cxt=canvas.getContext("2d");
		var flag=false
		cxt.lineWidth=20;
		canvas.onmousedown=function(evt){
			//alert(evt.pageX);
			//alert(this.offsetLeft);
		
				var startX=evt.clientX-this.offsetLeft;
				var startY=evt.clientY-this.offsetTop;
				cxt.beginPath();
				cxt.moveTo(startX, startY);
				flag=true;
			
		}

		canvas.onmousemove=function(evt){
			if(flag){
				var endX=evt.clientX-this.offsetLeft;
				var endY=evt.clientY-this.offsetTop;
			
				cxt.lineTo(endX, endY);
				cxt.stroke();
			}
		}

		canvas.onmouseup=function(){
			flag=false;
		}
		canvas.onmouseout=function(){
			flag=false;
		}