javascript - 我怎样才能让我的按钮来选择我的工具来绘制不同的形状？

问题描述

我是 javascript 的新手，所以任何建议都会有所帮助。我正在尝试创建一个像绘画这样的应用程序，您可以在其中通过预览绘制基本形状。我为椭圆、矩形和线条形状实现了一个绘图功能。我希望用户能够选择他想要的乐器，然后用它画画。但我不知道为什么我的按钮不起作用，也不知道为什么我的线条画得如此奇怪。有没有办法在不使用类的情况下做按钮？谢谢！

"use strict";
let canvas = document.getElementById("canvas");
let mainctx = canvas.getContext('2d');
let tempcanvas = document.getElementById("tempcanvas")
let ctx = tempcanvas.getContext('2d');

ctx.fillStyle="aqua";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var widthCns = canvas.width, heightCns =  canvas.height, x1, y1;
var isDown = false;
let currentButton= null;
// var xline1, yline1;
 
//var savedDrawings = [];
//Desenare cu un singur tip de instrument (elipsă)
function drawEllipse(x1, y1, x2, y2){
    var radiusX = (x2 - x1) * 0.5,   /// radius for x based on input
        radiusY = (y2 - y1) * 0.5,   /// radius for y based on input
        centerX = x1 + radiusX,      /// calc center
        centerY = y1 + radiusY,
        step = 0.01,                 /// resolution of ellipse
        a = step,                    /// counter
        pi2 = Math.PI * 2 - step;    /// end angle  
    /// start a new path
    ctx.beginPath();
    /// set start point at angle 0
    ctx.moveTo(centerX + radiusX * Math.cos(0),
               centerY + radiusY * Math.sin(0));
    /// create the ellipse    
    for(; a < pi2; a += step) {
        ctx.lineTo(centerX + radiusX * Math.cos(a),
                   centerY + radiusY * Math.sin(a));
    }
    /// close it and stroke it for demo
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.stroke();
}

//Desenare cu un singur tip de instrument (dreptunghi)
function drawRect(x1, y1, x2, y2){
    var width = x2 -x1;
    var height = y2 - y1;
    ctx.beginPath();
    ctx.rect(x1, y1, width, height);
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.stroke();
}

//Desenare cu un singur tip de instrument (linie)
function drawLine(x1, x2, y1, y2){
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.stroke();
}

//Desenare cu mouse cu preview(elipsa, dreptunghi, line)
//Implementat: elipsa, dreptunghi

/// handle mouse down    
tempcanvas.onmousedown = function(e) {
    /// get corrected mouse position and store as first point
    var rect = tempcanvas.getBoundingClientRect();
    x1 = e.clientX - rect.left;
    y1 = e.clientY - rect.top;
    // xline1 = e.clientX;
    // yline1 = e.clientY;
    isDown = true;

    //    while(savedDrawings !== null){
    //     savedDrawings.pop();
    // } 
}

/// clear isDown flag to stop drawing
tempcanvas.onmouseup = function() {
    isDown = false;
   // savedDrawings.push({X: x1, Y: y1});
}

/// draw ellipse from start point
tempcanvas.onmousemove = function(e) {
    if (!isDown) return;
    var rect = tempcanvas.getBoundingClientRect(),
        x2 = e.clientX - rect.left,
        y2 = e.clientY - rect.top;
    /// clear temporal canvas
    ctx.clearRect(0, 0, widthCns, heightCns);
    /// draw ellipse
    drawEllipse(x1, y1, x2, y2);
}
let btnEllipse = document.getElementById("btnEllipse");
btnEllipse.addEventListener("click", tempcanvas.onmousemove);

// draw rectangle from start point
let btnRectangle = document.getElementById("btnRect");
btnRectangle.addEventListener("click", tempcanvas.onmousemove = function(e) {
    if (!isDown) return;
    var rect = tempcanvas.getBoundingClientRect(),
        x2 = e.clientX - rect.left,
        y2 = e.clientY - rect.top;
    /// clear temporal canvas
    ctx.clearRect(0, 0, widthCns, heightCns);
    /// draw rectangle
    drawRect(x1, y1, x2, y2);
});

// draw line from start point
let btnLine = document.getElementById("btnLine");
btnLine.addEventListener("click", tempcanvas.onmousemove = function(e) {
    if (!isDown) return;
       var rect = tempcanvas.getBoundingClientRect(),
        x2 = e.clientX - rect.left,
        y2 = e.clientY - rect.top;
        // xline2 = e.clientX,
        // yline2 = e.clientY; 
    /// clear temporal canvas
    ctx.clearRect(0, 0, widthCns, heightCns);
    /// desenare linie
    drawLine(x1, y1, x2, y2);
});

ctx.changeShape = function(){

}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="ui.css">
        <title>Proiect: Program de desenare raster folosind elementul canvas </title>
        <!-- <script type="text/javascript" src="app_editor.js"></script> -->
        <style type="text/css"> </style>
    </head>
    <body>
        <canvas id="canvas" width="800" height="500" padding="15px" position="absolute" background-color="aqua" style="border: 1px solid black">
         </canvas>
          <div>
            Shapes
            <button id="btnEllipse">Ellipse Shape</button>
            <!-- <button id="btnRect">Rectangle Shape</button>
            <button id="btnLine">Line Shape</button>
            <button id="btnBackGroundColor">BackGround Color</button> -->
        </div>       
        <!-- canvas temporal -->
        <canvas id="tempcanvas" width=800 height=500 padding="15px" position="absolute" background-color="aqua" style="border: 1px solid black"></canvas>
        <script type="text/javascript" src="app_editor.js">
        "use strict";
        </script>

    </body>
</html>

body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
  }

canvas{
    border:1px solid black;
    width: "800"; 
    height: "500";
    background-color:aqua;
    padding: 5px;
}

tempcanvas{
    border:1px solid black;
    width: "800"; 
    height: "500";
    background-color:aqua;
    padding: 5px;
}

标签： javascripthtmlcsscanvas

javascript - 我怎样才能让我的按钮来选择我的工具来绘制不同的形状？

问题描述

解决方案

推荐阅读