Front-end learning---HTML5

Features: New version of HTML language, approximately equal to HTML + CSS + JS
Advantages: Cross-platform, fast iteration, cost reduction, many diversion entrances, high distribution efficiency
New features:
- canvas element for painting
- video and audio elements for media playback
- Better support for local offline storage
- New special content elements like article, footer, header, nav, section
- New form controls, such as calendar, date, time, email, url, search

1.2, Status Label

meter: Displays scalar/minor values for a known range <meter value="38" min="33" max="43">
- value: the current value
- min: the minimum boundary value of the value range, the default is 0
- max: the upper boundary value of the value range, the default is 1
- low: the upper limit of the low value interval
- high: defines the lower limit of the high value interval
- optimum: This attribute is used to indicate the optimum/best value
progress: Displays the progress of a task <progress value="11" max="22">
- max: how much work needs to be done in total
- value: The amount of work that has been completed. If there is none, the amount of completion is not determined

1.3, Semantic tags

Benefits: Replace meaningless div tags with more semantic and structured code tags, improving the quality and semantics of web pages
Classification:
- <hgroup></hgroup> : web page/title, multiple h1~6 are put into it,
- <header></header> : Multiple h!~6 are wrapped in hgroup, and other data is wrapped in header
- <nav></nav> : the navigation link area of the page
- <section></section> : a section or section in the document, a separate module
- <footer></footer> : the bottom part of the page footer or any section, such as: author, related document links, copyright information
- <article></article> : a self-contained content within a document, page or website, a stand-alone article
- <aside></aside> : Ancillary information for the main content in the article: related materials, labels, ranking explanations, etc. Outside the article, sidebars, classified navigation, and log links can be used

1.4, the form before Html5

Label

Attributes

Label

Attributes

from

action: server address (interface)

name: must exist, get the form

select

Drop-down box selected: selected

fieldset

Form grouping

optgroup

Group label: group name

legend

Designated group name

option

子项 multiple="multiple"

<from><fieldset>....<legend>爱好 .....

<select><optgroup>.....<option>....

input

name group id
checked default checked control

type：XXX

text: text box
password: password box
submit: submit button
reset: reset button
button: normal button
radio: radio button
checkbox: checkbox

textarea

button

text field attribute name

type:submit:submit button
type:reset:reset button
type:button:normal button

1.5, HTML5 forms

form format

form properties

form validation feedback

email: email address type
tel: phone type url format is wrong, there is a prompt
url: url format, there is a prompt if the format is wrong
search: delete the input content and clear the text
range: numeric selector properties: min, max
number: an input box that can only contain numbers
color: color picker
datetime: full date
datetime-local: full date without time zone
time: time, excluding time zone
date: date
week: week
month: month

placeholder :
Input box prompt information
apply to form
And the type is text, search, url, tel, email, password type input
autofocus : Specifies that the form gets the input focus <input type="aa" autofocus required/>
required : This item is required and cannot be empty
pattern : regular validation pattern="\d{1,5}"
formaction: define the submission address in submit
list and datalist: construct a selection list for the input box, the list value is the id of the datalist label

validity object, you can check whether the verification passed through the following valid, if all eight verifications pass, return true, and one verification fails and return false

node.addEventListener("invalid",fn1,false);

valueMissing : Returns true if the input value is empty

typeMismatch : returns true if the control value does not match the expected type

patternMismatch : Returns true if the input value does not satisfy the pattern

tooLong : returns true if maxLength is exceeded

rangeUnderflow : Validated range minimum returns true

rangeOverflow : Validated range maximum value returns true

stepMismatch : Verify that the current value of range conforms to the rules of min, max and step and returns true

customError does not meet custom validation returns true

setCustomValidity

Turn off verification

formnovalidate

List labels:
- datalist, which contains a set of option elements---represents the optional value of its form control, and its id must be consistent with the list in the input
- details: ui widget from which users can retrieve additional information, open attribute to control the display and hiding of additional information
- summary: used as a content summary (title) for a <details> element
Annotation tags: ruby/rt: Display text phonetic or character annotations.
Tag Tags: marK: emphasis
HTML5 new specification: sessionStorage localStorage WebSocket

Canvas is part of HTML5 and cannot be rendered dynamically, HTML emerged as an alternative to Flash

