Article From:https://segmentfault.com/q/1010000012137352

Before carefully studying the article http://www.imooc.com/video/4319 on imooc, it can be realized by hand. The steps and ideas are:

document.getElementById('Canvas').style.display = "block"; //The original canvas style is only position and absolute is display, and display is none two attributes. At this time, display is changed to block, but no fillStyle. is added.Canvas = docuMent.getElementById ('Canvas');CXT = canvas.getContext ("2D");Canvas.width = window.innerWidth doCument.documentElement.clientWidth document.body.clientWidth;Canvas.height = window.innerHeightDocument.documentElement.clientHeight document.body.clientHeight, / / define canvas environment.Cxt.fillStyle='rGBA (0,0,0,0.7) ';Cxt.rect (0, 0, canvas.width, canvas.height); / / define the overall width and color of canvas.PathRect (CXT, 14)96,44156,35); the //pathRect function is based on the non zero surround principle, which is defined as the non colored area (DIV), that is, my bright color, and this is the first non colored area.PathRect (CXT, 270110,25)0250); / / / / / / defined second non colored areas.PathRect (CXT, 526110250250); / / define third non coloring areas.PathRect (CXT, 789110250250);/ / / / define fourth non colored areas.Cxt.fill (); / / start dyeing, other areas will be dyed gray, in addition to the definition of a few areas.

//pathRectThe function is defined according to the principle of non zero surround, which is not to be painted (DIV).Function pathRect (CXT, x, y, width, height) {Cxt.moveTo (x,Y);Cxt.lineTo (x, y + height);Cxt.lineTo (x + width, y + height);Cxt.lineTo (x + width, y);Cxt.lineTo (x, y);}If it's a fixed page, it's hard to write as a function. The trouble is in 2 aspects:1) some pages need to highlight one element, and some pages have more than one. This is not certain.2) on the left or right side of each highlight element, I need to add a bubble prompt box with a description of this highlight element.When you used to use canvas, you wrote a highlighThe tdiv function (see the end of the article) defines the parameter (divid, hint_info) with respect to the two parameter.Divid well understood, that is, to be highlighted in the element region, where the function will take his place. Trace the same position on the mask, then on the left side of the highlight element.On the right, at the mask level, append is a bubble prompt box (DIV). The innerHTML of the div is this hint_info, which is relatively easy to handle. This function executes once, highlighting a div. If a page has more than one div, it will hold.Many times.But now this, you have to tell the highlighting function at once that my current page needs to highlight how many div, the number is not good, the estimate needs to define a variable array, and the message box does not know how to handle it here.

Attached to the previous function,
function highlightdiv(div_id, hint_info) {

//Masking$('#overlay').Show ();/ / calculate the location of div based on div IDVar divobj = $+ div_id);Var Width = docUment.getElementById (div_id).ClientWidth;Var Height = divobj.height ();Var x = divobj.offset ();VarTop = x.top;Var Left = x.left;/ / a div of the same size on the mask layer, but because of insufficient brightness, it is rejected.Var descDiv = document.creatEElement ('div');Document.getElementById ("Overlay").AppendChild (descDiv);Var cssStr = "color: white; z-index:2; position:absolute; left: "+ Left +" PX; top: "+ Top +" PX; width: "+ Width +" PX; PX"+ Height +" PX;DescDiv.style.cssText = cssStr;/ / from the beginning of div, a bubble div (wide height is fixed, only top, left) is used.Hint informationVar hintinfoDiv = document.createElement ('div');Document.getElementById ("Overlay").AppendChild(hintinfoDiv);Var cssStr2 = "background-color: white; z-index:2; position:absolute; left:" + (Left +)Width + 15) + "PX; top:" + (Top + 0.5 * Height - 15) + "PX; width:275px; height:30px";HintinfoDiv.sTyle.cssText = cssStr2;HintinfoDiv.innerHTML = "hint_info";};

At any time, you can easily calculate the 4 values behind pathRect (CXT, 270110250250) by passing in div_id.

Answer 0:

No canvas.
The number is not fixed, the parameter is changed into an array.

arr = [
    info: ''
    info: ''// Do not write without prompting},...]
function highLight (arr) {
  arr.forEach(function (item) {
    id = item.divId
    info = item.info
    // And then do your original operation})}

Leave a Reply

Your email address will not be published. Required fields are marked *