个人中心
gpt4 book ai didi

javascript - 改变 Canvas 内div的背景颜色Javascript

转载 作者：行者123 更新时间：2023-12-01 01:11:55 25 4
gpt4 key购买 nike

我有这个程序，我正在创建一个绘画软件。当我在移动鼠标时按下 ctrl 键时，它会打开橡皮擦。我有一个 div 元素，它是一个跟踪鼠标的框，以便用户知道鼠标在 Canvas 中的位置。

我遇到的问题是，当 div 元素进入橡皮擦模式时，我无法将其颜色更改为白色。这是我的代码:

<!doctype html>
<html lang="en">
    <head> 
    <title>Coursework 1 Template v1.0</title>

    <style>
            #box {
          pointer-events: none;
          background-color: #000000;
          width: 5px;
          height: 5px;
        }
        </style>

    <script>
        var oCanvas, oCanvasContext; //declare the global variables used to hold and control the canvas element
        var sFillColour; //create a global variable used to hold the active/selected colour
        var sCanvasColour; //create a global variable used to hold the canvas colour
        var iMouseX, iMouseY; //declare the global variables used to hold the mouse's coordinates
        var iBrushWidth, iBrushHeight; //declare the global variables used to hold the selected brush sizes
            function fnTrackMouse(e) {
            //this function is called "everytime" the user's mouse is moved when over the associated element (in this case the canvas)
            //we have also added the ability for it to accept a parameter (called e, actually we can call it anything but as event is a reserved work "e" makes some sense
            var canvasRect = oCanvas.getBoundingClientRect(); //use this function to dynamically get the size of the canvas and its position
            iMouseX=(e.clientX - canvasRect.left - 3); //modify the original position of the mouse by accounting for the position on the canvas; on the x
            iMouseY=(e.clientY - canvasRect.top - 3); //modify the original position of the mouse by accounting for the position on the canvas; on the y

            var bx = document.getElementById("box");
            bx.style.left = (iMouseX + 1)+"px";
            bx.style.top = (iMouseY + 1)+"px";
            fnDebugMessage("Working!"+iMouseX)

            if (e.ctrlKey) { //this checks if the user has pressed the control key to use the eraser funtion
                fnSetFillColour(sCanvasColour); //calls the fnSetFillColour function with the background colour of the canvas in the parameter
                bx.style.background-color = #ffffff
            }       


            if (e.buttons==1) { //this checks to see if the user is pressing the left mouse button (1 = the left mouse button)
                //the user has pressed the left button - so lets start painting
                fnPaint(iMouseX, iMouseY, iBrushWidth, iBrushHeight); //call the fnPaint function and pass it the coordinates and size to paint
            }

        </script>

</head>

<!-- 
    this "onload" event fires when the HTML <body> has loaded. In essence, we are telling the browser that once the page 
    has completely loaded all the content to execute a script. 
    in this case the function being called is "fnInitialise" and we are passing it two parameters: 
        the first (work out how this sets the width) = 100 
        the second (work out how this sets the height) = 100 
-->


<body onload="fnInitialise(100, 100);">

    <!-- 
        this div block (HTML page divider) is used to hold the entire interactive painting HTML elements 
        the benefit of putting multiple elements in a single container is that if you set the location of the 
        container each of the elements held by the container will move relative to it; move one, move all 
    -->
    <div id="cw1MainContainer">


        <!-- this div block is only used to hold the HTML canvas element -->
        <div id="cw1CanvasContainer">
            <canvas id="cw1Canvas" onmousemove="fnTrackMouse(event);" onkeypress="fnBrushSize(event);"></canvas>
            <div id="box" style="position:absolute;" />
            <!-- 
                by specifing the onmouseover event the canvas will call the "fnTrackMouse" function EVERY time the 
                mouse moves 1 pixel over the canvas.
                by passing the JavaScript "event" we are effectively also passing details about the event, 
                e.g. where the mouse was, what buttons were pressed etc. 
            -->
        </div>
        </div>      

</body>

它抛出一个无效的左侧赋值错误。如何更改 div 元素的背景颜色？如果您想查看我的其余代码，请告诉我

如有任何帮助，我们将不胜感激。谢谢

最佳答案

尝试从此改变它

bx.style.background-color = #ffffff

到此

box.style.backgroundColor = "#333333";

所以不需要在单词backgroundColor中使用(-)..

希望对你有帮助

关于javascript - 改变 Canvas 内div的背景颜色Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55088042/

25 4 0
文章推荐： python - Python中根据子字符串删除重复项
文章推荐： javascript - 将数据转换为具有多级标题的 HTML 数据透视表
文章推荐： javascript - JavaScript 中的双括号有什么作用？
文章推荐： python - 如何从不同的群体中获得相似的分布？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com