JSFiddle - React, Tailwind, and code Playground

by qian jin

HTML

<canvas id="drawingCanvas" width="300", height="300" style="border: 1px solid"></canvas>
 <div>
   <button onclick="Undo()">撤销</button>
   <button onclick="checkRect()">正方形</button>
   <button onclick="checkCircle()">圆形</button>
   <button onclick="checkArrow()">箭头</button>
   <button onclick="checkLine()">画笔</button>
</div>

JavaScript

var canvas;
var context;
var startX;
var startY;
var endX;
var endY;
var pattern = 'pen';
var memory = [];
var imageSrc = 'http://7sbq8w.com1.z0.glb.clouddn.com/box.png';
var imageObj;
//imageObj = new Image();
//imageObj.src = imageSrc;
// 初始化
window.onload = function() {
    // 获取画布已经绘图上下文
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
		imageObj = new Image();
		imageObj.src = imageSrc;
    imageObj.onload = function () {
    	drawImage();
    }
    // 画布添加鼠标事件
    canvas.onmousedown = startDrawing;
    canvas.onmouseup = draw;
    canvas.onmouseout = draw;
    canvas.onmousemove = strokeConnection;
};

// 记录当前是否在画图
var isDrawing = false;

// 开始画图
function startDrawing(e) {
    isDrawing = true;
    context.strokeStyle = 'red';
    // 把画笔移动到鼠标位置
    startX = e.pageX - canvas.offsetLeft;
    startY = e.pageY - canvas.offsetTop;
    if (pattern == 'arrow') {
        beginPoint.x = startX;
        beginPoint.y = startY;
    } else if (pattern == 'pen') {
        memory.push({lineArray: [], pattern: pattern});
    } else {
        context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
    }
}

function drawImage() {
    if (imageObj.width / imageObj.height > canvas.width / canvas.height) {
        context.drawImage(imageObj, 0, 0, canvas.width, imageObj.height * canvas.width / imageObj.width);
    } else {
        context.drawImage(imageObj, 0, 0, imageObj.width * canvas.height / canvas.height, canvas.height);
    }
}

//画图
function draw(e) {
    if (isDrawing == true && pattern != 'pen') {
        endX = e.pageX - canvas.offsetLeft;
        endY = e.pageY - canvas.offsetTop;
        if (pattern == 'rect') {
            drawRect();
        }
        if (pattern == 'circle') {
            drawArc();
        }
        if (pattern == 'arrow') {
            drawArrow();
        }
        memory.push({startX: startX, startY: startY, endX: endX, endY: endY, pattern: pattern});
        isDrawing = false;
  ...