JSFiddle - React, Tailwind, and code Playground

by liyilongcarlos

HTML

<canvas id="canvas">请更新浏览器版本</canvas>

JavaScript

var canvas=document.getElementById("canvas");
		var cxt=canvas.getContext("2d");
		var radius=10;
		var falge=false;
		//画板大小为屏幕大小
		canvas.width=window.innerWidth;
		canvas.height=window.innerHeight;
		cxt.lineWidth=20;
		//添加监听对象
		canvas.addEventListener("mousedown", start);
		canvas.addEventListener("mouseup", stop);
		canvas.addEventListener("mousemove", putPoint);

    	function putPoint(e){
			if(falge){
				cxt.lineTo(e.clientX, e.clientY);
				cxt.stroke();
				cxt.beginPath();
				cxt.arc(e.clientX, e.clientY, radius, 0, 360, false);
				cxt.fill();
				cxt.beginPath();
				cxt.moveTo(e.clientX, e.clientY);

			}
		}

		function start(e){
			falge=true;
			putPoint(e);
		}
		function stop(){
			falge=false;
			cxt.beginPath();
		}