二，day two

2.1, canvas tag

Features: HTML5 new elements for drawing graphics, creating animations, with default height and width (150/300px)
Replacement: IE browsers before IE9 do not support canvas, and will display the content in the canvas tag. If it supports, it will cover other content in the tag.
Attribute: width height //Only affects the canvas , not the content, CSS will affect it, it is not recommended to use

2.2, rendering context

window.onload=function(){
     var canvas = document.querySelector("#test");  //多个返回唯一的第一个元素 
     if(canvas.getContext){
         var ctx = canvas.getContext("2d");  //获取画布的2d上下文
         ctx.save(); //栈，压入默认色，黑色，一次save压入一次，没有save多个s..S..则下盖上
        //样式+颜色
         ctx.beginPath();
       //路径绘制
         ctx.restore(); //从save压入颜色，依次放出，一次放一，覆盖原色
     }//上述三个依次循环
 }
<canvas id="test" width="300" height="300">
	<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>  //不显示
</canvas>

2.3, draw a rectangle

ctx.fillRect(x, y, width, height): draw a filled rectangle (fill color black) no unit
ctx.strokeRect(x, y, width, height): draws the border of a rectangle (solid black) without units
ctx.clearRect(x, y, width, height): Clear the specified rectangular area (completely transparent) without units

2.4, styles and colors

ctx.fillStyle: the fill color of the graphic (written before drawing the rectangle)
ctx.strokeStyle: The color of the graphic outline, the default is black
ctx.lineWidth: The thickness of the drawn line, must be a positive number, the default is 1.0, no unit
ctx.lineCap: "butt/round/square" square/circle/rectangular display form at both ends of the line
ctx.lineJoin: "round/bevel/miter" circle/oblique/right angle style of the joint between lines, default miter

2.5, draw the path:

ctx.beginPath(): Create a new path, if not, the next path will be filled with red color, and the previous one will still be filled with red
ctx.moveTo(x, y): Set the starting point, usually used after canvas initialization or beginPath() call
ctx.lineTo(x, y): draw a line from the current position to the specified x and y positions
ctx.closePath(): Close the path, ( set the style + color first, set the starting point + turn, fill + border, and finally close )
ctx.stroke(): Draw the outline of the graphic through lines, closePath() will not be called automatically, and closed manually
ctx.fill(): Fill the content area of the path, generate a solid graphic, automatically call closePath(), and automatically close

---beginPath---> Secondary three times

2.6, drawing graphics

ctx.rect(x, y, width, height): rectangle, automatically reset default coordinates
ctx.arcTo(x1, y1, x2, y2, radius): arc, starting from (x1 y1), direction (x2 y2), not necessarily arriving
ctx.arc(x, y, radius, startAngle, endAngle, true/false): draw a circle, radius--(Math.PI/180)*degrees, true--clockwise
The above features: fill()/stroke() is required, use strokeStyle/.. to adjust the color, the default is black
ctx.quadraticCurveTo(cp1x, cp1y, x, y): quadratic Bezier, control point + end point, starting point is the point specified by moveTo
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): cubic Bezier, control point 1 + control point 2 + end point, the starting point is the point specified by moveTo

2.7, graphics transformation

ctx.translate(x, y): move the origin of the canvas, which is cumulative
ctx.rotate(angle): 1 degree=Math.PI/180, clockwise, the center point is the origin of canvas, which is cumulative
ctx.scale(x, y): zoom, positive value, greater than 1.0 means zoom in, .5, increase or decrease the number of pixels, zoom pixel size, it is cumulative

----" --The following gradient code picture ---"
2.8, picture

ctx.drawImage(image, x, y, width, height): incoming image, image/canvas object, starting coordinates, scaled size
ctx.createPattern(image, "repetition" ): set background, image source, "repeat/no-repeat/repeat-x/repeat-y"
x=ctx.createLinearGradient(x1, y1, x2, y2): gradient, start point, end point
x.addColorStop(position, color) : 0.0 ~1.0 The relative position of the color in the gradient
x.createRadialGradient(x1, y1, r1, x2, y2, r2): origin+radius->circle origin+radius->circle

