[英]Change background colour of div inside canvas Javascript
我已經在創建繪畫軟件的地方找到了這個程序。 當我在移動鼠標的同時按ctrl鍵時,它將打開橡皮擦。 我有一個div元素,該元素是一個跟蹤鼠標的框,以便用戶知道鼠標在畫布中的位置。
我遇到的問題是,當進入橡皮擦模式時,無法將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一詞中使用(-)。
希望對您有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.