Javascript 通过移出画布突出显示页面？_Javascript_Html_Css_Canvas

Javascript 通过移出画布突出显示页面？

javascript html css canvas

Javascript 通过移出画布突出显示页面？,javascript,html,css,canvas,Javascript,Html,Css,Canvas,我有一个奇怪的问题，真的不知道如何解释它很好。当您单击画布并将其移动到画布边界之外时，它会突然高亮显示整个页面并以蓝色高亮显示。有没有办法让高光变成另一种透明的颜色？或者是解决这个问题的代码，或者是css 在这里的页面测试，或了解我！和代码： <html> <head> <title>Paint</title> <script type="text/javascript" src="jspaint/jquery-1.9.1.js">

我有一个奇怪的问题，真的不知道如何解释它很好。当您单击画布并将其移动到画布边界之外时，它会突然高亮显示整个页面并以蓝色高亮显示。有没有办法让高光变成另一种透明的颜色？或者是解决这个问题的代码，或者是css

在这里的页面测试，或了解我！

和代码：

<html>
<head>
<title>Paint</title>

<script type="text/javascript" src="jspaint/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jspaint/jquery-ui-1.10.3.custom.js"></script>

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/dot-luv/jquery-ui.css" />
<script src="jspaint/Paint.js"></script>

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

<style type="text/css">
body {
    background:#303030;
}
#canvas, #canvasCursor {
    cursor: none;
    background: #fff;
    position: absolute;
    left: 50px;
    top: 30px;
    z-index: 1;
}
#canvasCursor {
    z-index: 20;
    background: none;
}

#tabs {

    background: #ffffff;
}
</style>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />


</head>

<body style = "background:#303030;">
<br><br><br>

<center><canvas id="canvasBg" width="1000px" height="600px" style=" position:absolute; left: 50; top: 30; z-index: 1; "></canvas></center>

 <canvas id="canvasCursor" width="1000px" height="600px"></canvas>
    <canvas id="canvas" width="1000px" height="600px"></canvas>


 <div id="tabs" style=" position:absolute; left: 1070; top: 30; z-index: 1; ">
  <ul>
    <li><a href="#tabs-1">Paint</a></li>
    <li><a href="#tabs-2">Shapes</a></li>
    <li><a href="#tabs-3">Save/Submit</a></li>
    <li><a href="#tabs-4">About</a></li>
  </ul>
  <div id="tabs-1">
    <p>Items relating to paint will be stored here</p>
  </div>
  <div id="tabs-2">
    <p>Items relating to shapes will be here</p>
  </div>
  <div id="tabs-3">
    <p>Save your image or submit it to the gallery!</p>
  </div>
  <div id="tabs-4">
    <p>Wayne Daly - 2013</p>
  </div>
</div>

</body>    



</html>


油漆
$（函数（）{
$（“#制表符”）.tabs（）；
});
身体{
背景:#303030；
}
#画布，#画布光标{
光标：无；
背景：#fff；
位置：绝对位置；
左：50px；
顶部：30px；
z指数：1；
}
#拉票光标{
z指数：20；
背景：无；
}
#标签{
背景：#ffffff；
}










与油漆有关的物品将存放在此处
与形状相关的项目将在此处显示
保存您的图像或将其提交到图库
韦恩·戴利-2013

您只需要一点点：）

编辑：您可以直接将代码添加到

正文

，然后重新启用

选项卡

：

body {
    background:#303030;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#tabs {
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    background: #ffffff;
}

也许，您可以在绘制时通过CSS设置

user select

，或者尝试中止

selectstart

事件（例如，请参阅）。