<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <style>
? ? ? ? canvas {
? ? ? ? ? ? margin: 100px;
? ? ? ? }
? ? </style>
? ? <canvas id="mycanvas" width="400px" height="500px" style="border: 1px solid #000"></canvas>
? ? <button id="clear">清除画布</button>
? ? <script type="text/JavaScript">
? ? ? ? const isMobile = () => {
? ? ? ? ? ? return /iPhone|iPad|iPod|Android|Windows Phone/i.test(navigator.userAgent);
? ? ? ? };
? ? ? ? var DrawFigure = (function(){
? ? ? ? ? ? function DrawFigure (canvas,options) {
? ? ? ? ? ? var _this = this;
? ? ? ? ? ? this.canvas = canvas;
? ? ? ? ? ? this._ctx = this.canvas.getContext('2d');
? ? ? ? ? ? this.lastPt = null;
? ? ? ? ? ? this.canvasInfo = this.canvas.getBoundingClientRect();
? ? ? ? ? ? if(options === void 0) {
? ? ? ? ? ? ? ? options = {};
? ? ? ? ? ? }
? ? ? ? ? ? this.options = options;
? ? ? ? ? ? this._handleMouseDown = (event) => {
? ? ? ? ? ? ? ? console.log('_handleMouseDown');
? ? ? ? ? ? ? ? const pageX = isMobile() ? event.touches[0].pageX : event.pageX;
? ? ? ? ? ? ? ? const pageY = isMobile() ? event.touches[0].pageY : event.pageY;
? ? ? ? ? ? ? ? _this._mouseButtonDown = true;
? ? ? ? ? ? ? ? this.lastPt = {
? ? ? ? ? ? ? ? ? ? x: pageX,
? ? ? ? ? ? ? ? ? ? y: pageY,
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? _this._ctx.beginPath();
? ? ? ? ? ? ? ? _this._ctx.moveTo(_this.lastPt.x - _this.canvasInfo.left, _this.lastPt.y - _this.canvasInfo.top);
? ? ? ? ? ? ? ? // console.log(
? ? ? ? ? ? ? ? // ? ? _this.lastPt.x - _this.canvasInfo.left,
? ? ? ? ? ? ? ? // ? ? _this.lastPt.y - _this.canvasInfo.top,
? ? ? ? ? ? ? ? // ? ? event.pageX - _this.canvasInfo.left,
? ? ? ? ? ? ? ? // ? ? event.pageY - _this.canvasInfo.top
? ? ? ? ? ? ? ? // )
? ? ? ? ? ? }
? ? ? ? ? ? this._handleMouseMove = function(event) {
? ? ? ? ? ? ? ? if(_this._mouseButtonDown) {
? ? ? ? ? ? ? ? ? ? console.log('_handleMouseMove', event);
? ? ? ? ? ? ? ? ? ? const pageX = isMobile() ? event.touches[0].pageX : event.pageX;
? ? ? ? ? ? ? ? ? ? const pageY = isMobile() ? event.touches[0].pageY : event.pageY;
? ? ? ? ? ? ? ? ? ? console.log(
? ? ? ? ? ? ? ? ? ? ? ? pageX, _this.canvasInfo.left,
? ? ? ? ? ? ? ? ? ? ? ? pageY, _this.canvasInfo.top
? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? var event = window.event || event;
? ? ? ? ? ? ? ? ? ? _this._ctx.lineTo(pageX - _this.canvasInfo.left, pageY - _this.canvasInfo.top);
? ? ? ? ? ? ? ? ? ? _this._ctx.strokeStyle = _this.options.strokeStyle || 'green';
? ? ? ? ? ? ? ? ? ? _this._ctx.lineWidth = _this.options.lineWidth || 3;
? ? ? ? ? ? ? ? ? ? _this._ctx.stroke();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? this._handleMouseUp = function(event) {
? ? ? ? ? ? ? ? console.log('_handleMouseUp');
? ? ? ? ? ? ? ? _this._mouseButtonDown = false;
? ? ? ? ? ? ? ? _this.canvas.removeEventListener('pointermove',_this.__handleMouseMove,false);
? ? ? ? ? ? ? ? _this.canvas.removeEventListener('mousemove',_this.__handleMouseMove,false);
? ? ? ? ? ? ? ? _this.lastPt = null;
? ? ? ? ? ? ? ? this.canvasInfo = {
? ? ? ? ? ? ? ? ? ? x: 0,
? ? ? ? ? ? ? ? ? ? y: 0,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? _this._ctx.closePath();
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? ? ? DrawFigure.prototype.init = function() {
? ? ? ? ? ? ? ? this._mouseButtonDown = false;
? ? ? ? ? ? ? ? if((isMobile())) {
? ? ? ? ? ? ? ? ? ? this.canvas.addEventListener('touchstart',this._handleMouseDown,false);
? ? ? ? ? ? ? ? ? ? this.canvas.addEventListener('touchmove',this._handleMouseMove,false);
? ? ? ? ? ? ? ? ? ? this.canvas.addEventListener('touchend',this._handleMouseUp,false);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? this.canvas.addEventListener('mousedown',this._handleMouseDown,false);
? ? ? ? ? ? ? ? ? ? this.canvas.addEventListener('mousemove',this._handleMouseMove,false);
? ? ? ? ? ? ? ? ? ? this.canvas.addEventListener('mouseup',this._handleMouseUp,false);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? DrawFigure.prototype.clear = () => {
? ? ? ? ? ? ? ? this._ctx.clearRect(0, 0, 400, 500);
? ? ? ? ? ? ? ? console.log('this._ctx', this._ctx)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return DrawFigure;
? ? }());
? ? window.onload = function() {
? ? ? ? var canvas = document.getElementById('mycanvas');
? ? ? ? var clear = document.getElementById('clear');
? ? ? ? var drawFigure = new DrawFigure(canvas);
? ? ? ? clear.addEventListener('click', function () {
? ? ? ? ? ? drawFigure.clear();
? ? ? ? },false);
? ? ? ? drawFigure.init();
? ? }
? ? </script>
</body>
</html>