var canvas = document.querySelector("#test");
   if(canvas.getContext){
      var ctx = canvas.getContext("2d");
      var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
      gradient.addColorStop(0,"red");
      gradient.addColorStop(0.5,"yellow");
      gradient.addColorStop(0.7,"pink");
      gradient.addColorStop(1,"green");
      ctx.fillStyle=gradient;
      ctx.fillRect(0,0,300,300);
    }
}

2.9, Text

render text

ctx.fillText(“ text ”, x, y) : fill the specified text, text content, location
ctx.strokeText(" text ", x, y): draw the text border

bottom middle top

text style

ctx.font = " 10px sans-serif ": set the text style, here is the default value, the font size is indispensable
ctx.textAlign = "value": optional values left, right center Based on the x value set by fillText, the text is symmetrical with x, on its left/right
textBaseline = "value": top/middle/bottom text baseline at the top/middle/bottom of the text block
The measureText("obj") method returns a TextMetrics object containing information about the dimensions of the text (such as the width of the text)

Center text horizontally and vertically in canvas

shadow

shadowOffsetX/Y = float: The default is 0, which sets the extension distance of the shadow on the X and Y axes
shadowBlur = float: Set the blur degree of the shadow, the default is 0, the value is not linked to the number of pixels, nor is it affected by the transformation matrix,
shadowColor = color : Set the shadow color, the default is transparent black

三，day three

3.1, pixel manipulation

ctx.getImageData(sx, sy, sw, sh): Get ImageData object, coordinates, width and height
ctx.putImageData(ImageData, dx, dy): write pixel data
ctx.createImageData(width, height): Create an ImageData object, the width/height of the new object, the default transparent color
ctx.globalAlpha = value: global transparency setting, 0.0~1.0 default 1.0

ImageData object:

Attribute -width/height: the number of horizontal/vertical pixels in pixels
Attribute-data array: store the rgba message of each pixel, (R/G/B)/A: 0~255 (black to white/transparent to opaque), rgba(1,1,1,2)

3.2, Override Synthesis

ctx.globalCompositeOperation="source-over"; new -- source old -- target
- source-over: By default, the source is above, and the new image level is higher
- source-in: leave only the overlapping part of the source and the target (the part of the source)
- source-out : leave only the part where the source exceeds the target
- source-atop: cut off the part of the source overflow
- destination-over: the destination is above, the old image level is higher
- destination-in: leave only the overlapping part of the source and the destination (the part of the destination)
- destination-out: leave only the part where the destination exceeds the source
- destination-atop: Cut off the overflowing part of the destination
canvas.toDataURL: export canvas as image, F12, Console, copy address, find

window.onload=function(){
	var canvas = document.querySelector("#test");
	if(canvas.getContext){
		var ctx = canvas.getContext("2d");
		ctx.fillStyle="pink";
		ctx.fillRect(50,50,100,100);
		ctx.globalCompositeOperation="source-out";
		ctx.fillStyle="green";
		ctx.fillRect(100,100,100,100);
	}
}

3.3, event operation

ctx.isPointInPath(x, y): Determine whether the detection point is included in the current path, x/y coordinates

window.onload=function(){
	var canvas = document.querySelector("#test");
	if(canvas.getContext){
		var ctx = canvas.getContext("2d");
		ctx.beginPath();
		ctx.arc(100,100,50,0,360*Math.PI/180);
		ctx.fill();
		ctx.beginPath();
		ctx.arc(200,200,50,0,360*Math.PI/180);
		ctx.fill();
		canvas.onclick=function(ev){
			ev = ev||event;
			var x = ev.clientX - canvas.offsetLeft;
			var y = ev.clientY - canvas.offsetTop;
			if(ctx.isPointInPath(x,y)){
				alert(123);
}}}}

Remarks: drag and drop, i.e. 08 signature not seen 13 15 16 19 22 23 24 25 27 28

window.onload=function(){
     var canvas = document.querySelector("#test");  //多个返回唯一的第一个元素 
     if(canvas.getContext){
         var ctx = canvas.getContext("2d");
         ctx.fillRect(0,0,100,100);    //填充的矩形
         ctx.strokeRect(100.5,100.5,100,100)  //带边框的矩形  
         var test = document.createElement("div");
         test.id="test";
         document.body.appendChild(test);
         test.style.background="pink";
     }
 }