From 7e1e472850828ad5447cf39cb9a516980b4d3a23 Mon Sep 17 00:00:00 2001 From: allo Date: Tue, 16 Aug 2022 08:32:11 +0800 Subject: [PATCH] convert to markdown for web/api --- .../web/api/analysernode/fftsize/index.md | 45 +- files/zh-cn/web/api/analysernode/index.md | 153 +- .../smoothingtimeconstant/index.md | 49 +- .../web/api/angle_instanced_arrays/index.md | 77 +- files/zh-cn/web/api/animation/cancel/index.md | 47 +- .../web/api/animation/cancel_event/index.md | 45 +- .../web/api/animation/playstate/index.md | 64 +- files/zh-cn/web/api/attr/localname/index.md | 66 +- .../zh-cn/web/api/attr/namespaceuri/index.md | 60 +- files/zh-cn/web/api/attr/prefix/index.md | 48 +- .../web/api/audiobuffersourcenode/index.md | 127 +- .../api/audiobuffersourcenode/start/index.md | 79 +- .../zh-cn/web/api/audiocontext/close/index.md | 40 +- .../createmediaelementsource/index.md | 56 +- .../web/api/audiodestinationnode/index.md | 90 +- files/zh-cn/web/api/audiolistener/index.md | 117 +- files/zh-cn/web/api/audionode/index.md | 498 +- .../web/api/audioscheduledsourcenode/index.md | 56 +- .../audioscheduledsourcenode/stop/index.md | 77 +- .../web/api/audioworkletprocessor/index.md | 105 +- .../web/api/authenticatorresponse/index.md | 64 +- .../baseaudiocontext/createanalyser/index.md | 44 +- .../createperiodicwave/index.md | 79 +- .../createwaveshaper/index.md | 44 +- .../baseaudiocontext/decodeaudiodata/index.md | 84 +- files/zh-cn/web/api/baseaudiocontext/index.md | 190 +- .../beforeinstallpromptevent/prompt/index.md | 36 +- .../zh-cn/web/api/beforeunloadevent/index.md | 77 +- files/zh-cn/web/api/biquadfilternode/index.md | 188 +- files/zh-cn/web/api/blob/index.md | 151 +- files/zh-cn/web/api/blob/slice/index.md | 44 +- files/zh-cn/web/api/blobbuilder/index.md | 156 +- .../messageerror_event/index.md | 85 +- files/zh-cn/web/api/cache/addall/index.md | 79 +- files/zh-cn/web/api/cache/index.md | 96 +- files/zh-cn/web/api/cache/keys/index.md | 68 +- files/zh-cn/web/api/cache/match/index.md | 74 +- files/zh-cn/web/api/cache/matchall/index.md | 72 +- files/zh-cn/web/api/cache/put/index.md | 87 +- files/zh-cn/web/api/cachestorage/index.md | 74 +- .../zh-cn/web/api/cachestorage/match/index.md | 80 +- .../zh-cn/web/api/cachestorage/open/index.md | 65 +- files/zh-cn/web/api/canvas_api/index.md | 177 +- .../manipulating_video_using_canvas/index.md | 134 +- .../tutorial/advanced_animations/index.md | 179 +- .../canvas_api/tutorial/basic_usage/index.md | 148 +- .../web/api/canvas_api/tutorial/index.md | 58 +- .../canvas_api/tutorial/using_images/index.md | 338 +- .../api/canvasgradient/addcolorstop/index.md | 86 +- .../api/canvaspattern/settransform/index.md | 85 +- .../api/canvasrenderingcontext2d/arc/index.md | 128 +- .../canvasrenderingcontext2d/arcto/index.md | 97 +- .../beginpath/index.md | 73 +- .../beziercurveto/index.md | 104 +- .../clearrect/index.md | 92 +- .../canvasrenderingcontext2d/clip/index.md | 101 +- .../closepath/index.md | 73 +- .../createlineargradient/index.md | 123 +- .../createpattern/index.md | 128 +- .../createradialgradient/index.md | 121 +- .../direction/index.md | 84 +- .../drawfocusifneeded/index.md | 105 +- .../drawimage/index.md | 275 +- .../drawwindow/index.md | 171 +- .../canvasrenderingcontext2d/ellipse/index.md | 112 +- .../canvasrenderingcontext2d/fill/index.md | 99 +- .../fillrect/index.md | 116 +- .../fillstyle/index.md | 150 +- .../filltext/index.md | 98 +- .../canvasrenderingcontext2d/font/index.md | 105 +- .../getlinedash/index.md | 81 +- .../gettransform/index.md | 76 +- .../globalalpha/index.md | 102 +- .../globalcompositeoperation/index.md | 92 +- .../imagesmoothingenabled/index.md | 92 +- .../imagesmoothingquality/index.md | 83 +- .../ispointinpath/index.md | 117 +- .../ispointinstroke/index.md | 97 +- .../canvasrenderingcontext2d/linecap/index.md | 117 +- .../linedashoffset/index.md | 107 +- .../linejoin/index.md | 119 +- .../canvasrenderingcontext2d/lineto/index.md | 87 +- .../linewidth/index.md | 80 +- .../miterlimit/index.md | 76 +- .../canvasrenderingcontext2d/moveto/index.md | 87 +- .../putimagedata/index.md | 129 +- .../quadraticcurveto/index.md | 151 +- .../canvasrenderingcontext2d/rect/index.md | 99 +- .../resettransform/index.md | 79 +- .../canvasrenderingcontext2d/restore/index.md | 74 +- .../canvasrenderingcontext2d/rotate/index.md | 83 +- .../canvasrenderingcontext2d/save/index.md | 86 +- .../scrollpathintoview/index.md | 87 +- .../setlinedash/index.md | 119 +- .../settransform/index.md | 111 +- .../shadowblur/index.md | 77 +- .../shadowcolor/index.md | 77 +- .../shadowoffsetx/index.md | 83 +- .../shadowoffsety/index.md | 83 +- .../canvasrenderingcontext2d/stroke/index.md | 81 +- .../strokestyle/index.md | 142 +- .../stroketext/index.md | 98 +- .../textalign/index.md | 107 +- .../textbaseline/index.md | 99 +- .../transform/index.md | 105 +- .../translate/index.md | 87 +- .../using_channel_messaging/index.md | 103 +- .../zh-cn/web/api/channelmergernode/index.md | 90 +- files/zh-cn/web/api/characterdata/index.md | 82 +- files/zh-cn/web/api/clipboard/write/index.md | 53 +- .../api/clipboardevent/clipboarddata/index.md | 34 +- .../clipboardevent/clipboardevent/index.md | 51 +- files/zh-cn/web/api/clipboarditem/index.md | 86 +- files/zh-cn/web/api/closeevent/index.md | 209 +- files/zh-cn/web/api/comment/comment/index.md | 37 +- files/zh-cn/web/api/console/dir/index.md | 37 +- files/zh-cn/web/api/console/error/index.md | 55 +- files/zh-cn/web/api/console/index.md | 385 +- .../zh-cn/web/api/console/profileend/index.md | 47 +- files/zh-cn/web/api/console/timeend/index.md | 39 +- files/zh-cn/web/api/convolvernode/index.md | 109 +- .../api/credential_management_api/index.md | 48 +- .../index.md | 145 +- files/zh-cn/web/api/cssrule/index.md | 218 +- files/zh-cn/web/api/cssvalue/index.md | 85 +- .../api/customelementregistry/define/index.md | 89 +- files/zh-cn/web/api/customevent/index.md | 143 +- .../api/customevent/initcustomevent/index.md | 53 +- .../webkitgetasentry/index.md | 128 +- .../devicemotionevent/acceleration/index.md | 55 +- .../devicemotionevent/index.md | 41 +- .../zh-cn/web/api/devicemotionevent/index.md | 64 +- .../devicemotionevent/rotationrate/index.md | 55 +- files/zh-cn/web/api/document/all/index.md | 26 +- .../web/api/document/characterset/index.md | 25 +- files/zh-cn/web/api/document/cookie/index.md | 261 +- .../web/api/document/createelement/index.md | 130 +- .../web/api/document/createevent/index.md | 370 +- .../api/document/createnodeiterator/index.md | 150 +- .../api/document/createtreewalker/index.md | 170 +- .../document/domcontentloaded_event/index.md | 143 +- .../web/api/document/drag_event/index.md | 258 +- .../web/api/document/dragend_event/index.md | 215 +- .../web/api/document/dragenter_event/index.md | 211 +- .../web/api/document/dragleave_event/index.md | 213 +- .../web/api/document/dragover_event/index.md | 215 +- .../web/api/document/dragstart_event/index.md | 255 +- .../web/api/document/drop_event/index.md | 234 +- .../api/document/elementfrompoint/index.md | 73 +- .../zh-cn/web/api/document/evaluate/index.md | 179 +- .../web/api/document/execcommand/index.md | 301 +- .../web/api/document/exitfullscreen/index.md | 45 +- .../web/api/document/fullscreen/index.md | 42 +- .../api/document/getelementsbyname/index.md | 72 +- .../document/getelementsbytagname/index.md | 103 +- .../document/getelementsbytagnamens/index.md | 123 +- .../zh-cn/web/api/document/hasfocus/index.md | 60 +- files/zh-cn/web/api/document/hidden/index.md | 28 +- .../web/api/document/importnode/index.md | 74 +- files/zh-cn/web/api/document/index.md | 1118 ++-- .../api/document/laststylesheetset/index.md | 38 +- .../document/mozsyntheticdocument/index.md | 32 +- files/zh-cn/web/api/document/plugins/index.md | 31 +- .../document/pointerlockchange_event/index.md | 74 +- .../web/api/document/queryselector/index.md | 99 +- .../api/document/queryselectorall/index.md | 160 +- .../document/readystatechange_event/index.md | 115 +- .../web/api/document/registerelement/index.md | 62 +- .../web/api/document/scroll_event/index.md | 75 +- .../document/selectedstylesheetset/index.md | 47 +- .../document/selectionchange_event/index.md | 62 +- .../api/document/selectstart_event/index.md | 62 +- files/zh-cn/web/api/document/title/index.md | 83 +- .../api/document/touchcancel_event/index.md | 70 +- .../api/document/touchstart_event/index.md | 64 +- .../document/visibilitychange_event/index.md | 130 +- files/zh-cn/web/api/document/write/index.md | 90 +- files/zh-cn/web/api/document/writeln/index.md | 50 +- .../web/api/document_object_model/index.md | 754 +-- .../index.md | 56 +- .../index.md | 374 +- .../using_the_w3c_dom_level_1_core/index.md | 86 +- .../document_object_model/whitespace/index.md | 75 +- .../queryselectorall/index.md | 47 +- files/zh-cn/web/api/domerror/index.md | 174 +- .../api/domexception/domexception/index.md | 43 +- files/zh-cn/web/api/dompoint/index.md | 78 +- files/zh-cn/web/api/domrect/index.md | 87 +- .../web/api/domtokenlist/replace/index.md | 62 +- .../web/api/dynamicscompressornode/index.md | 112 +- .../element/afterscriptexecute_event/index.md | 64 +- .../element/animationcancel_event/index.md | 123 +- .../element/animationiteration_event/index.md | 107 +- .../web/api/element/attachshadow/index.md | 186 +- .../zh-cn/web/api/element/attributes/index.md | 93 +- .../web/api/element/auxclick_event/index.md | 45 +- .../beforescriptexecute_event/index.md | 64 +- .../api/element/childelementcount/index.md | 102 +- .../zh-cn/web/api/element/classlist/index.md | 124 +- .../zh-cn/web/api/element/classname/index.md | 42 +- .../zh-cn/web/api/element/clientleft/index.md | 47 +- .../zh-cn/web/api/element/clienttop/index.md | 40 +- .../web/api/element/clientwidth/index.md | 45 +- .../api/element/compositionend_event/index.md | 113 +- .../element/compositionstart_event/index.md | 126 +- .../element/compositionupdate_event/index.md | 115 +- .../api/element/contextmenu_event/index.md | 97 +- .../zh-cn/web/api/element/copy_event/index.md | 135 +- .../web/api/element/createshadowroot/index.md | 29 +- .../zh-cn/web/api/element/cut_event/index.md | 101 +- .../api/element/domactivate_event/index.md | 99 +- .../api/element/dommousescroll_event/index.md | 64 +- .../web/api/element/error_event/index.md | 104 +- .../web/api/element/focus_event/index.md | 101 +- .../web/api/element/getclientrects/index.md | 260 +- .../zh-cn/web/api/element/innerhtml/index.md | 207 +- .../element/insertadjacentelement/index.md | 130 +- .../api/element/insertadjacenthtml/index.md | 103 +- .../api/element/insertadjacenttext/index.md | 121 +- .../web/api/element/keydown_event/index.md | 102 +- .../web/api/element/keyup_event/index.md | 98 +- .../zh-cn/web/api/element/localname/index.md | 95 +- files/zh-cn/web/api/element/matches/index.md | 94 +- .../web/api/element/mousedown_event/index.md | 201 +- .../web/api/element/mouseenter_event/index.md | 280 +- .../web/api/element/mousemove_event/index.md | 133 +- .../web/api/element/mouseout_event/index.md | 111 +- .../web/api/element/mouseup_event/index.md | 84 +- .../web/api/element/mousewheel_event/index.md | 98 +- .../web/api/element/namespaceuri/index.md | 50 +- .../element/openorclosedshadowroot/index.md | 33 +- .../web/api/element/paste_event/index.md | 71 +- files/zh-cn/web/api/element/prefix/index.md | 44 +- .../web/api/element/queryselectorall/index.md | 98 +- .../web/api/element/removeattribute/index.md | 52 +- .../api/element/requestfullscreen/index.md | 80 +- .../zh-cn/web/api/element/scrollleft/index.md | 88 +- .../zh-cn/web/api/element/scrolltop/index.md | 70 +- .../web/api/element/scrollwidth/index.md | 85 +- .../api/element/setpointercapture/index.md | 75 +- files/zh-cn/web/api/element/slot/index.md | 48 +- .../api/element/touchcancel_event/index.md | 60 +- .../web/api/element/touchstart_event/index.md | 62 +- .../element/transitioncancel_event/index.md | 108 +- .../web/api/element/wheel_event/index.md | 260 +- files/zh-cn/web/api/event/composed/index.md | 76 +- .../web/api/event/defaultprevented/index.md | 30 +- files/zh-cn/web/api/event/initevent/index.md | 57 +- .../zh-cn/web/api/event/returnvalue/index.md | 37 +- files/zh-cn/web/api/event/srcelement/index.md | 22 +- .../event/stopimmediatepropagation/index.md | 66 +- files/zh-cn/web/api/event/target/index.md | 48 +- files/zh-cn/web/api/event/timestamp/index.md | 52 +- .../zh-cn/web/api/eventsource/close/index.md | 45 +- .../web/api/eventsource/error_event/index.md | 35 +- files/zh-cn/web/api/eventsource/index.md | 126 +- .../web/api/eventsource/open_event/index.md | 32 +- .../api/eventtarget/dispatchevent/index.md | 45 +- .../web/api/eventtarget/eventtarget/index.md | 38 +- files/zh-cn/web/api/ext_float_blend/index.md | 51 +- files/zh-cn/web/api/extendableevent/index.md | 80 +- .../api/extendableevent/waituntil/index.md | 56 +- .../web/api/fetch_api/basic_concepts/index.md | 94 +- files/zh-cn/web/api/fetch_api/index.md | 76 +- .../zh-cn/web/api/file/getasdataurl/index.md | 49 +- .../firefox_support/index.md | 144 +- .../index.md | 446 +- files/zh-cn/web/api/fileerror/index.md | 82 +- .../web/api/filereader/abort_event/index.md | 107 +- files/zh-cn/web/api/filereader/index.md | 169 +- .../web/api/filereader/load_event/index.md | 107 +- .../web/api/filereader/readasdataurl/index.md | 75 +- files/zh-cn/web/api/filereadersync/index.md | 291 +- files/zh-cn/web/api/filesystem/index.md | 53 +- .../web/api/filesystemdirectoryentry/index.md | 72 +- .../api/filesystemdirectoryreader/index.md | 38 +- files/zh-cn/web/api/filesystementry/index.md | 118 +- .../web/api/filesystemfileentry/index.md | 56 +- files/zh-cn/web/api/filesystemsync/index.md | 74 +- files/zh-cn/web/api/formdata/append/index.md | 86 +- files/zh-cn/web/api/formdata/delete/index.md | 60 +- .../zh-cn/web/api/formdata/formdata/index.md | 103 +- files/zh-cn/web/api/formdata/get/index.md | 64 +- files/zh-cn/web/api/formdata/getall/index.md | 64 +- files/zh-cn/web/api/formdata/has/index.md | 58 +- files/zh-cn/web/api/formdata/index.md | 80 +- files/zh-cn/web/api/formdata/set/index.md | 74 +- .../formdata/using_formdata_objects/index.md | 119 +- files/zh-cn/web/api/gainnode/gain/index.md | 35 +- files/zh-cn/web/api/gamepadbutton/index.md | 50 +- files/zh-cn/web/api/geolocation/index.md | 42 +- files/zh-cn/web/api/geolocation_api/index.md | 154 +- .../web/api/geolocationpositionerror/index.md | 71 +- .../web/api/globaleventhandlers/index.md | 326 +- files/zh-cn/web/api/headers/append/index.md | 72 +- files/zh-cn/web/api/headers/get/index.md | 68 +- files/zh-cn/web/api/headers/index.md | 101 +- files/zh-cn/web/api/history/index.md | 101 +- .../web/api/history_api/example/index.md | 240 +- files/zh-cn/web/api/history_api/index.md | 198 +- files/zh-cn/web/api/html_dom_api/index.md | 671 +- .../microtask_guide/in_depth/index.md | 183 +- .../drag_operations/index.md | 325 +- .../file_drag_and_drop/index.md | 79 +- .../api/htmlanchorelement/download/index.md | 25 +- files/zh-cn/web/api/htmlaudioelement/index.md | 96 +- .../api/htmlcanvaselement/getcontext/index.md | 210 +- .../zh-cn/web/api/htmlcanvaselement/index.md | 112 +- .../webglcontextlost_event/index.md | 78 +- .../htmldetailselement/toggle_event/index.md | 118 +- .../htmldialogelement/close_event/index.md | 38 +- files/zh-cn/web/api/htmldocument/index.md | 14 +- .../htmlelement/beforeinput_event/index.md | 102 +- .../web/api/htmlelement/change_event/index.md | 130 +- .../zh-cn/web/api/htmlelement/hidden/index.md | 120 +- files/zh-cn/web/api/htmlelement/index.md | 296 +- .../web/api/htmlelement/offsetheight/index.md | 53 +- .../web/api/htmlelement/outertext/index.md | 28 +- files/zh-cn/web/api/htmlformelement/index.md | 233 +- .../web/api/htmlhtmlelement/version/index.md | 8 +- .../web/api/htmlimageelement/image/index.md | 47 +- .../htmlinputelement/invalid_event/index.md | 92 +- .../htmlinputelement/select_event/index.md | 141 +- .../htmlinputelement/webkitdirectory/index.md | 167 +- files/zh-cn/web/api/htmllinkelement/index.md | 125 +- .../api/htmlmediaelement/buffered/index.md | 40 +- .../api/htmlmediaelement/canplaytype/index.md | 56 +- .../api/htmlmediaelement/currenttime/index.md | 45 +- .../durationchange_event/index.md | 165 +- .../api/htmlmediaelement/error_event/index.md | 72 +- .../htmlmediaelement/loadstart_event/index.md | 111 +- .../web/api/htmlmediaelement/loop/index.md | 42 +- .../api/htmlmediaelement/pause_event/index.md | 169 +- .../web/api/htmlmediaelement/play/index.md | 90 +- .../api/htmlmediaelement/play_event/index.md | 163 +- .../timeupdate_event/index.md | 167 +- .../web/api/htmloptionelement/option/index.md | 32 +- .../htmlselectelement/selectedindex/index.md | 58 +- .../web/api/htmltextareaelement/index.md | 379 +- files/zh-cn/web/api/idbcursor/index.md | 103 +- files/zh-cn/web/api/idbcursor/key/index.md | 54 +- files/zh-cn/web/api/idbfactory/open/index.md | 147 +- files/zh-cn/web/api/idbkeyrange/index.md | 222 +- .../web/api/idbkeyrange/lowerbound/index.md | 104 +- .../api/idbobjectstore/autoincrement/index.md | 89 +- .../zh-cn/web/api/idbobjectstore/get/index.md | 110 +- .../api/idbobjectstore/indexnames/index.md | 64 +- .../idbtransaction/complete_event/index.md | 90 +- .../zh-cn/web/api/idbtransaction/db/index.md | 64 +- files/zh-cn/web/api/idbtransaction/index.md | 256 +- files/zh-cn/web/api/idledeadline/index.md | 45 +- files/zh-cn/web/api/imagedata/data/index.md | 30 +- .../index.md | 132 +- files/zh-cn/web/api/indexeddb_api/index.md | 229 +- .../indexeddb_api/using_indexeddb/index.md | 867 ++- files/zh-cn/web/api/inputevent/data/index.md | 48 +- files/zh-cn/web/api/installevent/index.md | 58 +- .../timing_element_visibility/index.md | 399 +- .../intersectionobserver/thresholds/index.md | 33 +- .../web/api/keyboardevent/altkey/index.md | 53 +- .../web/api/keyboardevent/charcode/index.md | 68 +- .../web/api/keyboardevent/ctrlkey/index.md | 52 +- files/zh-cn/web/api/keyboardevent/index.md | 508 +- .../api/keyboardevent/initkeyevent/index.md | 125 +- .../zh-cn/web/api/keyboardevent/key/index.md | 191 +- .../web/api/keyboardevent/keycode/index.md | 5687 ++++++++--------- .../web/api/keyboardevent/metakey/index.md | 40 +- .../web/api/keyboardevent/shiftkey/index.md | 54 +- .../keyframeeffect/keyframeeffect/index.md | 107 +- .../media_capture_and_streams_api/index.md | 72 +- .../taking_still_photos/index.md | 228 +- .../getsupportedconstraints/index.md | 62 +- .../api/mediaelementaudiosourcenode/index.md | 68 +- files/zh-cn/web/api/medialist/index.md | 54 +- files/zh-cn/web/api/mediaquerylist/index.md | 120 +- .../dataavailable_event/index.md | 56 +- .../api/mediarecorder/mediarecorder/index.md | 75 +- .../api/mediastream_recording_api/index.md | 118 +- .../api/mediastreamaudiosourcenode/index.md | 70 +- .../mediastreamaudiosourcenode/index.md | 41 +- .../mediastreamtrack/getconstraints/index.md | 42 +- files/zh-cn/web/api/messageevent/index.md | 2 +- .../api/messageevent/messageevent/index.md | 56 +- .../zh-cn/web/api/mouseevent/altkey/index.md | 49 +- .../zh-cn/web/api/mouseevent/button/index.md | 76 +- .../zh-cn/web/api/mouseevent/buttons/index.md | 47 +- files/zh-cn/web/api/mouseevent/index.md | 228 +- .../zh-cn/web/api/mouseevent/metakey/index.md | 36 +- .../web/api/mouseevent/relatedtarget/index.md | 157 +- files/zh-cn/web/api/mousescrollevent/index.md | 150 +- .../api/mutationobserver/disconnect/index.md | 48 +- .../api/mutationobserver/takerecords/index.md | 45 +- files/zh-cn/web/api/namednodemap/index.md | 64 +- .../web/api/navigation_timing_api/index.md | 179 +- .../using_navigation_timing/index.md | 104 +- .../web/api/navigator/geolocation/index.md | 27 +- .../web/api/navigator/getusermedia/index.md | 117 +- files/zh-cn/web/api/navigator/oscpu/index.md | 89 +- .../web-based_protocol_handlers/index.md | 174 +- files/zh-cn/web/api/node/appendchild/index.md | 74 +- files/zh-cn/web/api/node/clonenode/index.md | 60 +- .../api/node/comparedocumentposition/index.md | 127 +- files/zh-cn/web/api/node/index.md | 435 +- files/zh-cn/web/api/node/issamenode/index.md | 37 +- files/zh-cn/web/api/node/nodename/index.md | 141 +- files/zh-cn/web/api/node/textcontent/index.md | 117 +- files/zh-cn/web/api/nodeiterator/index.md | 185 +- .../zh-cn/web/api/notification/data/index.md | 51 +- files/zh-cn/web/api/notification/dir/index.md | 48 +- files/zh-cn/web/api/notification/index.md | 177 +- .../notification/requestpermission/index.md | 50 +- .../notification/requireinteraction/index.md | 32 +- .../zh-cn/web/api/notificationevent/index.md | 63 +- .../zh-cn/web/api/notifications_api/index.md | 73 +- .../using_the_notifications_api/index.md | 214 +- .../api/notifyaudioavailableevent/index.md | 20 +- .../web/api/oes_vertex_array_object/index.md | 85 +- .../complete_event/index.md | 82 +- .../web/api/offlineaudiocontext/index.md | 76 +- .../offlineaudiocontext/index.md | 49 +- files/zh-cn/web/api/oscillatornode/index.md | 112 +- .../web/api/page_visibility_api/index.md | 144 +- files/zh-cn/web/api/path2d/addpath/index.md | 74 +- files/zh-cn/web/api/path2d/index.md | 78 +- files/zh-cn/web/api/path2d/path2d/index.md | 120 +- .../web/api/payment_request_api/index.md | 153 +- files/zh-cn/web/api/performance/index.md | 98 +- files/zh-cn/web/api/performance/now/index.md | 76 +- .../zh-cn/web/api/performance/timing/index.md | 26 +- .../using_the_permissions_api/index.md | 94 +- files/zh-cn/web/api/plugin/index.md | 70 +- files/zh-cn/web/api/pointer_events/index.md | 498 +- files/zh-cn/web/api/pointer_lock_api/index.md | 120 +- files/zh-cn/web/api/pointerevent/index.md | 202 +- files/zh-cn/web/api/push_api/index.md | 100 +- files/zh-cn/web/api/pushmanager/index.md | 74 +- .../web/api/pushmanager/subscribe/index.md | 53 +- files/zh-cn/web/api/range/collapse/index.md | 42 +- files/zh-cn/web/api/range/endoffset/index.md | 33 +- files/zh-cn/web/api/range/range/index.md | 48 +- files/zh-cn/web/api/range/selectnode/index.md | 41 +- .../web/api/range/selectnodecontents/index.md | 73 +- .../zh-cn/web/api/range/startoffset/index.md | 36 +- files/zh-cn/web/api/request/index.md | 210 +- .../web/api/resource_timing_api/index.md | 74 +- .../using_the_resource_timing_api/index.md | 92 +- files/zh-cn/web/api/response/error/index.md | 48 +- .../zh-cn/web/api/response/formdata/index.md | 42 +- .../zh-cn/web/api/response/redirect/index.md | 76 +- .../web/api/response/redirected/index.md | 61 +- files/zh-cn/web/api/response/type/index.md | 54 +- files/zh-cn/web/api/rtcdatachannel/index.md | 153 +- .../api/rtcpeerconnection/addtrack/index.md | 191 +- .../createdatachannel/index.md | 142 +- .../currentlocaldescription/index.md | 51 +- .../rtcpeerconnection/peeridentity/index.md | 41 +- .../setconfiguration/index.md | 82 +- .../api/rtctrackevent/rtctrackevent/index.md | 38 +- .../web/api/screen/lockorientation/index.md | 104 +- .../web/api/scriptprocessornode/index.md | 100 +- .../api/selection/deletefromdocument/index.md | 35 +- files/zh-cn/web/api/selection/index.md | 315 +- files/zh-cn/web/api/selection/modify/index.md | 58 +- .../api/selection/selectallchildren/index.md | 45 +- .../api/selection/setbaseandextent/index.md | 115 +- files/zh-cn/web/api/sensor_apis/index.md | 210 +- .../using_server-sent_events/index.md | 152 +- .../zh-cn/web/api/service_worker_api/index.md | 207 +- .../using_service_workers/index.md | 435 +- .../serviceworkerregistration/active/index.md | 39 +- .../api/serviceworkerregistration/index.md | 106 +- .../pushmanager/index.md | 33 +- .../unregister/index.md | 56 +- .../serviceworkerregistration/update/index.md | 54 +- files/zh-cn/web/api/sharedworker/index.md | 86 +- .../zh-cn/web/api/speechrecognition/index.md | 199 +- .../speechrecognition/result_event/index.md | 81 +- .../web/api/speechrecognitionresult/index.md | 44 +- .../zh-cn/web/api/storage/removeitem/index.md | 44 +- files/zh-cn/web/api/storage_api/index.md | 109 +- files/zh-cn/web/api/storageevent/index.md | 141 +- .../web/api/streams_api/concepts/index.md | 116 +- files/zh-cn/web/api/streams_api/index.md | 150 +- .../using_readable_streams/index.md | 257 +- .../web/api/subtlecrypto/encrypt/index.md | 163 +- files/zh-cn/web/api/subtlecrypto/index.md | 350 +- .../gettotallength/index.md | 31 +- .../api/svggraphicselement/getbbox/index.md | 61 +- .../text/iselementcontentwhitespace/index.md | 54 +- files/zh-cn/web/api/textencoder/index.md | 110 +- files/zh-cn/web/api/touch_events/index.md | 232 +- .../touch_events/using_touch_events/index.md | 157 +- files/zh-cn/web/api/touchevent/index.md | 134 +- files/zh-cn/web/api/treewalker/index.md | 203 +- files/zh-cn/web/api/uievent/ischar/index.md | 42 +- .../web/api/url/createobjecturl/index.md | 71 +- files/zh-cn/web/api/url/tojson/index.md | 34 +- files/zh-cn/web/api/url_api/index.md | 94 +- .../web/api/urlsearchparams/get/index.md | 49 +- .../web/api/urlsearchparams/keys/index.md | 49 +- .../web/api/urlsearchparams/values/index.md | 50 +- .../totalvideoframes/index.md | 52 +- .../web/api/waveshapernode/curve/index.md | 43 +- files/zh-cn/web/api/waveshapernode/index.md | 98 +- .../keyframe_formats/index.md | 220 +- .../using_the_web_animations_api/index.md | 307 +- files/zh-cn/web/api/web_audio_api/index.md | 416 +- .../using_web_audio_api/index.md | 455 +- .../index.md | 198 +- .../web_audio_spatialization_basics/index.md | 266 +- .../using_the_web_speech_api/index.md | 368 +- .../using_the_web_storage_api/index.md | 164 +- files/zh-cn/web/api/web_workers_api/index.md | 96 +- .../using_web_workers/index.md | 579 +- .../web/api/webgl2renderingcontext/index.md | 445 +- .../webgl2renderingcontext/uniform/index.md | 56 +- .../uniformmatrix/index.md | 56 +- .../basic_2d_animation_example/index.md | 175 +- .../by_example/basic_scissoring/index.md | 51 +- .../by_example/boilerplate_1/index.md | 54 +- .../by_example/canvas_size_and_webgl/index.md | 49 +- .../by_example/clearing_by_clicking/index.md | 50 +- .../by_example/clearing_with_colors/index.md | 54 +- .../by_example/color_masking/index.md | 58 +- .../by_example/detect_webgl/index.md | 44 +- .../webgl_api/by_example/hello_glsl/index.md | 85 +- .../web/api/webgl_api/by_example/index.md | 93 +- .../by_example/scissor_animation/index.md | 78 +- .../simple_color_animation/index.md | 48 +- .../web/api/webgl_api/constants/index.md | 4922 +++----------- files/zh-cn/web/api/webgl_api/index.md | 359 +- .../matrix_math_for_the_web/index.md | 187 +- .../index.md | 127 +- .../tutorial/using_textures_in_webgl/index.md | 140 +- files/zh-cn/web/api/webgl_api/types/index.md | 153 +- .../api/webgl_api/using_extensions/index.md | 83 +- .../zh-cn/web/api/webgl_lose_context/index.md | 45 +- .../webglrenderingcontext/blendfunc/index.md | 208 +- .../getsupportedextensions/index.md | 41 +- .../gettexparameter/index.md | 332 +- .../webglrenderingcontext/getuniform/index.md | 311 +- .../pixelstorei/index.md | 243 +- .../webglrenderingcontext/uniform/index.md | 94 +- .../web/api/webglvertexarrayobject/index.md | 40 +- .../web/api/webrtc_api/adapter.js/index.md | 40 +- .../web/api/webrtc_api/connectivity/index.md | 84 +- files/zh-cn/web/api/webrtc_api/index.md | 162 +- .../api/webrtc_api/session_lifetime/index.md | 94 +- .../simple_rtcdatachannel_sample/index.md | 250 +- files/zh-cn/web/api/websocket/close/index.md | 46 +- .../web/api/websocket/error_event/index.md | 66 +- files/zh-cn/web/api/websocket/index.md | 187 +- .../web/api/websocket/message_event/index.md | 65 +- .../index.md | 219 +- .../index.md | 159 +- .../writing_websocket_servers/index.md | 239 +- files/zh-cn/web/api/webvr_api/index.md | 159 +- .../webvr_api/using_the_webvr_api/index.md | 350 +- .../web/api/wheelevent/deltamode/index.md | 70 +- files/zh-cn/web/api/window/alert/index.md | 66 +- .../api/window/beforeunload_event/index.md | 87 +- .../zh-cn/web/api/window/blur_event/index.md | 110 +- .../api/window/cancelanimationframe/index.md | 42 +- .../web/api/window/clearimmediate/index.md | 45 +- files/zh-cn/web/api/window/console/index.md | 36 +- .../zh-cn/web/api/window/copy_event/index.md | 68 +- files/zh-cn/web/api/window/document/index.md | 52 +- files/zh-cn/web/api/window/dump/index.md | 48 +- .../zh-cn/web/api/window/error_event/index.md | 110 +- files/zh-cn/web/api/window/external/index.md | 36 +- .../zh-cn/web/api/window/focus_event/index.md | 109 +- .../window/gamepadconnected_event/index.md | 110 +- .../web/api/window/getcomputedstyle/index.md | 127 +- .../web/api/window/hashchange_event/index.md | 76 +- .../zh-cn/web/api/window/innerheight/index.md | 63 +- .../zh-cn/web/api/window/load_event/index.md | 125 +- .../web/api/window/localstorage/index.md | 82 +- .../web/api/window/mozinnerscreenx/index.md | 34 +- .../web/api/window/mozinnerscreeny/index.md | 34 +- .../zh-cn/web/api/window/ondragdrop/index.md | 52 +- .../web/api/window/onmozbeforepaint/index.md | 33 +- .../window/orientationchange_event/index.md | 65 +- .../zh-cn/web/api/window/outerheight/index.md | 68 +- .../window/rejectionhandled_event/index.md | 69 +- .../api/window/requestanimationframe/index.md | 67 +- .../web/api/window/requestfilesystem/index.md | 60 +- .../api/window/requestidlecallback/index.md | 63 +- .../web/api/window/resize_event/index.md | 123 +- .../zh-cn/web/api/window/screenleft/index.md | 51 +- files/zh-cn/web/api/window/screentop/index.md | 51 +- files/zh-cn/web/api/window/scrollx/index.md | 74 +- .../web/api/window/sessionstorage/index.md | 75 +- .../web/api/window/setimmediate/index.md | 51 +- files/zh-cn/web/api/window/sidebar/index.md | 61 +- .../web/api/window/storage_event/index.md | 79 +- .../window/unhandledrejection_event/index.md | 103 +- .../web/api/window/unload_event/index.md | 134 +- files/zh-cn/web/api/worker/index.md | 93 +- .../web/api/worker/message_event/index.md | 94 +- .../api/worker/messageerror_event/index.md | 88 +- files/zh-cn/web/api/worker/worker/index.md | 95 +- .../zh-cn/web/api/workerglobalscope/index.md | 215 +- .../api/xmlhttprequest/abort_event/index.md | 109 +- .../api/xmlhttprequest/error_event/index.md | 105 +- .../html_in_xmlhttprequest/index.md | 82 +- files/zh-cn/web/api/xmlhttprequest/index.md | 293 +- .../api/xmlhttprequest/load_event/index.md | 103 +- .../mozresponsearraybuffer/index.md | 8 +- .../web/api/xmlhttprequest/open/index.md | 57 +- .../xmlhttprequest/progress_event/index.md | 105 +- .../api/xmlhttprequest/readystate/index.md | 96 +- .../readystatechange_event/index.md | 42 +- .../api/xmlhttprequest/responsetype/index.md | 88 +- .../api/xmlhttprequest/responsexml/index.md | 51 +- .../index.md | 95 +- .../xmlhttprequest/setrequestheader/index.md | 39 +- .../web/api/xmlhttprequest/timeout/index.md | 22 +- .../api/xmlhttprequest/timeout_event/index.md | 62 +- .../web/api/xmlhttprequest/upload/index.md | 55 +- .../using_xmlhttprequest/index.md | 811 +-- .../xmlhttprequest/withcredentials/index.md | 28 +- files/zh-cn/web/api/xmlserializer/index.md | 76 +- 622 files changed, 35988 insertions(+), 45123 deletions(-) diff --git a/files/zh-cn/web/api/analysernode/fftsize/index.md b/files/zh-cn/web/api/analysernode/fftsize/index.md index 635eb503b806cf..e97022d1620326 100644 --- a/files/zh-cn/web/api/analysernode/fftsize/index.md +++ b/files/zh-cn/web/api/analysernode/fftsize/index.md @@ -2,34 +2,34 @@ title: AnalyserNode.fftSize slug: Web/API/AnalyserNode/fftSize --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -

{{ domxref("AnalyserNode") }} 接口的 fftSize 属性的值是一个无符号长整型的值，表示（信号）样本的窗口大小。当执行快速傅里叶变换（Fast Fourier Transfor (FFT)）时，这些（信号）样本被用来获取频域数据。

+{{ domxref("AnalyserNode") }} 接口的 `fftSize` 属性的值是一个无符号长整型的值，表示（信号）样本的窗口大小。当执行[快速傅里叶变换](/zh-CN/docs/)（Fast Fourier Transfor (FFT)）时，这些（信号）样本被用来获取频域数据。 -

fftSize 属性的值必须是从 32 到 32768 范围内的 2 的非零幂; 其默认值为 2048.

+fftSize 属性的值必须是从 32 到 32768 范围内的 2 的非零幂; 其默认值为 2048. -
-

注意: 如果其值不是 2 的幂，或者它在指定范围之外，则抛出异常 INDEX_SIZE_ERR.

-
+> **备注：** 如果其值不是 2 的幂，或者它在指定范围之外，则抛出异常 INDEX_SIZE_ERR. -

语法

+## 语法 -
var audioCtx = new AudioContext();
+```js
+var audioCtx = new AudioContext();
 var analyser = audioCtx.createAnalyser();
 analyser.fftSize = 2048;
-
+``` -

值

+### 值 -

一个无符号长整型。

+一个无符号长整型。 -

例子

+## 例子 -

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame 和 <canvas> 去反复收集当前音频的时域数据，并绘制为一个示波器风格的输出 (频谱).

+下面的例子展示了 [`AudioContext`](/zh-CN/docs/Web/API/AudioContext) 创建一个 `AnalyserNode`, 然后用 [`requestAnimationFrame`](/zh-CN/docs/Web/API/Window/requestAnimationFrame) 和 [``](/zh-CN/docs/Web/HTML/Element/canvas) 去反复收集当前音频的时域数据，并绘制为一个示波器风格的输出 (频谱). -

更多的例子/信息，查看 Voice-change-O-matic 演示 (相关代码在 app.js 在 128 行~205 行).

+更多的例子/信息，查看 [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) 演示 (相关代码在 [app.js 在 128 行\~205 行](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 
   ...
@@ -58,7 +58,7 @@ function draw() {
       var sliceWidth = WIDTH * 1.0 / bufferLength;
       var x = 0;
 
-      for(var i = 0; i < bufferLength; i++) {
+      for(var i = 0; i < bufferLength; i++) {
 
         var v = dataArray[i] / 128.0;
         var y = v * HEIGHT/2;
@@ -76,18 +76,17 @@ function draw() {
       canvasCtx.stroke();
     };
 
-    draw();
+ draw(); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.AnalyserNode.fftSize")}} -

相关内容

+## 相关内容 - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/analysernode/index.md b/files/zh-cn/web/api/analysernode/index.md index a7475445ea504b..2f677365d957c8 100644 --- a/files/zh-cn/web/api/analysernode/index.md +++ b/files/zh-cn/web/api/analysernode/index.md @@ -2,104 +2,92 @@ title: AnalyserNode slug: Web/API/AnalyserNode --- -

{{APIRef("Web Audio API")}}

+{{APIRef("Web Audio API")}} -

AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 {{domxref("AudioNode")}}，同时允许你获取和处理它生成的数据，从而创建音频可视化。

+**`AnalyserNode`** 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 {{domxref("AudioNode")}}，同时允许你获取和处理它生成的数据，从而创建音频可视化。 -

AnalyzerNode 只有一个输入和输出，即使未连接到输出它也能正常工作。

+`AnalyzerNode` 只有一个输入和输出，即使未连接到输出它也能正常工作。 -

Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

+![Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.](https://mdn.mozillademos.org/files/5119/WebAudioFFT.png) - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
输入数1
输出数1 (但可能是未连接的)
通道计数模式"explicit"
通道数1
通道解释"speakers"
输入数1
输出数1 (但可能是未连接的)
通道计数模式"explicit"
通道数1
通道解释"speakers"
-

继承

+## 继承 -

继承自以下父接口：

+继承自以下父接口： -

{{InheritanceDiagram}}

+{{InheritanceDiagram}} -

构造函数

+## 构造函数 -
-
{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}
-
创建一个新的 AnalyserNode 对象实例。
-
+- {{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}} + - : 创建一个新的 `AnalyserNode` 对象实例。 -

属性

+## 属性 -

继承属性自 {{domxref("AudioNode")}}。

+_继承属性自_ _{{domxref("AudioNode")}}。_ -
-
{{domxref("AnalyserNode.fftSize")}}
-
一个无符号长整形 (unsigned long) 的值，代表了用于计算频域信号时使用的 FFT (快速傅里叶变换) 的窗口大小。
-
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
-
一个无符号长整形 (unsigned long) 的值，值为 fftSize 的一半。这通常等于将要用于可视化的数据值的数量。
-
{{domxref("AnalyserNode.minDecibels")}}
-
是一个双精度值，表示 FFT 分析频域数据并转换为无符号字节值时，对输入的功率数据的最小阈值 - 基本上，它限定了调用getByteFrequencyData()时结果范围的最小值
-
{{domxref("AnalyserNode.maxDecibels")}}
-
-
是一个双精度值，表示 FFT 分析频域数据并转换为无符号字节值时，对输入的功率数据的最大阈值 - 基本上，它限定了调用getByteFrequencyData()时结果范围的最大值
-
{{domxref("AnalyserNode.smoothingTimeConstant")}}
-
是一个双精度浮点型 (double) 的值，表示最后一个分析帧的平均常数 — 基本上，它随时间使值之间的过渡更平滑。
-
+- {{domxref("AnalyserNode.fftSize")}} + - : 一个无符号长整形 (unsigned long) 的值，代表了用于计算频域信号时使用的 FFT ([快速傅里叶变换](https://zh.wikipedia.org/zh-cn/%E5%BF%AB%E9%80%9F%E5%82%85%E9%87%8C%E5%8F%B6%E5%8F%98%E6%8D%A2)) 的窗口大小。 +- {{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}} + - : 一个无符号长整形 (unsigned long) 的值，值为 fftSize 的一半。这通常等于将要用于可视化的数据值的数量。 +- {{domxref("AnalyserNode.minDecibels")}} + - : 是一个双精度值，表示 FFT 分析频域数据并转换为无符号字节值时，对输入的功率数据的最小阈值 - 基本上，它限定了调用`getByteFrequencyData()`时结果范围的最小值 +- {{domxref("AnalyserNode.maxDecibels")}} -

方法

+ - : 是一个双精度值，表示 FFT 分析频域数据并转换为无符号字节值时，对输入的功率数据的最大阈值 - 基本上，它限定了调用`getByteFrequencyData()`时结果范围的最大值 -

继承方法自 {{domxref("AudioNode")}}.

+- {{domxref("AnalyserNode.smoothingTimeConstant")}} + - : 是一个双精度浮点型 (double) 的值，表示最后一个分析帧的平均常数 — 基本上，它随时间使值之间的过渡更平滑。 -
-
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
-
将当前频域数据拷贝进{{domxref("Float32Array")}}数组。
-
+## 方法 -
-
{{domxref("AnalyserNode.getByteFrequencyData()")}}
-
将当前频域数据拷贝进{{domxref("Uint8Array")}}数组（无符号字节数组）。
-
+_继承方法自_ _{{domxref("AudioNode")}}_. -
-
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
-
将当前波形，或者时域数据拷贝进{{domxref("Float32Array")}}数组。
-
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
-
将当前波形，或者时域数据拷贝进 {{domxref("Uint8Array")}}数组（无符号字节数组）。
-
+- {{domxref("AnalyserNode.getFloatFrequencyData()")}} + - : 将当前频域数据拷贝进{{domxref("Float32Array")}}数组。 +- {{domxref("AnalyserNode.getByteFrequencyData()")}} + - : 将当前频域数据拷贝进{{domxref("Uint8Array")}}数组（无符号字节数组）。 +- {{domxref("AnalyserNode.getFloatTimeDomainData()")}} + - : 将当前波形，或者时域数据拷贝进{{domxref("Float32Array")}}数组。 +- {{domxref("AnalyserNode.getByteTimeDomainData()")}} + - : 将当前波形，或者时域数据拷贝进 {{domxref("Uint8Array")}}数组（无符号字节数组）。 -

例子

+## 例子 -
-

注意：查看 Visualizations with Web Audio API 指南以获得更多关于创建音频可视化效果的信息。

-
+> **备注：** 查看 [Visualizations with Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) 指南以获得更多关于创建音频可视化效果的信息。 -

基础用法

+### 基础用法 -

下面的例子展示了 {{domxref("AudioContext")}} 创建一个 AnalyserNode, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的时域数据，并绘制为一个示波器风格的输出 (频谱).

+下面的例子展示了 {{domxref("AudioContext")}} 创建一个 `AnalyserNode`, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的时域数据，并绘制为一个示波器风格的输出 (频谱). -

更多的例子/信息，查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

+更多的例子/信息，查看 [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) 演示 (相关代码在 [app.js 的 128 行\~205 行](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 
 // ...
@@ -132,7 +120,7 @@ function draw() {
   var sliceWidth = canvas.width * 1.0 / bufferLength;
   var x = 0;
 
-  for (var i = 0; i < bufferLength; i++) {
+  for (var i = 0; i < bufferLength; i++) {
 
     var v = dataArray[i] / 128.0;
     var y = v * canvas.height / 2;
@@ -150,20 +138,17 @@ function draw() {
   canvasCtx.stroke();
 };
 
-draw();
+draw(); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -
-

{{Compat("api.AnalyserNode")}}

-
+{{Compat("api.AnalyserNode")}} -

相关内容

+## 相关内容 - +- [Web Audio API 的运用](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.md b/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.md index c460e8634d4e3a..1f569bc232bb54 100644 --- a/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.md +++ b/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.md @@ -2,38 +2,38 @@ title: AnalyserNode.smoothingTimeConstant slug: Web/API/AnalyserNode/smoothingTimeConstant --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -

{{ domxref("AnalyserNode") }} 接口的 smoothingTimeConstant 属性是一个双精度浮点型 (double) 的值， 表示最后一个分析帧的平均常数。它基本上是当前缓冲区和 AnalyserNode 处理的最后一个缓冲区之间的平均值，并导致在值变化时随着时间推移得到一个更平滑的集合。

+{{ domxref("AnalyserNode") }} 接口的 **`smoothingTimeConstant`** 属性是一个双精度浮点型 (double) 的值， 表示最后一个分析帧的平均常数。它基本上是当前缓冲区和 AnalyserNode 处理的最后一个缓冲区之间的平均值，并导致在值变化时随着时间推移得到一个更平滑的集合。 -

smoothingTimeConstant 属性的默认值为 0.8; 值的范围必须在 0 ~ 1 之间。如果设置为 0，则不进行平均，而值为 1 意味着 "在计算值时重叠上一个缓冲区和当前缓冲区相当多", 它基本上平滑了 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 调用的变化。

+`smoothingTimeConstant 属性的默认值为` `0.8`; 值的范围必须在 `0` \~ `1` 之间。如果设置为 0，则不进行平均，而值为 1 意味着 "在计算值时重叠上一个缓冲区和当前缓冲区相当多", 它基本上平滑了 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 调用的变化。 -

在技术术语中，我们应用一个 布莱克曼窗 并随着时间推移去平滑值。大部分情况下，默认值是较好的。

+在技术术语中，我们应用一个 [布莱克曼窗](http://webaudio.github.io/web-audio-api/#blackman-window) 并随着时间推移去平滑值。大部分情况下，默认值是较好的。 -
-

注意: 如果设置了 0~1 范围外的值，将会抛出异常INDEX_SIZE_ERR.

-
+> **备注：** 如果设置了 0\~1 范围外的值，将会抛出异常`INDEX_SIZE_ERR`. -

语法

+## 语法 -
var audioCtx = new AudioContext();
+```js
+var audioCtx = new AudioContext();
 var analyser = audioCtx.createAnalyser();
 analyser.smoothingTimeConstant = 1;
-
+``` -

值类型

+### 值类型 -

双精度浮点型 (double).

+双精度浮点型 (double). -

例子

+## 例子 -

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame 和 <canvas> 去反复收集当前音频的频率数据，并绘制为一个柱状风格的输出 (频谱).

+下面的例子展示了 [`AudioContext`](/zh-CN/docs/Web/API/AudioContext) 创建一个 `AnalyserNode`, 然后用 [`requestAnimationFrame`](/zh-CN/docs/Web/API/Window/requestAnimationFrame) 和 [``](/zh-CN/docs/Web/HTML/Element/canvas) 去反复收集当前音频的频率数据，并绘制为一个柱状风格的输出 (频谱). -

更多的例子/信息，查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

+更多的例子/信息，查看 [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) 演示 (相关代码在 [app.js 的 128 行\~205 行](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -

如果你对 smoothingTimeConstant() 的效果好奇，可以尝试克隆上面的例子并设置 "analyser.smoothingTimeConstant = 0;" 代替。你会发现值的变化更加快速。

+`如果你对 smoothingTimeConstant()` 的效果好奇，可以尝试克隆上面的例子并设置 "`analyser.smoothingTimeConstant = 0;"` 代替。你会发现值的变化更加快速。 -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 analyser.minDecibels = -90;
 analyser.maxDecibels = -10;
@@ -60,7 +60,7 @@ function draw() {
   var barHeight;
   var x = 0;
 
-  for(var i = 0; i < bufferLength; i++) {
+  for(var i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
     canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
@@ -70,18 +70,17 @@ function draw() {
   }
 };
 
-draw();
+draw(); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.AnalyserNode.smoothingTimeConstant")}} -

相关内容

+## 相关内容 - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/angle_instanced_arrays/index.md b/files/zh-cn/web/api/angle_instanced_arrays/index.md index fd15d0b1f9d2c8..41d84e42704c1c 100644 --- a/files/zh-cn/web/api/angle_instanced_arrays/index.md +++ b/files/zh-cn/web/api/angle_instanced_arrays/index.md @@ -2,68 +2,49 @@ title: ANGLE_instanced_arrays slug: Web/API/ANGLE_instanced_arrays --- -
{{APIRef("WebGL")}}
+{{APIRef("WebGL")}}`ANGLE_instanced_arrays是`属于 [WebGL API ](/zh-CN/docs/Web/API/WebGL_API)`的一个扩展 API，`它允许多次绘制相同的对象或相似对象组，前提是它们共享相同的顶点数据、基本图形的个数和类型。WebGL 的扩展都能使用{{domxref("WebGLRenderingContext.getExtension()")}} 这个方法。更多详细信息，请参考 [WebGL tutorial](/zh-CN/docs/Web/API/WebGL_API/Tutorial)_（WebGL 使用教程）里的_[Using Extensions](/zh-CN/docs/Web/API/WebGL_API/Using_Extensions) _（使用扩展）_。 -
ANGLE_instanced_arrays是属于 WebGL API 的一个扩展 API，它允许多次绘制相同的对象或相似对象组，前提是它们共享相同的顶点数据、基本图形的个数和类型。
+> **备注：** 这个扩展仅仅能使用在 {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} 上下文中。在 {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}，默认情况下这个扩展的在 WebGL2 的上下文中起作用，它的常量以及方法使用过程中没有“ANGEL”后缀。 +> +> 尽管名字叫“ANGLE”，只要硬件支持，它可以运行在任意设备上，而不仅是在 Windows 上起作用。 "ANGLE"只是表明了这个扩展是被 ANGLE 这个库的作者书写的，并没有更多的含义。 +## 常量 +这个扩展提供了一个新常量，它能被 {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} 这个方法所使用： -
WebGL 的扩展都能使用{{domxref("WebGLRenderingContext.getExtension()")}} 这个方法。更多详细信息，请参考 WebGL tutorial（WebGL 使用教程）里的Using Extensions （使用扩展）。
+- `ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE` + - : 当这个常量在{{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}}中作为 pname 参数使用时，将返回一个用于实例渲染的频率因子{{domxref("GLint")}}。 +## 方法 +这个扩展提供了三个新的方法。 -
-

实用性： 这个扩展仅仅能使用在 {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} 上下文中。在 {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}，默认情况下这个扩展的在 WebGL2 的上下文中起作用，它的常量以及方法使用过程中没有“ANGEL”后缀。

+- {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} + - : 作用与{{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} 相同，除了元素范围的多实例的执行以及每次迭代时的实例扩展。 +- {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}} + - : 作用与{{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}相同，除了元素集中的多实例的计算以及每个集之间的实例扩展。 +- {{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}} + - : 当用{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}和{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}渲染基本图元的多实例时，会提升通用的顶点属性的速度。 -

尽管名字叫“ANGLE”，只要硬件支持，它可以运行在任意设备上，而不仅是在 Windows 上起作用。 "ANGLE"只是表明了这个扩展是被 ANGLE 这个库的作者书写的，并没有更多的含义。

-
+## 示例 -

常量

+启用扩展： -

这个扩展提供了一个新常量，它能被 {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} 这个方法所使用：

+```js +var ext = gl.getExtension("ANGLE_instanced_arrays"); +``` -
-
ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE
-
当这个常量在{{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}}中作为 pname 参数使用时，将返回一个用于实例渲染的频率因子{{domxref("GLint")}}。
-
- -

方法

- -

这个扩展提供了三个新的方法。

- -
-
{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}
-
-

作用与{{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} 相同，除了元素范围的多实例的执行以及每次迭代时的实例扩展。

-
-
{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}
-
-

作用与{{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}相同，除了元素集中的多实例的计算以及每个集之间的实例扩展。

-
-
{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}
-
当用{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}和{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}渲染基本图元的多实例时，会提升通用的顶点属性的速度。
-
- -

示例

- -

启用扩展：

- -
var ext = gl.getExtension("ANGLE_instanced_arrays");
-
- -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.ANGLE_instanced_arrays")}}

+{{Compat("api.ANGLE_instanced_arrays")}} -

相关链接

+## 相关链接 -
    -
  • {{domxref("WebGLRenderingContext.getExtension()")}}
    • -
  • {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}
    • -
  • {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}
    • -
  • {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}
    • -
+- {{domxref("WebGLRenderingContext.getExtension()")}} +- {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}} +- {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}} +- {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}} diff --git a/files/zh-cn/web/api/animation/cancel/index.md b/files/zh-cn/web/api/animation/cancel/index.md index d704a487c60268..b0407af2c96cd4 100644 --- a/files/zh-cn/web/api/animation/cancel/index.md +++ b/files/zh-cn/web/api/animation/cancel/index.md @@ -2,47 +2,42 @@ title: Animation.cancel() slug: Web/API/Animation/cancel --- -

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+{{ SeeCompatTable() }}{{ APIRef("Web Animations") }} -

{{domxref("Animation")}} 接口的 Web 动画 API 的 cancel() 方法将清除此动画造成的所有 {{domxref("KeyframeEffect")}}，并中止其播放。

+{{domxref("Animation")}} 接口的 Web 动画 API 的 **`cancel()`** 方法将清除此动画造成的所有 {{domxref("KeyframeEffect")}}，并中止其播放。 -
-

当一个动画被取消时，其 {{domxref("Animation.startTime", "startTime")}} 和 {{domxref("Animation.currentTime", "currentTime")}} 被设置为 null。

-
+> **备注：** 当一个动画被取消时，其 {{domxref("Animation.startTime", "startTime")}} 和 {{domxref("Animation.currentTime", "currentTime")}} 被设置为 null。 -

语法

+## 语法 -
Animation.cancel();
+``` +Animation.cancel(); +``` -

参数

+### 参数 -

无。

+无。 -

返回值

+### 返回值 -

无。

+无。 -

异常

+### 异常 -

这个方法不会直接抛出异常; 但是，如果动画的 {{domxref("Animation.playState", "playState")}} 取消时是除了“空闲”之外的任何东西，{{domxref("Animation.finished", "current finished promise", "", 1)}} 被拒绝与一个 {{domxref("DOMException")}} 命名的AbortError.

+这个方法不会直接抛出异常; 但是，如果动画的 {{domxref("Animation.playState", "playState")}} 取消时是除了“空闲”之外的任何东西，{{domxref("Animation.finished", "current finished promise", "", 1)}} 被拒绝与一个 {{domxref("DOMException")}} 命名的`AbortError`. -
-
- -

规范

+## 规范 {{Specifications}} -

浏览器兼容

+## 浏览器兼容 {{Compat("api.Animation.cancel")}} -

相关内容

+## 相关内容 -
    -
  • Web Animations API
    • -
  • {{domxref("KeyframeEffect")}}
    • -
  • {{domxref("Animation")}}
    • -
  • {{domxref("Animation.playState")}}
    • -
  • {{domxref("Animation.finished")}} returns the promise this action will reject if the animation's playState is not "idle".
    • -
+- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) +- {{domxref("KeyframeEffect")}} +- {{domxref("Animation")}} +- {{domxref("Animation.playState")}} +- {{domxref("Animation.finished")}} returns the promise this action will reject if the animation's `playState` is not `"idle"`. diff --git a/files/zh-cn/web/api/animation/cancel_event/index.md b/files/zh-cn/web/api/animation/cancel_event/index.md index 826c323c41558f..27928b4cea538d 100644 --- a/files/zh-cn/web/api/animation/cancel_event/index.md +++ b/files/zh-cn/web/api/animation/cancel_event/index.md @@ -2,45 +2,44 @@ title: Animation.oncancel slug: Web/API/Animation/cancel_event --- -

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+{{ SeeCompatTable() }}{{ APIRef("Web Animations") }} -

Web Animations API 的 {{domxref("Animation")}} 接口的 oncancel 属性是 {{event("cancel")}} 事件的事件处理程序。

+[Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) 的 {{domxref("Animation")}} 接口的 **`oncancel`** 属性是 {{event("cancel")}} 事件的事件处理程序。 -

当动作从其他状态进入 "idle" 播放状态，例如当动画在结束播放后从元素中移除时，cancel 事件可以 {{domxref("Animation.cancel()")}} 被手动触发。

+当动作从其他状态进入 `"idle"` 播放状态，例如当动画在结束播放后从元素中移除时，`cancel` 事件可以 {{domxref("Animation.cancel()")}} 被手动触发。 -
-

在新的动画中，创建一个新的初始的空闲动画不会触发 {{event("cancel")}} 事件。

-
+> **备注：** 在新的动画中，创建一个新的初始的空闲动画不会触发 {{event("cancel")}} 事件。 -

语法

+## 语法 -
var cancelHandler = Animation.oncancel;
+```
+var cancelHandler = Animation.oncancel;
 
-Animation.oncancel = cancelHandler;
+Animation.oncancel = cancelHandler; +``` -

值

+### 值 -

当动画被取消时，这个函数将会被执行。默认是 null 。

+当动画被取消时，这个函数将会被执行。默认是 `null` 。 -

例子

+## 例子 -

如果动画被取消，将会从元素中移除它。

+如果动画被取消，将会从元素中移除它。 -
animation.oncancel = animation.effect.target.remove();
-
+```js +animation.oncancel = animation.effect.target.remove(); +``` -

标准

+## 标准 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.Animation.cancel_event")}} -

参见

+## 参见 - +- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) +- {{domxref("Animation")}} +- {{event("cancel")}} 事件 diff --git a/files/zh-cn/web/api/animation/playstate/index.md b/files/zh-cn/web/api/animation/playstate/index.md index ba2b78cdfdf20f..6d852a5aad881b 100644 --- a/files/zh-cn/web/api/animation/playstate/index.md +++ b/files/zh-cn/web/api/animation/playstate/index.md @@ -2,41 +2,39 @@ title: Animation.playState slug: Web/API/Animation/playState --- -

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+{{APIRef("Web Animations")}}{{SeeCompatTable}} -

作为一个 Web Animations API 的属性，Animation.playState 能够返回并设置一个可枚举值来描述一个动画的回放状态。

+作为一个 [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) 的属性，**`Animation.playState`** 能够返回并设置一个可枚举值来描述一个动画的回放状态。 -
-

这个属性只对 CSS Animations 和 Transitions 可读。

-
+> **备注：** 这个属性只对 CSS Animations 和 Transitions 可读。 -

语法

+## 语法 -
var currentPlayState = Animation.playState;
+```
+var currentPlayState = Animation.playState;
 
-Animation.playState = newState;
-
+Animation.playState = newState; +``` -

可能的值

+### 可能的值 -
-
idle
-
动画当前的时间是无法解析的，并且队列里没有处于等待执行的任务。
-
pending
-
动画将一直等到某些等待中的任务完成方会执行。
-
running
-
动画处于正在运行状态。
-
paused
-
动画中止，并且{{domxref("Animation.currentTime")}}该项属性不会更新。
-
finished
-
动画已经达到某一临界点，并且{{domxref("Animation.currentTime")}}该项属性不会更新。
-
+- `idle` + - : 动画当前的时间是无法解析的，并且队列里没有处于等待执行的任务。 +- `pending` + - : 动画将一直等到某些等待中的任务完成方会执行。 +- `running` + - : 动画处于正在运行状态。 +- `paused` + - : 动画中止，并且{{domxref("Animation.currentTime")}}该项属性不会更新。 +- `finished` + - : 动画已经达到某一临界点，并且{{domxref("Animation.currentTime")}}该项属性不会更新。 -

实例

+## 实例 -

在Growing/Shrinking Alice Game这个例子中，玩家们可以凭Alice crying into a pool of tears结束游戏。出于性能原因，游戏里，眼泪只当可见之时才能运动。因此，这些泪滴必须在下面的情况下刚好暂停运动：

+在[Growing/Shrinking Alice Game](http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010)这个例子中，玩家们可以凭[Alice crying into a pool of tears](http://codepen.io/rachelnabors/pen/EPJdJx?editors=0010)结束游戏。出于性能原因，游戏里，眼泪只当可见之时才能运动。因此，这些泪滴必须在下面的情况下刚好暂停运动： -
// 创建泪珠动画
+```js
+// 创建泪珠动画
 
 tears.forEach(function(el) {
   el.animate(
@@ -64,20 +62,18 @@ tears.forEach(function(el) {
   el.playState = "paused";
   el.currentTime = 0;
 });
-
+``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.Animation.playState")}} -

参见

+## 参见 -
    -
  • Web Animations API
    • -
  • {{domxref("Animation")}} 获取更多可用来控制网页动画的方法和属性
    • -
  • {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}}，这些方法可以设置一个动画的 playState
    • -
+- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) +- {{domxref("Animation")}} 获取更多可用来控制网页动画的方法和属性 +- {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}}，这些方法可以设置一个动画的 `playState` diff --git a/files/zh-cn/web/api/attr/localname/index.md b/files/zh-cn/web/api/attr/localname/index.md index fa50b32ecda609..384efee9314ef4 100644 --- a/files/zh-cn/web/api/attr/localname/index.md +++ b/files/zh-cn/web/api/attr/localname/index.md @@ -2,65 +2,61 @@ title: Attr.localName slug: Web/API/Attr/localName --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

Attr.localName 为只读属性，返回一个属性限定名称的本名部分（去除命名空间前缀的名字）。

+**`Attr.localName`** 为只读属性，返回一个属性限定名称的本名部分（去除命名空间前缀的名字）。 -
-

在之前的 DOM 规范中此 API 被定义在 {{domxref("Node")}} 接口中。

-
+> **备注：** 在之前的 DOM 规范中此 API 被定义在 {{domxref("Node")}} 接口中。 -

语法

+## 语法 -
name = attribute.localName
-
+``` +name = attribute.localName +``` -

返回值

+### 返回值 -

属性的限定名称的本名 {{domxref("DOMString")}} 。

+属性的限定名称的本名 {{domxref("DOMString")}} 。 -

示例

+## 示例 -

下面的例子将弹出一个有“id”文字的警告窗口。

+下面的例子将弹出一个有“id”文字的警告窗口。 -

HTML 代码

+### HTML 代码 -
<button id="example">Click me</button>
+```html + +``` -

JavaScript 代码

+### JavaScript 代码 -
const element = document.querySelector("#example");
+```js
+const element = document.querySelector("#example");
 element.addEventListener("click", function() {
   const attribute = element.attributes[0];
   alert(attribute.localName);
 });
-
+``` -

{{ EmbedLiveSample('Example','100%',30) }}

+{{ EmbedLiveSample('Example','100%',30) }} -

注意

+## 注意 -

本文档中属性的“本名 (local name)”指的是属性“限定名称 (qualified names)”的命名空间冒号之后的部分。“限定名称”通常作为 XML 文档命名空间的一部分用在 XML 代码内。

+本文档中属性的“本名 (local name)”指的是属性“限定名称 (qualified names)”的命名空间冒号之后的部分。“限定名称”通常作为 XML 文档命名空间的一部分用在 XML 代码内。 -
-

注意：在{{Gecko("1.9.2")}} 以及跟早的版本中，HTML DOM 访问该属性将返回 HTML 节点属性的大写字符串本名（有别于 XML DOM 的 XHTML 属性）。在后来的版本中，为遵循 HTML5 标准，该属性返回 DOM 内部存储的名称，即，不论 HTML DOM 的 HTML 属性还是 XML DOM 的 XHTML 属性都是小写字符串。

-
+> **备注：** 在 {{Gecko("1.9.2")}} 以及跟早的版本中，HTML DOM 访问该属性将返回 HTML 节点属性的大写字符串本名（有别于 XML DOM 的 XHTML 属性）。在后来的版本中，为遵循 HTML5 标准，该属性返回 DOM 内部存储的名称，即，不论 HTML DOM 的 HTML 属性还是 XML DOM 的 XHTML 属性都是小写字符串。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 +{{Compat("api.Attr.localName")}} +## 参考 -

{{Compat("api.Attr.localName")}}

- -

参考

- -
    -
  • {{domxref("Attr.namespaceURI")}}
    • -
  • {{domxref("Attr.prefix")}}
    • -
  • {{domxref("Element.localName")}}
    • -
  • {{domxref("Node.localName")}}
    • -
+- {{domxref("Attr.namespaceURI")}} +- {{domxref("Attr.prefix")}} +- {{domxref("Element.localName")}} +- {{domxref("Node.localName")}} diff --git a/files/zh-cn/web/api/attr/namespaceuri/index.md b/files/zh-cn/web/api/attr/namespaceuri/index.md index b690da4ec537c2..14fd20c0bd1dd0 100644 --- a/files/zh-cn/web/api/attr/namespaceuri/index.md +++ b/files/zh-cn/web/api/attr/namespaceuri/index.md @@ -2,56 +2,56 @@ title: Attr.namespaceURI slug: Web/API/Attr/namespaceURI --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

Attr.namespaceURI 只读属性返回属性的命名空间 URI，如果该元素不在命名空间中，则返回 null。

+**`Attr.namespaceURI`** 只读属性返回属性的命名空间 URI，如果该元素不在命名空间中，则返回 null。 -
-

在 DOM4 之前，该 API 是在 {{domxref("Node")}} 中定义的。

-
+> **备注：** 在 DOM4 之前，该 API 是在 {{domxref("Node")}} 中定义的。 -

语法

+## 语法 -
namespace = attribute.namespaceURI
+``` +namespace = attribute.namespaceURI +``` -

例子

+## 例子 -

在这个片段中，正在检查一个属性的 {{domxref("localName")}} 和 namespaceURI。如果 namespaceURI 返回 XUL 命名空间，并且 localName 返回 "browser"，则该节点被理解为 XUL <browser/>。

+在这个片段中，正在检查一个属性的 {{domxref("localName")}} 和 `namespaceURI`。如果 `namespaceURI` 返回 XUL 命名空间，并且 localName 返回 "browser"，则该节点被理解为 XUL ``。 -
if (attribute.localName == "value" &&
+```js
+if (attribute.localName == "value" &&
     attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
   // this is a XUL value
-}
+} +``` -

笔记

+## 笔记 -

这不是基于对范围中的命名空间声明的检查的命名空间查找的结果的计算值。
- 属性的命名空间 URI 在属性创建时被冻结。

+这不是基于对范围中的命名空间声明的检查的命名空间查找的结果的计算值。 +属性的命名空间 URI 在属性创建时被冻结。 -

在 Firefox 3.5 及更早版本中，HTML 文档中 HTML 属性的命名空间 URI 为 null。
- 在后来的版本中，遵照 HTML5，就像在 XHTML 中一样是https://www.w3.org/1999/xhtml

+在 Firefox 3.5 及更早版本中，HTML 文档中 HTML 属性的命名空间 URI 为 null。 +在后来的版本中，遵照 HTML5，就像在 XHTML 中一样是[`https://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) -

您可以使用 DOM Level 2 方法 {{domxref("Element.setAttributeNS")}}创建具有指定 namespaceURI 的属性。

+您可以使用 DOM Level 2 方法 {{domxref("Element.setAttributeNS")}}创建具有指定 namespaceURI 的属性。 -

根据 Namespaces in XML 规范，属性不会从其附加的元素继承其命名空间。
- 如果一个属性没有明确地给出一个命名空间，它没有命名空间。

+根据 [Namespaces in XML](https://www.w3.org/TR/xml-names11/) 规范，属性不会从其附加的元素继承其命名空间。 +如果一个属性没有明确地给出一个命名空间，它没有命名空间。 -

DOM 本身不处理或强制命名空间验证。 DOM 应用程序需要做任何必要的验证。
- 还要注意，一旦与特定节点相关联，命名空间前缀将无法更改。

+DOM 本身不处理或强制命名空间验证。 DOM 应用程序需要做任何必要的验证。 +还要注意，一旦与特定节点相关联，命名空间前缀将无法更改。 -

规格

+## 规格 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.Attr.namespaceURI")}} -

其他文章

+## 其他文章 -
    -
  • {{domxref("Attr.localName")}}
    • -
  • {{domxref("Attr.prefix")}}
    • -
  • {{domxref("Element.namespaceURI")}}
    • -
  • {{domxref("Node.namespaceURI")}}
    • -
+- {{domxref("Attr.localName")}} +- {{domxref("Attr.prefix")}} +- {{domxref("Element.namespaceURI")}} +- {{domxref("Node.namespaceURI")}} diff --git a/files/zh-cn/web/api/attr/prefix/index.md b/files/zh-cn/web/api/attr/prefix/index.md index 621b67cc5dde59..c43d670c450f07 100644 --- a/files/zh-cn/web/api/attr/prefix/index.md +++ b/files/zh-cn/web/api/attr/prefix/index.md @@ -2,45 +2,41 @@ title: Attr.prefix slug: Web/API/Attr/prefix --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

Attr.prefix 为只读属性，返回指定标签属性的名字空间前缀，如果没有前缀则返回 null。

+**`Attr.prefix`** 为只读属性，返回指定标签属性的名字空间前缀，如果没有前缀则返回 `null`。 -
-

在 DOM4 之前此 API 被定义在 {{domxref("Node")}} 接口中。

-
+> **备注：** 在 DOM4 之前此 API 被定义在 {{domxref("Node")}} 接口中。 -

语法

+## 语法 -
string = attribute.prefix
-
+``` +string = attribute.prefix +``` -

示例

+## 示例 -

下例在控制台中输出“x”。

+下例在控制台中输出“x”。 -
<div x:id="example" onclick="console.log(this.attributes[0].prefix)"/>
-
+```xml +
+``` -

注意

+## 注意 -

该属性仅在使用有名字空间解析功能的解析器时有效，例如一个 MIME 类型为 XML 的文档。在 HTML 文档中无效。

+该属性仅在使用有名字空间解析功能的解析器时有效，例如一个 MIME 类型为 XML 的文档。在 HTML 文档中无效。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 +{{Compat("api.Attr.prefix")}} +## 参考 -

{{Compat("api.Attr.prefix")}}

- -

参考

- -
    -
  • {{domxref("Attr.namespaceURI")}}
    • -
  • {{domxref("Attr.localName")}}
    • -
  • {{domxref("Element.prefix")}}
    • -
  • {{domxref("Node.prefix")}}
    • -
+- {{domxref("Attr.namespaceURI")}} +- {{domxref("Attr.localName")}} +- {{domxref("Element.prefix")}} +- {{domxref("Node.prefix")}} diff --git a/files/zh-cn/web/api/audiobuffersourcenode/index.md b/files/zh-cn/web/api/audiobuffersourcenode/index.md index e8f22a556d9c1d..db2a0c0bc7b6e2 100644 --- a/files/zh-cn/web/api/audiobuffersourcenode/index.md +++ b/files/zh-cn/web/api/audiobuffersourcenode/index.md @@ -2,84 +2,76 @@ title: AudioBufferSourceNode slug: Web/API/AudioBufferSourceNode --- -

{{APIRef("Web Audio API")}}

+{{APIRef("Web Audio API")}} -

AudioBufferSourceNode 接口继承自 {{domxref("AudioScheduledSourceNode")}}，表现为一个音频源，它包含了一些写在内存中的音频数据，通常储存在一个 ArrayBuffer 对象中。在处理有严格的时间精确度要求的回放的情形下它尤其有用。比如播放那些需要满足一个指定节奏的声音或者那些储存在内存而不是硬盘或者来自网络的声音。为了播放那些有时间精确度需求但来自网络的流文件或者来自硬盘，则使用 {{domxref("AudioWorkletNode")}} 来实现回放。

+**`AudioBufferSourceNode`** 接口继承自 {{domxref("AudioScheduledSourceNode")}}，表现为一个音频源，它包含了一些写在内存中的音频数据，通常储存在一个 ArrayBuffer 对象中。在处理有严格的时间精确度要求的回放的情形下它尤其有用。比如播放那些需要满足一个指定节奏的声音或者那些储存在内存而不是硬盘或者来自网络的声音。为了播放那些有时间精确度需求但来自网络的流文件或者来自硬盘，则使用 {{domxref("AudioWorkletNode")}} 来实现回放。 -

{{InheritanceDiagram}}

+{{InheritanceDiagram}} -

AudioBufferSourceNode 没有输入却有一个输出，其通道数与其 {{domxref("AudioBufferSourceNode.buffer", "buffer")}} 属性所指定的 AudioBuffer 相同。如果没有设置 buffer，也就是说 buffer 属性是 null 的话，输出将包含一个无声的单通道（每个采样点均为 0）。

+`AudioBufferSourceNode` 没有输入却有一个输出，其通道数与其 {{domxref("AudioBufferSourceNode.buffer", "buffer")}} 属性所指定的 `AudioBuffer` 相同。如果没有设置 buffer，也就是说 `buffer` 属性是 `null` 的话，输出将包含一个无声的单通道（每个采样点均为 0）。 -

一个 {{domxref("AudioBufferSourceNode")}} 只能被播放一次，也就是说，每次调用 {{domxref("AudioScheduledSourceNode.start", "start()")}} 之后，如果还想再播放一遍同样的声音，那么就需要再创建一个 AudioBufferSourceNode。庆幸的是，创建该节点的代价并不大，并且想要多次播放声音的话，实际上 AudioBuffer 也可以被重用。事实上，你可以用一种“阅后即焚”的方式来使用这些节点：创建节点，调用 start() 开始播放声音，然后，你甚至不需要再保留这个节点的引用了。声音播放完成之后，垃圾收集器会找个恰当的时机回收资源。

+一个 {{domxref("AudioBufferSourceNode")}} 只能被播放一次，也就是说，每次调用 {{domxref("AudioScheduledSourceNode.start", "start()")}} 之后，如果还想再播放一遍同样的声音，那么就需要再创建一个 `AudioBufferSourceNode`。庆幸的是，创建该节点的代价并不大，并且想要多次播放声音的话，实际上 `AudioBuffer` 也可以被重用。事实上，你可以用一种“阅后即焚”的方式来使用这些节点：创建节点，调用 `start()` 开始播放声音，然后，你甚至不需要再保留这个节点的引用了。声音播放完成之后，垃圾收集器会找个恰当的时机回收资源。 -

多次调用 AudioBufferSourceNode.stop() 是允许的。如果这时候 AudioBufferSourceNode 还没有到达缓冲区末尾的话，最近一次的调用将替换上一次的调用。

+`多次调用 AudioBufferSourceNode.stop()` 是允许的。如果这时候 `AudioBufferSourceNode` 还没有到达缓冲区末尾的话，最近一次的调用将替换上一次的调用。 -


- The AudioBufferSourceNode takes the content of an AudioBuffer and m

+![The AudioBufferSourceNode takes the content of an AudioBuffer and m](webaudioaudiobuffersourcenode.png) - - - - - - - - - - - - - - + + + + + + + + + + + + + +
输入数量0
输出数量1
频道数量由相关的 {{domxref("AudioBuffer")}} 定义
输入数量0
输出数量1
频道数量由相关的 {{domxref("AudioBuffer")}} 定义
-

属性

+## 属性 -

从父级的 {{domxref("AudioNode")}} 继承属性.

+_从父级的_ _{{domxref("AudioNode")}} 继承属性_. -
-
{{domxref("AudioBufferSourceNode.buffer")}}
-
是一个 {{domxref("AudioBuffer")}} 它定义了要播放的音频，当设置它的值为 0 时，它会定义一个静默的单通道。
-
{{domxref("AudioBufferSourceNode.detune")}}
-
Is a k-rate {{domxref("AudioParam")}} representing detuning of oscillation in cents. Its default value is 0.
-
{{domxref("AudioBufferSourceNode.loop")}}
-
Is a Boolean attribute indicating if the audio asset must be replayed when the end of the {{domxref("AudioBuffer")}} is reached. Its default value is false.
-
{{domxref("AudioBufferSourceNode.loopStart")}}
-
Is a double value indicating, in seconds, where in the {{domxref("AudioBuffer")}} the restart of the play must happen. Its default value is 0.
-
{{domxref("AudioBufferSourceNode.loopEnd")}}
-
Is a double value indicating, in seconds, where in the {{domxref("AudioBuffer")}} the replay of the play must stop (and eventually loop again). Its default value is 0.
-
{{domxref("AudioBufferSourceNode.playbackRate")}}
-
Is an a-rate {{domxref("AudioParam")}} that defines the speed factor at which the audio asset will be played. Since no pitch correction is applied on the output, this can be used to change the pitch of the sample.
-
+- {{domxref("AudioBufferSourceNode.buffer")}} + - : 是一个 {{domxref("AudioBuffer")}} 它定义了要播放的音频，当设置它的值为 0 时，它会定义一个静默的单通道。 +- {{domxref("AudioBufferSourceNode.detune")}} + - : Is a [k-rate](/zh-CN/docs/DOM/AudioParam#k-rate) {{domxref("AudioParam")}} representing detuning of oscillation in [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Its default value is `0`. +- {{domxref("AudioBufferSourceNode.loop")}} + - : Is a Boolean attribute indicating if the audio asset must be replayed when the end of the {{domxref("AudioBuffer")}} is reached. Its default value is `false`. +- {{domxref("AudioBufferSourceNode.loopStart")}} + - : Is a double value indicating, in seconds, where in the {{domxref("AudioBuffer")}} the restart of the play must happen. Its default value is `0`. +- {{domxref("AudioBufferSourceNode.loopEnd")}} + - : Is a double value indicating, in seconds, where in the {{domxref("AudioBuffer")}} the replay of the play must stop (and eventually loop again). Its default value is `0`. +- {{domxref("AudioBufferSourceNode.playbackRate")}} + - : Is an [a-rate](/zh-CN/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}} that defines the speed factor at which the audio asset will be played. Since no pitch correction is applied on the output, this can be used to change the pitch of the sample. -

事件

+### 事件 -
-
{{domxref("AudioBufferSourceNode.onended")}}
-
是一个 {{event("Event_handlers", "event handler")}} 类型，包含了与 {{event("ended_(Web_Audio)", "ended")}} 相关联的结束事件。
-
+- {{domxref("AudioBufferSourceNode.onended")}} + - : 是一个 {{event("Event_handlers", "event handler")}} 类型，包含了与 {{event("ended_(Web_Audio)", "ended")}} 相关联的结束事件。 -

方法

+## 方法 -

从父级的 {{domxref("AudioNode")}} 继承方法.

+_从父级的_ _{{domxref("AudioNode")}} 继承方法_. -
-
{{domxref("AudioBufferSourceNode.start()")}}
-
Schedules the start of the playback of the audio asset.
-
{{domxref("AudioBufferSourceNode.stop()")}}
-
Schedules the end of the playback of an audio asset.
-
+- {{domxref("AudioBufferSourceNode.start()")}} + - : Schedules the start of the playback of the audio asset. +- {{domxref("AudioBufferSourceNode.stop()")}} + - : Schedules the end of the playback of an audio asset. -

例子

+## 例子 -

在这个例子中，我们将会创建一个 2 秒的缓冲器，并用白噪音填充它，然后通过{{domxref("AudioBufferSourceNode")}}来播放它. 注释里说明了它的功能。

+在这个例子中，我们将会创建一个 2 秒的缓冲器，并用白噪音填充它，然后通过{{domxref("AudioBufferSourceNode")}}来播放它. 注释里说明了它的功能。 -
-

注意: 你可以 查看在线演示 或 查看源代码.

-
+> **备注：** 你可以 [查看在线演示](http://mdn.github.io/audio-buffer/) 或 [查看源代码](https://github.com/mdn/audio-buffer). -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var button = document.querySelector('button');
 var pre = document.querySelector('pre');
 var myScript = document.querySelector('script');
@@ -97,10 +89,10 @@ var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
 button.onclick = function() {
   // Fill the buffer with white noise;
   //just random values between -1.0 and 1.0
-  for (var channel = 0; channel < channels; channel++) {
+  for (var channel = 0; channel < channels; channel++) {
    // This gives us the actual ArrayBuffer that contains the data
    var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i < frameCount; i++) {
+   for (var i = 0; i < frameCount; i++) {
      // Math.random() is in [0; 1.0]
      // audio needs to be in [-1.0; 1.0]
      nowBuffering[i] = Math.random() * 2 - 1;
@@ -117,22 +109,19 @@ button.onclick = function() {
   source.connect(audioCtx.destination);
   // start the source playing
   source.start();
-}
+} +``` -
-

注意: 音频数据解码的例子请查看 {{domxref("AudioContext.decodeAudioData")}} 页面。

-
+> **备注：** 音频数据解码的例子请查看 {{domxref("AudioContext.decodeAudioData")}} 页面。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.AudioBufferSourceNode")}} -

相关页面

+## 相关页面 - +- [Using the Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/audiobuffersourcenode/start/index.md b/files/zh-cn/web/api/audiobuffersourcenode/start/index.md index 64a13e31820264..e90e7e4a7b336d 100644 --- a/files/zh-cn/web/api/audiobuffersourcenode/start/index.md +++ b/files/zh-cn/web/api/audiobuffersourcenode/start/index.md @@ -2,69 +2,60 @@ title: AudioBufferSourceNode.start() slug: Web/API/AudioBufferSourceNode/start --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -
-

{{ domxref("AudioBufferSourceNode") }} 接口的start()方法用于计划对缓冲区中包含的音频数据的回放，或者立即开始回放。

-
+{{ domxref("AudioBufferSourceNode") }} 接口的`start()`方法用于计划对缓冲区中包含的音频数据的回放，或者立即开始回放。 -

语法

+## 语法 -
AudioBufferSourceNode.start([when][, offset][, duration]);
-
+``` +AudioBufferSourceNode.start([when][, offset][, duration]); +``` -

参数

+### 参数 -
-
when {{optional_inline}}
-
The time 声音开始播放的时间，单位是秒，与 {{domxref("AudioContext")}}使用相同的时间坐标系统。如果 when 小于 ({{domxref("AudioContext.currentTime")}}, 或者是 0，声音立即被播放。 默认值是 0。
-
offset {{optional_inline}}
-
An offset, specified as the number of seconds in the same time coordinate system as the AudioContext, to the time within the audio buffer that playback should begin. For example, to start playback halfway through a 10-second audio clip, offset should be 5. The default value, 0, will begin playback at the beginning of the audio buffer, and offsets past the end of the audio which will be played (based on the audio buffer's {{domxref("AudioBuffer.duration", "duration")}} and/or the {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}} property) are silently clamped to the maximum value allowed. The computation of the offset into the sound is performed using the sound buffer's natural sample rate, rather than the current playback rate, so even if the sound is playing at twice its normal speed, the midway point through a 10-second audio buffer is still 5.
-
duration {{optional_inline}}
-
将要播放的声音的持续时间，指定单位为秒。如果这个参数没有被指定，声音播放到自然结束或者使用{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法结束。使用这个参数的功能与调用 start(when, offset) 和调用 stop(when+duration)完全相同。
-
+- `when` {{optional_inline}} + - : The time 声音开始播放的时间，单位是秒，与 {{domxref("AudioContext")}}使用相同的时间坐标系统。如果 `when` 小于 ({{domxref("AudioContext.currentTime")}}, 或者是 0，声音立即被播放。 **默认值是 0。** +- `offset` {{optional_inline}} + - : An offset, specified as the number of seconds in the same time coordinate system as the `AudioContext`, to the time within the audio buffer that playback should begin. For example, to start playback halfway through a 10-second audio clip, `offset` should be 5. The default value, 0, will begin playback at the beginning of the audio buffer, and offsets past the end of the audio which will be played (based on the audio buffer's {{domxref("AudioBuffer.duration", "duration")}} and/or the {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}} property) are silently clamped to the maximum value allowed. The computation of the offset into the sound is performed using the sound buffer's natural sample rate, rather than the current playback rate, so even if the sound is playing at twice its normal speed, the midway point through a 10-second audio buffer is still 5. +- `duration` {{optional_inline}} + - : 将要播放的声音的持续时间，指定单位为秒。如果这个参数没有被指定，声音播放到自然结束或者使用{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法结束。使用这个参数的功能与调用 `start(when, offset)` 和调用 `stop(when+duration)`完全相同。 -

返回值

+### 返回值 -

{{jsxref("undefined")}}.

+{{jsxref("undefined")}}. -

异常

+### 异常 -
-
TypeError
-
A negative value was specified for one or more of the three time parameters. Please don't attempt to tamper with the laws of temporal physics.
-
InvalidStateError
-
start() 已经被调用。在一个AudioBufferSourceNode的生命周期内只能调用一次这个函数。
-
+- `TypeError` + - : A negative value was specified for one or more of the three time parameters. Please don't attempt to tamper with the laws of temporal physics. +- `InvalidStateError` + - : `start()` 已经被调用。在一个`AudioBufferSourceNode`的生命周期内只能调用一次这个函数。 -

例子

+## 例子 -

The most simple example just starts the audio buffer playing from the beginning — you don't need to specify any parameters in this case:

+The most simple example just starts the audio buffer playing from the beginning — you don't need to specify any parameters in this case: -
source.start();
+```js +source.start(); +``` -

The following more complex example will, 1 second from now, start playing 10 seconds worth of sound starting 3 seconds into the audio buffer.

+The following more complex example will, 1 second from now, start playing 10 seconds worth of sound starting 3 seconds into the audio buffer. -
source.start(audioCtx.currentTime + 1,3,10);
+```js +source.start(audioCtx.currentTime + 1,3,10); +``` -
-

For a more complete example showing start() in use, check out our {{domxref("AudioContext.decodeAudioData()")}} example, You can also run the code example live, or view the source.

-
+> **备注：** For a more complete example showing `start()` in use, check out our {{domxref("AudioContext.decodeAudioData()")}} example, You can also [run the code example live](http://mdn.github.io/decode-audio-data/), or [view the source](https://github.com/mdn/decode-audio-data). -

Specifications

+## Specifications {{Specifications}} -

Browser compatibility

+## Browser compatibility -
+{{Compat("api.AudioBufferSourceNode.start")}} +## See also -

{{Compat("api.AudioBufferSourceNode.start")}}

-
- -

See also

- - +- [Using the Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/audiocontext/close/index.md b/files/zh-cn/web/api/audiocontext/close/index.md index c81fd10a8eff31..eae2b1f5ef7f81 100644 --- a/files/zh-cn/web/api/audiocontext/close/index.md +++ b/files/zh-cn/web/api/audiocontext/close/index.md @@ -2,48 +2,48 @@ title: AudioContext.close() slug: Web/API/AudioContext/close --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -

{{ domxref("AudioContext") }}的close()方法可以关闭 audio context，同时释放占用的所有系统资源。

+{{ domxref("AudioContext") }}的`close()`方法可以关闭 audio context，同时释放占用的所有系统资源。 -

关闭的 context 不能用来创建新节点，但可以解码音频数据，创建 buffer 等等

+关闭的 context 不能用来创建新节点，但可以解码音频数据，创建 buffer 等等 -

该函数不会自动释放所有用AudioContext 创建的对象，除非其他引用也都已经解除了。但是，它会强制释放所有可能阻止其它AudioContexts 被创建或使用的系统音频资源。挂起 audio context 中音频时间的进度，并停止对音频数据的处理。所有的 AudioContext 创建/阻塞资源都被释放后，返回的{{jsxref("Promise")}}才会被释放。如果在一个{{domxref("OfflineAudioContext")}}上调用该方法，则会抛出INVALID_STATE_ERR 异常。

+该函数不会自动释放所有用`AudioContext 创建的对象`，除非其他引用也都已经解除了。但是，它会强制释放所有可能阻止其它`AudioContexts 被创建或使用`的系统音频资源。挂起 audio context 中音频时间的进度，并停止对音频数据的处理。所有的 AudioContext 创建/阻塞资源都被释放后，返回的{{jsxref("Promise")}}才会被释放。如果在一个{{domxref("OfflineAudioContext")}}上调用该方法，则会抛出`INVALID_STATE_ERR` 异常。 -

语法

+## 语法 -
var audioCtx = new AudioContext();
+```js
+var audioCtx = new AudioContext();
 audioCtx.close().then(function() { ... });
-
+``` -

返回值

+### 返回值 -

一个 resolve void 值得 {{jsxref("Promise")}}。

+一个 resolve void 值得 {{jsxref("Promise")}}。 -

例子

+## 例子 -

下面这段代码是AudioContext states demo (直接运行) 中的，点击停止按钮调用close()。promise 释放后，回到初始状态。

+下面这段代码是[AudioContext states demo](https://github.com/mdn/audiocontext-states/settings) ([直接运行](http://mdn.github.io/audiocontext-states/)) 中的，点击停止按钮调用`close()`。promise 释放后，回到初始状态。 -
stopBtn.onclick = function() {
+```js
+stopBtn.onclick = function() {
   audioCtx.close().then(function() {
     startBtn.removeAttribute('disabled');
     susresBtn.setAttribute('disabled','disabled');
     stopBtn.setAttribute('disabled','disabled');
   });
 }
-
+``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.AudioContext.close")}} -

另见

+## 另见 - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) +- [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) diff --git a/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.md b/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.md index 5082d0e2b35c76..88dfc94d95f0ef 100644 --- a/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.md +++ b/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.md @@ -2,39 +2,36 @@ title: AudioContext.createMediaElementSource() slug: Web/API/AudioContext/createMediaElementSource --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -
-

{{ domxref("AudioContext") }} 接口的 createMediaElementSource() 方法用于创建一个新的 {{ domxref("MediaElementAudioSourceNode") }} 对象，输入某个存在的 HTML {{htmlelement("audio")}} or {{htmlelement("video")}} 元素，对应的音频即可被播放或者修改。

-
+{{ domxref("AudioContext") }} 接口的 `createMediaElementSource()` 方法用于创建一个新的 {{ domxref("MediaElementAudioSourceNode") }} 对象，输入某个存在的 HTML {{htmlelement("audio")}} or {{htmlelement("video")}} 元素，对应的音频即可被播放或者修改。 -

为寻求更多关于媒体元素音频源节点的具体信息，请查阅 {{ domxref("MediaElementAudioSourceNode") }} 参考页。

+为寻求更多关于媒体元素音频源节点的具体信息，请查阅 {{ domxref("MediaElementAudioSourceNode") }} 参考页。 -

语法

+## 语法 -
var audioCtx = new AudioContext();
-var source = audioCtx.createMediaElementSource(myMediaElement);
+```js +var audioCtx = new AudioContext(); +var source = audioCtx.createMediaElementSource(myMediaElement); +``` -

参数

+### 参数 -
-
myMediaElement
-
某个被期待被录入音频处理图修改的 {{domxref("HTMLMediaElement")}} 对象。
-
+- `myMediaElement` + - : 某个被期待被录入音频处理图修改的 {{domxref("HTMLMediaElement")}} 对象。 -

返回值

+### 返回值 -

一个 {{domxref("MediaElementAudioSourceNode")}} 对象。

+一个 {{domxref("MediaElementAudioSourceNode")}} 对象。 -

示例

+## 示例 -

该示例由 {{htmlelement("audio") }} 元素，通过使用 createMediaElementSource() 方法，创建了一个音源，将其通过 {{ domxref("GainNode") }} 节点，输出到{{ domxref("AudioDestinationNode") }} 节点以播放。当鼠标指针移动时，updatePage() 函数被调用，该函数计算当前鼠标 Y 坐标与页面高度的比值， 改变 {{ domxref("GainNode") }} 节点的值以调整音量。您就可以通过鼠标上下移动而改变音乐的音量了。

+该示例由 {{htmlelement("audio") }} 元素，通过使用 `createMediaElementSource()` 方法，创建了一个音源，将其通过 {{ domxref("GainNode") }} 节点，输出到{{ domxref("AudioDestinationNode") }} 节点以播放。当鼠标指针移动时，`updatePage()` 函数被调用，该函数计算当前鼠标 Y 坐标与页面高度的比值， 改变 {{ domxref("GainNode") }} 节点的值以调整音量。您就可以通过鼠标上下移动而改变音乐的音量了。 -
-

Note: 您也可以 浏览该示例的在线演示, 或者 浏览源代码.

-
+> **备注：** 您也可以 [浏览该示例的在线演示](http://mdn.github.io/webaudio-examples/media-source-buffer/), 或者 [浏览源代码](https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer). -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var myAudio = document.querySelector('audio');
 var pre = document.querySelector('pre');
 var myScript = document.querySelector('script');
@@ -69,22 +66,19 @@ function updatePage(e) {
 // and the gainNode to the destination, so we can play the
 // music and adjust the volume using the mouse cursor
 source.connect(gainNode);
-gainNode.connect(audioCtx.destination);
+gainNode.connect(audioCtx.destination); +``` -
-

Note: 作为调用 createMediaElementSource() 的结果，{{domxref("HTMLMediaElement")}} 的播放将会由 AudioContext 的音频处理图接管。所以对媒体进行播放/暂停等操作仍可通过 media API 与播放器面板来进行。

-
+> **备注：** 作为调用 `createMediaElementSource()` 的结果，{{domxref("HTMLMediaElement")}} 的播放将会由 AudioContext 的音频处理图接管。所以对媒体进行播放/暂停等操作仍可通过 media API 与播放器面板来进行。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.AudioContext.createMediaElementSource")}} -

相关链接

+## 相关链接 - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/audiodestinationnode/index.md b/files/zh-cn/web/api/audiodestinationnode/index.md index e8d050d2039c34..dbf97ac9916e88 100644 --- a/files/zh-cn/web/api/audiodestinationnode/index.md +++ b/files/zh-cn/web/api/audiodestinationnode/index.md @@ -2,75 +2,71 @@ title: AudioDestinationNode slug: Web/API/AudioDestinationNode --- -

{{APIRef("Web Audio API")}}

+{{APIRef("Web Audio API")}} -
-

AudioDestinationNode接口表示音频图形在特定情况下的最终输出地址 - 通常为扬声器。当使用OfflineAudioContext时为音频记录节点。

+`AudioDestinationNode`接口表示音频图形在特定情况下的最终输出地址 - 通常为扬声器。当使用`OfflineAudioContext`时为音频记录节点。 -

AudioDestinationNode 没有输出（因为它就是输出，它存在于视频图标中后 AudioNode 不能被链接），有一个输入。输入信道的数量必须是 0 至 maxChannelCount 之间的值或是一个异常。

-
+AudioDestinationNode 没有输出（因为它就是输出，它存在于视频图标中后 AudioNode 不能被链接），有一个输入。输入信道的数量必须是 0 至 maxChannelCount 之间的值或是一个异常。 -

AudioDestinationNode 可以通过 {{domxref("AudioContext.destination")}} 属性来查看。

+`AudioDestinationNode` 可以通过 {{domxref("AudioContext.destination")}} 属性来查看。 - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
Number of inputs1
Number of outputs0
Channel count mode"explicit"
Channel count2
Channel interpretation"speakers"
Number of inputs1
Number of outputs0
Channel count mode"explicit"
Channel count2
Channel interpretation"speakers"
-

属性

+## 属性 -

从{{domxref("AudioNode")}}继承的属性.

+_从{{domxref("AudioNode")}}继承的属性_. -
-
{{domxref("AudioDestinationNode.maxChannelCount")}}
-
以无符长整型返回物理设备可以处理的最大通道数量。
-
+- {{domxref("AudioDestinationNode.maxChannelCount")}} + - : 以无符长整型返回物理设备可以处理的最大通道数量。 -

方法

+## 方法 -

继承{{domxref("AudioNode")}}的方法。

+*继承 {{domxref("AudioNode")}} 的方法。* -

例子

+## 例子 -

AudioDestinationNode 不需要使用复杂的设置 — 在默认情况下只是简单的代表使用者系统的输出 (例如他们的扬声器)，这样你就可以使用几行代码来与内置音频图标挂钩：

+`AudioDestinationNode 不需要使用复杂的设置` — 在默认情况下只是简单的代表使用者系统的输出 (例如他们的扬声器)，这样你就可以使用几行代码来与内置音频图标挂钩： -
var audioCtx = new AudioContext();
+```js
+var audioCtx = new AudioContext();
 var source = audioCtx.createMediaElementSource(myMediaElement);
 source.connect(gainNode);
-gainNode.connect(audioCtx.destination);
+gainNode.connect(audioCtx.destination); +``` -

更多的例子，请查看 MDN Web Audio 示例，例如Voice-change-o-matic 或者 Violent Theremin.

+更多的例子，请查看 MDN Web Audio 示例，例如[Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) 或者 [Violent Theremin](http://mdn.github.io/violent-theremin/). -

标准

+## 标准 {{Specifications}} -

浏览器支持

+## 浏览器支持 {{Compat("api.AudioDestinationNode")}} -

其他

+## 其他 - +- [Using the Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/audiolistener/index.md b/files/zh-cn/web/api/audiolistener/index.md index b06e7321063148..8edc3bff182da8 100644 --- a/files/zh-cn/web/api/audiolistener/index.md +++ b/files/zh-cn/web/api/audiolistener/index.md @@ -2,96 +2,75 @@ title: AudioListener slug: Web/API/AudioListener --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -

AudioListener 接口代表了人听音乐场景时声音的位置和方向，和用于音频空间化。 所有{{domxref("PannerNode")}} 相对于 AudioListener 的空间化储存在{{domxref("BaseAudioContext.listener")}} 属性里。

+`AudioListener` 接口代表了人听音乐场景时声音的位置和方向，和用于[音频空间化](/zh-CN/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics)。 所有{{domxref("PannerNode")}} 相对于 `AudioListener` 的空间化储存在{{domxref("BaseAudioContext.listener")}} 属性里。 -

特别需要注意的是一个环境中只能有一个收听者而且这不是{{domxref("AudioNode")}}.

+特别需要注意的是一个环境中只能有一个收听者而且这不是{{domxref("AudioNode")}}. -

We see the position, up and front vectors of an AudioListener, with the up and front vectors at 90° from the other.

+![We see the position, up and front vectors of an AudioListener, with the up and front vectors at 90° from the other.](webaudiolistenerreduced.png) -

Properties

+## Properties -
-

position,forward 和 up 值是以不同的语法设置和检索的。检索是通过访问来实现的，比如说 AudioListener.positionX ，设置相同属性时可以通过使用 AudioListener.positionX.value 来完成。 这就是为什么他们不被标记为只读， 这在规范的接口定义中就是这么说的。

-
+> **备注：** position,forward 和 up 值是以不同的语法设置和检索的。检索是通过访问来实现的，比如说 `AudioListener.positionX` ，设置相同属性时可以通过使用 `AudioListener.positionX.value` 来完成。 这就是为什么他们不被标记为只读， 这在规范的接口定义中就是这么说的。 -
-
{{domxref("AudioListener.positionX")}}
-
在笛卡尔右手坐标系中代表一个收听者的水平坐标。默认值是 0.
-
{{domxref("AudioListener.positionY")}}
-
Represents the vertical position of the listener in a right-hand cartesian coordinate sytem. The default is 0.
-
{{domxref("AudioListener.positionZ")}}
-
Represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate sytem. The default is 0.
-
{{domxref("AudioListener.forwardX")}}
-
在相同的笛卡尔坐标系中代表了收听者的面向的方向的水平坐标，就像 (positionX, positionY, 和 positionZ) 值一样。前方和上方值互相线性无关。默认值是 0.
-
{{domxref("AudioListener.forwardY")}}
-
Represents the vertical position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 0.
-
{{domxref("AudioListener.forwardZ")}}
-
Represents the longitudinal (back and forth) position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is -1.
-
{{domxref("AudioListener.upX")}}
-
代表了收听者头顶在笛卡尔坐标系的水平位置，就像 (positionX, positionY, 和positionZ) 值一样。 前方和上方值线性无关。默认值是 0.
-
{{domxref("AudioListener.upY")}}
-
Represents the vertical position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 1.
-
{{domxref("AudioListener.upZ")}}
-
Represents the longitudinal (back and forth) position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 0.
-
+- {{domxref("AudioListener.positionX")}} + - : 在笛卡尔右手坐标系中代表一个收听者的水平坐标。默认值是 0. +- {{domxref("AudioListener.positionY")}} + - : Represents the vertical position of the listener in a right-hand cartesian coordinate sytem. The default is 0. +- {{domxref("AudioListener.positionZ")}} + - : Represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate sytem. The default is 0. +- {{domxref("AudioListener.forwardX")}} + - : 在相同的笛卡尔坐标系中代表了收听者的面向的方向的水平坐标，就像 (`positionX`, `positionY`, 和 `positionZ`) 值一样。前方和上方值互相线性无关。默认值是 0. +- {{domxref("AudioListener.forwardY")}} + - : Represents the vertical position of the listener's forward direction in the same cartesian coordinate sytem as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is 0. +- {{domxref("AudioListener.forwardZ")}} + - : Represents the longitudinal (back and forth) position of the listener's forward direction in the same cartesian coordinate sytem as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is -1. +- {{domxref("AudioListener.upX")}} + - : 代表了收听者头顶在笛卡尔坐标系的水平位置，就像 (`positionX`, `positionY`, 和`positionZ`) 值一样。 前方和上方值线性无关。默认值是 0. +- {{domxref("AudioListener.upY")}} + - : Represents the vertical position of the top of the listener's head in the same cartesian coordinate sytem as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is 1. +- {{domxref("AudioListener.upZ")}} + - : Represents the longitudinal (back and forth) position of the top of the listener's head in the same cartesian coordinate sytem as the position (`positionX`, `positionY`, and `positionZ`) values. The forward and up values are linearly independent of each other. The default is 0. -

Methods

+## Methods -
-
{{domxref("AudioListener.setOrientation()")}} {{deprecated_inline}}
-
设置收听者的方向。
-
{{domxref("AudioListener.setPosition()")}} {{deprecated_inline}}
-
设置收听者的位置。
-
+- {{domxref("AudioListener.setOrientation()")}} {{deprecated_inline}} + - : 设置收听者的方向。 +- {{domxref("AudioListener.setPosition()")}} {{deprecated_inline}} + - : 设置收听者的位置。 -
-

Note: Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox, Internet Explorer and Safari.

-
+> **备注：** Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox, Internet Explorer and Safari. -

Deprecated features

+## Deprecated features -
-
{{domxref("AudioListener.dopplerFactor")}} {{Deprecated_Inline}}
-
一个 Double 值，表示在呈现 多普勒效应 时要使用的音高偏移量。
-
{{domxref("AudioListener.speedOfSound")}} {{Deprecated_Inline}}
-
一个 Double 值代表了声音的速度，以米每秒的单位计算。
-
+- {{domxref("AudioListener.dopplerFactor")}} {{Deprecated_Inline}} + - : 一个 Double 值，表示在呈现 [多普勒效应](http://en.wikipedia.org/wiki/Doppler_effect) 时要使用的音高偏移量。 +- {{domxref("AudioListener.speedOfSound")}} {{Deprecated_Inline}} + - : 一个 Double 值代表了声音的速度，以米每秒的单位计算。 -

In a previous version of the specification, the dopplerFactor and speedOfSound properties and the setPosition() method could be used to control the doppler effect applied to {{domxref("AudioBufferSourceNode")}}s connected downstream — these would be pitched up and down according to the relative speed of the {{domxref("PannerNode")}} and the {{domxref("AudioListener")}}. These features had a number of problems:

+In a previous version of the specification, the `dopplerFactor` and `speedOfSound` properties and the `setPosition()` method could be used to control the doppler effect applied to {{domxref("AudioBufferSourceNode")}}s connected downstream — these would be pitched up and down according to the relative speed of the {{domxref("PannerNode")}} and the {{domxref("AudioListener")}}. These features had a number of problems: -
    -
  • Only {{domxref("AudioBufferSourceNode")}}s were pitched up or down, not other source nodes.
    • -
  • The behavior to adopt when an {{domxref("AudioBufferSourceNode")}} was connected to multiple {{domxref("PannerNode")}}s was unclear.
    • -
  • Because the velocity of the panner and the listener were not {{domxref("AudioParam")}}s, the pitch modification could not be smoothly applied, resulting in audio glitches.
    • -
+- Only {{domxref("AudioBufferSourceNode")}}s were pitched up or down, not other source nodes. +- The behavior to adopt when an {{domxref("AudioBufferSourceNode")}} was connected to multiple {{domxref("PannerNode")}}s was unclear. +- Because the velocity of the panner and the listener were not {{domxref("AudioParam")}}s, the pitch modification could not be smoothly applied, resulting in audio glitches. -

Because of these issues, these properties and methods have been removed.

+Because of these issues, these properties and methods have been removed. -

The setOrientation() and setPosition() methods have been replaced by setting their property value equivilents. For example setPosition(x, y, z) can be achieved by setting positionX.value, positionY.value, and positionZ.value respectively.

+The `setOrientation()` and `setPosition()` methods have been replaced by setting their property value equivilents. For example `setPosition(x, y, z)` can be achieved by setting `positionX.value`, `positionY.value`, and `positionZ.value` respectively. -
-
+## Example -

Example

+{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}} -

{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}

- -

Specifications

+## Specifications {{Specifications}} -

Browser compatibility

- -
- +## Browser compatibility -

{{Compat("api.AudioListener")}}

-
+{{Compat("api.AudioListener")}} -

See also

+## See also - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/audionode/index.md b/files/zh-cn/web/api/audionode/index.md index d18f7d26f2bae0..75947374aa32e5 100644 --- a/files/zh-cn/web/api/audionode/index.md +++ b/files/zh-cn/web/api/audionode/index.md @@ -2,276 +2,280 @@ title: AudioNode slug: Web/API/AudioNode --- -
{{ APIRef("Web Audio API") }} {{SeeCompatTable}}
+{{ APIRef("Web Audio API") }} {{SeeCompatTable}} -

AudioNodes participating in an AudioContext create a audio routing graph.AudioNode 接口是一个处理音频的通用模块，比如一个音频源 (e.g. 一个 HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} 元素), 一个音频地址或者一个中间处理模块 (e.g. 一个过滤器如 {{domxref("BiquadFilterNode")}}, 或一个音量控制器如 {{domxref("GainNode")}}).

+![AudioNodes participating in an AudioContext create a audio routing graph.](webaudiobasics.png)**`AudioNode`** 接口是一个处理音频的通用模块，比如一个音频源 (e.g. 一个 HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} 元素), 一个音频地址或者一个中间处理模块 (e.g. 一个过滤器如 {{domxref("BiquadFilterNode")}}, 或一个音量控制器如 {{domxref("GainNode")}}). -

一个 AudioNode 既有输入也有输出。输入与输出都有一定数量的通道。只有一个输出而没有输入的 AudioNode 叫做音频源。

+一个 `AudioNode` 既有输入也有输出。输入与输出都有一定数量的通道。_只有一个输出而没有输入的_ `AudioNode` 叫做音频源。 -

处理多个 AudioNode 时，一般来说，一个模块读取它的输入，做一些处理。后输出新生成的结果。

+处理多个 `AudioNode` 时，一般来说，一个模块读取它的输入，做一些处理。后输出新生成的结果。 -

不同的模块可以连接在一起构建一个处理图。 这样一个处理图包含 {{domxref("AudioContext")}}。 每个 AudioNode 只有一个这样的上下文。

+不同的模块可以连接在一起构建一个处理图。 这样一个处理图包含 {{domxref("AudioContext")}}。 每个 `AudioNode` 只有一个这样的上下文。 -

一个 AudioNode 可以作为事件的目标，所以它实现了 {{domxref("EventTarget")}} 接口。

+一个 `AudioNode` 可以作为事件的目标，所以它实现了 {{domxref("EventTarget")}} 接口。 -

属性

+## 属性 -
-
{{domxref("AudioNode.context")}} {{readonlyInline}}
-
链接到关联的 {{domxref("AudioContext")}}，处理图中模块的上下文对象。
-
+- {{domxref("AudioNode.context")}} {{readonlyInline}} + - : 链接到关联的 {{domxref("AudioContext")}}，处理图中模块的上下文对象。 +- {{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}} + - : 返回这个 node 需要的输入数量. Source nodes are defined as nodes having a `numberOfInputs` attributes with a value of `0`. +- {{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}} + - : 返回这个 node 的输出数量. Destination nodes, like `AudioDestinationNode`, have a value of `0` for this attribute. +- {{domxref("AudioNode.channelCount")}} + - : Represents an integer used in determining how many channels outputs must contains. Its usage and precise definition depends of the value of `AudioNode.channelCountMode`: it is ignored if the value is `"max"`, used as a maximum value for `"clamped-max"`, or used as the effective value for `"explicit"`. +- {{domxref("AudioNode.channelCountMode")}} -
-
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
-
返回这个 node 需要的输入数量. Source nodes are defined as nodes having a numberOfInputs attributes with a value of 0.
-
+ - : Represents an enumerated value describing the way channels must be matched between the inputs and the outputs. Possible values are: -
-
{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
-
返回这个 node 的输出数量. Destination nodes, like AudioDestinationNode, have a value of 0 for this attribute.
-
+ | Value | Description | Used as default for the following `AudioNode` children | + | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | + | `"max"` | The number of channels is the maximum of the number of channels all connections. That implies that `channelCount` is ignored and only up-mixing happens | {{domxref("GainNode")}}, {{domxref("DelayNode")}}, {{domxref("ScriptProcessorNode")}}, {{domxref("ChannelSplitterNode")}}, {{domxref("ChannelMergerNode")}}, {{domxref("BiquadFilterNode")}}, {{domxref("WaveShaperNode")}} | + | `"clamped-max"` | The number of channels is the maximum of the number of channels of all connections, _clamped_ to the value of `channelCount`. | {{domxref("PannerNode")}}, {{domxref("ConvolverNode")}} | + | `"explicit"` | The number of channels is defined by the value of `channelCount`. | {{domxref("AudioDestinationNode")}}, {{domxref("AnalyserNode")}}, {{domxref("DynamicsCompressorNode")}} | -
-
{{domxref("AudioNode.channelCount")}}
-
Represents an integer used in determining how many channels outputs must contains. Its usage and precise definition depends of the value of AudioNode.channelCountMode: it is ignored if the value is "max", used as a maximum value for "clamped-max", or used as the effective value for "explicit".
-
+- {{domxref("AudioNode.channelInterpretation")}} -
-
{{domxref("AudioNode.channelCountMode")}}
-
Represents an enumerated value describing the way channels must be matched between the inputs and the outputs. Possible values are: - - - - - - - - - - - - - - - - - - - - - - - - - -
ValueDescriptionUsed as default for the following AudioNode children
"max"The number of channels is the maximum of the number of channels all connections. That implies that channelCount is ignored and only up-mixing happens{{domxref("GainNode")}}, {{domxref("DelayNode")}}, {{domxref("ScriptProcessorNode")}}, {{domxref("ChannelSplitterNode")}}, {{domxref("ChannelMergerNode")}}, {{domxref("BiquadFilterNode")}}, {{domxref("WaveShaperNode")}}
"clamped-max"The number of channels is the maximum of the number of channels of all connections, clamped to the value of channelCount.{{domxref("PannerNode")}}, {{domxref("ConvolverNode")}}
"explicit"The number of channels is defined by the value of channelCount.{{domxref("AudioDestinationNode")}}, {{domxref("AnalyserNode")}}, {{domxref("DynamicsCompressorNode")}}
-
-
{{domxref("AudioNode.channelInterpretation")}}
-
Represents an enumerated value describing the meaning of the channels. This interpretation will define how the up-mixing and the down-mixing will happen.
- The possible values are "speakers" or "discrete". In the case of "speakers", the ordering of the channels have the following meaning, and the channels are often represented by a standard abbreviation: - - - - - - - - - - - - - - - - - - - -
Mono0: M: mono
Stereo0: L: left
- 1: R: right
Quad0: L: left
- 1: R: right
- 2: SL: surround left
- 3: SR: surround right
5.10: L: left
- 1: R: right
- 2: C: center
- 3: LFE: subwoofer
- 4: SL: surround left
- 5: SR: surround right
- When the amount of channels doesn't match between an input and an output, up- or down-mixing happens according the following rules: + - : Represents an enumerated value describing the meaning of the channels. This interpretation will define how the up-mixing and the down-mixing will happen. + The possible values are `"speakers"` or `"discrete"`. In the case of `"speakers"`, the ordering of the channels have the following meaning, and the channels are often represented by a standard abbreviation: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
InterpretationInput channelsOutput channelsMixing rules
speakers1 (Mono)2 (Stereo)Up-mix from mono to stereo.
- The M input channel is used for both output channels (L and R).
- output.L = input.M
- output.R = input.M
1 (Mono)4 (Quad)Up-mix from mono to quad.
- The M input channel is used for non-surround output channels (L and R). Surround output channels (SL and SR) are silent.
- output.L = input.M
- output.R = input.M
- output.SL = 0
- output.SR = 0
1 (Mono)6 (5.1)Up-mix from mono to 5.1.
- The M input channel is used for the center output channel (C). All the others (L, R, LFE, SL, and SR) are silent.
- output.L = 0
- output.R = 0
- output.C = input.M
- output.LFE = 0
- output.SL = 0
- output.SR = 0
2 (Stereo)1 (Mono)Down-mix from stereo to mono.
- Both input channels (L and R) are equally combined to produce the unique output channel (M).
- output.M = 0.5 * (input.L + input.R)
2 (Stereo)4 (Quad)Up-mix from stereo to quad.
- The L and R input channels are used for their non-surround respective output channels (L and R). Surround output channels (SL and SR) are silent.
- output.L = input.L
- output.R = input.R
- output.SL = 0
- output.SR = 0
2 (Stereo)6 (5.1)Up-mix from stereo to 5.1.
- The L and R input channels are used for their non-surround respective output channels (L and R). Surround output channels (SL and SR), as well as the center (C) and subwoofer (LFE) channels, are left silent.
- output.L = input.L
- output.R = input.R
- output.C = 0
- output.LFE = 0
- output.SL = 0
- output.SR = 0
4 (Quad)1 (Mono)Down-mix from quad to mono.
- All four input channels (L, R, SL, and SR) are equally combined to produce the unique output channel (M).
- output.M = 0.25 * (input.L + input.R + input.SL + input.SR)
4 (Quad)2 (Stereo)Down-mix from quad to mono.
- Both left input channels (L and SL) are equally combined to produce the unique left output channel (L). And similarly, both right input channels (R and SR) are equally combined to produce the unique right output channel (R).
- output.L = 0.5 * (input.L + input.SL)
- output.R = 0.5 * (input.R + input.SR)
4 (Quad)6 (5.1)Up-mix from quad to 5.1.
- The L, R, SL, and SR input channels are used for their respective output channels (L and R). Center (C) and subwoofer (LFE) channels are left silent.
- output.L = input.L
- output.R = input.R
- output.C = 0
- output.LFE = 0
- output.SL = input.SL
- output.SR = input.SR
6 (5.1)1 (Mono)Down-mix from 5.1 to stereo.
- The left and right, both surround or not, and the central channels are all mixed together. The surround channels are slightly attenuated and the regular lateral channels are power-compensated to make them count as a single channel. The subwoofer (LFE) channel is lost.
- output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)
6 (5.1)2 (Stereo)Down-mix from 5.1 to stereo.
- The central (C) is summed with each lateral surround channels (SL or SR) and mixed to each lateral channel. As it is mixed in two channels, it is mixed at lower power, that is they are multiplied by √2/2. The subwoofer (LFE) channel is lost.
- output.L = input.L + 0.7071 * (input.C + input.SL)
- output.R = input.R + 0.7071 * (input.C + input.SR)
6 (5.1)4 (Quad)Down-mix from 5.1 to quad.
- The central (C) is mixed with the lateral non-surround channels (L and R). As it is mixed in two channels, it is mixed at lower power, that is they are multiplied by √2/2. The surround channels are passed unchanged. The subwoofer (LFE) channel is lost.
- output.L = input.L + 0.7071 * input.C
- output.R = input.R
- output.SL = input.SL
- output.SR = input.SR
OtherAs these are non-standard channel layout, they are handled as if channelInterpretation was set to discrete.
- The specification explicitly allow the future definition of new speakers layout. This fallback is therefore not future proof as the behavior of the browsers for a specific amount of channels may change in the future.
discreteany (x)any (y) where x<yUp-mix discrete channels.
- Fill each output channel with its input counterpart, that is the input channel with the same index. Channels with no corresponding input channels are left silent.
any (x)any (y) where x>yDown-mix discrete channels.
- Fill each output channel with its input counterpart, that is the input channel with the same index. Input channels with no corresponding output channels are dropped.
-
-
+ | Value | Description | + | -------- | -------------------------------------------------------------------------------------------------- | + | _Mono_ | `0: M: mono` | + | _Stereo_ | `0: L: left 1: R: right` | + | _Quad_ | `0: L: left 1: R: right 2: SL: surround left 3: SR: surround right` | + | _5.1_ | `0: L: left 1: R: right 2: C: center 3: LFE: subwoofer 4: SL: surround left 5: SR: surround right` | -

方法

+ When the amount of channels doesn't match between an input and an output, up- or down-mixing happens according the following rules: -

Also implements methods from the interface {{domxref("EventTarget")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterpretationInput channelsOutput channelsMixing rules
speakers1 (Mono)2 (Stereo) + Up-mix from mono to stereo.
The M input + channel is used for both output channels (L and + R).
output.L = input.M
output.R = input.M +
1 (Mono)4 (Quad) + Up-mix from mono to quad.
The M input channel + is used for non-surround output channels (L and + R). Surround output channels (SL and + SR) are silent.
output.L = input.M
output.R = input.M
output.SL = 0
output.SR + = 0 +
1 (Mono)6 (5.1) + Up-mix from mono to 5.1.
The M input channel + is used for the center output channel (C). All the others + (L, R, LFE, SL, and + SR) are silent.
output.L = 0
output.R = 0
output.C = input.M
output.LFE = 0
output.SL = 0
output.SR + = 0 +
2 (Stereo)1 (Mono) + Down-mix from stereo to mono.
Both input channels (L + and R) are equally combined to produce the unique output + channel (M).
output.M = 0.5 * (input.L + input.R) +
2 (Stereo)4 (Quad) + Up-mix from stereo to quad.
The L and + R input channels are used for their non-surround respective + output channels (L and R). Surround output + channels (SL and SR) are silent.
output.L = input.L
output.R = input.R
output.SL = 0
output.SR + = 0 +
2 (Stereo)6 (5.1) + Up-mix from stereo to 5.1.
The L and + R input channels are used for their non-surround respective + output channels (L and R). Surround output + channels (SL and SR), as well as the center + (C) and subwoofer (LFE) channels, are left + silent.
output.L = input.L
output.R = input.R
output.C = 0
output.LFE + = 0
output.SL = 0
output.SR = 0 +
4 (Quad)1 (Mono) + Down-mix from quad to mono.
All four input channels + (L, R, SL, and SR) + are equally combined to produce the unique output channel + (M).
output.M = 0.25 * (input.L + input.R + input.SL + input.SR) +
4 (Quad)2 (Stereo) + Down-mix from quad to mono.
Both left input channels + (L and SL) are equally combined to produce the + unique left output channel (L). And similarly, both right + input channels (R and SR) are equally combined + to produce the unique right output channel (R).
output.L = 0.5 * (input.L + input.SL)
output.R = 0.5 * (input.R + input.SR) +
4 (Quad)6 (5.1) + Up-mix from quad to 5.1.
The L, + R, SL, and SR input channels are + used for their respective output channels (L and + R). Center (C) and subwoofer + (LFE) channels are left silent.
output.L = input.L
output.R = input.R
output.C = 0
output.LFE + = 0
output.SL = input.SL
output.SR = input.SR +
6 (5.1)1 (Mono) + Down-mix from 5.1 to stereo.
The left and right, both + surround or not, and the central channels are all mixed together. The + surround channels are slightly attenuated and the regular lateral + channels are power-compensated to make them count as a single channel. + The subwoofer (LFE) channel is lost.
output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + + input.SR) +
6 (5.1)2 (Stereo) + Down-mix from 5.1 to stereo.
The central (C) + is summed with each lateral surround channels (SL or + SR) and mixed to each lateral channel. As it is mixed in + two channels, it is mixed at lower power, that is they are multiplied by + √2/2. The subwoofer (LFE) channel is lost.
output.L = input.L + 0.7071 * (input.C + input.SL)
output.R = + input.R + 0.7071 * (input.C + input.SR) +
6 (5.1)4 (Quad) + Down-mix from 5.1 to quad.
The central (C) is + mixed with the lateral non-surround channels (L and + R). As it is mixed in two channels, it is mixed at lower + power, that is they are multiplied by √2/2. The surround + channels are passed unchanged. The subwoofer (LFE) channel + is lost.
output.L = input.L + 0.7071 * input.C
output.R = input.R
output.SL + = input.SL
output.SR = input.SR +
Other + As these are non-standard channel layout, they are handled as if + channelInterpretation was set to + discrete.
The specification explicitly allow the + future definition of new speakers layout. This fallback is therefore not + future proof as the behavior of the browsers for a specific amount of + channels may change in the future. +
discreteany (x)any (y) where x<y + Up-mix discrete channels.
Fill each output channel with + its input counterpart, that is the input channel with the same index. + Channels with no corresponding input channels are left silent. +
any (x)any (y) where x>y + Down-mix discrete channels.
Fill each output channel with + its input counterpart, that is the input channel with the same index. + Input channels with no corresponding output channels are dropped. +
-
-
{{domxref("AudioNode.connect(AudioNode)")}}
-
允许将此节点的一个输出连接到另一个节点的一个输入。
-
{{domxref("AudioNode.connect(AudioParam)")}}
-
允许将此节点的一个输出连接到音频参数的一个输入。
-
{{domxref("AudioNode.disconnect()")}}
-
允许将这个节点从另一个节点断开连接。
-
+## 方法 -

例子

+_Also implements methods from the interface_ {{domxref("EventTarget")}}. +- {{domxref("AudioNode.connect(AudioNode)")}} + - : 允许将此节点的一个输出连接到另一个节点的一个输入。 +- {{domxref("AudioNode.connect(AudioParam)")}} + - : 允许将此节点的一个输出连接到音频参数的一个输入。 +- {{domxref("AudioNode.disconnect()")}} + - : 允许将这个节点从另一个节点断开连接。 +## 例子 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.AudioNode")}} -

相关内容

+## 相关内容 -
    -
  • Using Web Audio
    • -
+- Using Web Audio diff --git a/files/zh-cn/web/api/audioscheduledsourcenode/index.md b/files/zh-cn/web/api/audioscheduledsourcenode/index.md index 8002aeb9823662..7368537232c039 100644 --- a/files/zh-cn/web/api/audioscheduledsourcenode/index.md +++ b/files/zh-cn/web/api/audioscheduledsourcenode/index.md @@ -2,55 +2,41 @@ title: AudioScheduledSourceNode slug: Web/API/AudioScheduledSourceNode --- -
{{APIRef("Web Audio API")}}
+{{APIRef("Web Audio API")}} -

AudioScheduledSourceNode 接口作为 web 音频 API 的一部分，是几种具有在特定时刻开始与停止能力的音频源节点接口的父接口。更具体地来说，这个接口定义了{{domxref("AudioScheduledSourceNode.start", "start()")}} 和{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法，以及{{domxref("AudioScheduledSourceNode.onended", "onended")}}事件

+`AudioScheduledSourceNode` 接口作为 web 音频 API 的一部分，是几种具有在特定时刻开始与停止能力的音频源节点接口的父接口。更具体地来说，这个接口定义了{{domxref("AudioScheduledSourceNode.start", "start()")}} 和{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法，以及{{domxref("AudioScheduledSourceNode.onended", "onended")}}事件 +> **备注：** 你不能直接创建`AudioScheduledSourceNode`。而是应该使用继承于它的子接口，如{{domxref("AudioBufferSourceNode")}}, {{domxref("OscillatorNode")}}和{{domxref("ConstantSourceNode")}}. +除非另有说明，基于`AudioScheduledSourceNode`节点的输出在没有播放时处于静默状态（这种状态在 start() 之前与 stop() 之后调用）。静默状态总是由一个全 0 值流组成。 -
-

你不能直接创建AudioScheduledSourceNode。而是应该使用继承于它的子接口，如{{domxref("AudioBufferSourceNode")}}, {{domxref("OscillatorNode")}}和{{domxref("ConstantSourceNode")}}.

-
+## Properties -

除非另有说明，基于AudioScheduledSourceNode节点的输出在没有播放时处于静默状态（这种状态在 start() 之前与 stop() 之后调用）。静默状态总是由一个全 0 值流组成。

+_Inherits properties from its parent interface, {{domxref("AudioNode")}}, and adds the following properties:_ -

Properties

+### Event handlers -

Inherits properties from its parent interface, {{domxref("AudioNode")}}, and adds the following properties:

+- {{domxref("AudioScheduledSourceNode.onended", "onended")}} + - : A function to be called when the {{event("ended")}} event is fired, indicating that the node has finished playing. -

Event handlers

+## Methods -
-
{{domxref("AudioScheduledSourceNode.onended", "onended")}}
-
A function to be called when the {{event("ended")}} event is fired, indicating that the node has finished playing.
-
+_Inherits methods from its parent interface, {{domxref("AudioNode")}}, and adds the following methods:_ -

Methods

+- {{domxref("AudioScheduledSourceNode.start", "start()")}} + - : Schedules the node to begin playing the constant sound at the specified time. If no time is specified, the node begins playing immediately. +- {{domxref("AudioScheduledSourceNode.stop", "stop()")}} + - : Schedules the node to stop playing at the specified time. If no time is specified, the node stops playing at once. -

Inherits methods from its parent interface, {{domxref("AudioNode")}}, and adds the following methods:

- -
-
{{domxref("AudioScheduledSourceNode.start", "start()")}}
-
Schedules the node to begin playing the constant sound at the specified time. If no time is specified, the node begins playing immediately.
-
{{domxref("AudioScheduledSourceNode.stop", "stop()")}}
-
Schedules the node to stop playing at the specified time. If no time is specified, the node stops playing at once.
-
- -

Specification

+## Specification {{Specifications}} -

Browser compatibility

- -
- +## Browser compatibility -

{{Compat("api.AudioScheduledSourceNode")}}

-
+{{Compat("api.AudioScheduledSourceNode")}} -

See also

+## See also - +- [Using the Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) +- {{domxref("AudioNode")}} diff --git a/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.md b/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.md index 264e3ae8fac2d5..b5ae3ce3654286 100644 --- a/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.md +++ b/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.md @@ -2,73 +2,64 @@ title: AudioScheduledSourceNode.stop() slug: Web/API/AudioScheduledSourceNode/stop --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -

{{domxref("AudioScheduledSourceNode")}} 上的stop()方法将声音安排在指定的时间停止播放。如果没有指定时间，声音将立即停止播放。

+{{domxref("AudioScheduledSourceNode")}} 上的`stop()`方法将声音安排在指定的时间停止播放。如果没有指定时间，声音将立即停止播放。 -

每次在同一个节点上调用 stop() 时，指定的时间将替换任何未发生的计划停止时间。如果节点已经停止，则此方法无效。

+每次在同一个节点上调用 `stop()` 时，指定的时间将替换任何未发生的计划停止时间。如果节点已经停止，则此方法无效。 -
-

注意： 如果计划的停止时间发生在节点计划的开始时间之前，则节点永远不会开始运行。

-
+> **备注：** 如果计划的停止时间发生在节点计划的开始时间之前，则节点永远不会开始运行。 -

语法

+## 语法 -
AudioScheduledSourceNode.stop([when]);
-
+``` +AudioScheduledSourceNode.stop([when]); +``` -

参数

+### 参数 -
-
when {{optional_inline}}
-
声音停止播放的时间，单位为秒。 这个值在 {{domxref("AudioContext")}} 用于其 {{domxref("AudioContext.currentTime", "currentTime")}} 属性的同一时间坐标系统中指定。 省略这个参数，设置为 0 或者负值都会立即停止播放。
-
+- `when` {{optional_inline}} + - : 声音停止播放的时间，单位为秒。 这个值在 {{domxref("AudioContext")}} 用于其 {{domxref("AudioContext.currentTime", "currentTime")}} 属性的同一时间坐标系统中指定。 省略这个参数，设置为 0 或者负值都会立即停止播放。 -

Return value

+### Return value -

{{jsxref("undefined")}}

+{{jsxref("undefined")}} -

Exceptions

+### Exceptions -
-
InvalidStateNode
-
节点还没有通过调用{{domxref("AudioScheduledSourceNode.start", "start()")}}方法被播放。
-
RangeError
-
当 when 指定为负值时。
-
+- `InvalidStateNode` + - : 节点还没有通过调用{{domxref("AudioScheduledSourceNode.start", "start()")}}方法被播放。 +- `RangeError` + - : 当 `when` 指定为负值时。 -

Example

+## Example -

This example demonstrates starting an oscillator node, scheduled to begin playing at once and to stop playing in one second. The stop time is determined by taking the audio context's current time from {{domxref("AudioContext.currentTime")}} and adding 1 second.

+This example demonstrates starting an oscillator node, scheduled to begin playing at once and to stop playing in one second. The stop time is determined by taking the audio context's current time from {{domxref("AudioContext.currentTime")}} and adding 1 second. -
context = new AudioContext();
+```js
+context = new AudioContext();
 osc = context.createOscillator();
 osc.connect(context.destination);
 
 /* Let's play a sine wave for one second. */
 
 osc.start();
-osc.stop(context.currentTime + 1);
+osc.stop(context.currentTime + 1); +``` -

Specifications

+## Specifications {{Specifications}} -

Browser compatibility

+## Browser compatibility -
+{{Compat("api.AudioScheduledSourceNode.stop")}} +## See also -

{{Compat("api.AudioScheduledSourceNode.stop")}}

-
- -

See also

- -
    -
  • Using the Web Audio API
    • -
  • {{domxref("AudioScheduledSourceNode.start", "start()")}}
    • -
  • {{domxref("AudioScheduledSourceNode")}}
    • -
  • {{domxref("AudioBufferSourceNode")}}
    • -
  • {{domxref("ConstantSourceNode")}}
    • -
  • {{domxref("OscillatorNode")}}
    • -
+- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) +- {{domxref("AudioScheduledSourceNode.start", "start()")}} +- {{domxref("AudioScheduledSourceNode")}} +- {{domxref("AudioBufferSourceNode")}} +- {{domxref("ConstantSourceNode")}} +- {{domxref("OscillatorNode")}} diff --git a/files/zh-cn/web/api/audioworkletprocessor/index.md b/files/zh-cn/web/api/audioworkletprocessor/index.md index 027bea74000c0c..dd059992d62cca 100644 --- a/files/zh-cn/web/api/audioworkletprocessor/index.md +++ b/files/zh-cn/web/api/audioworkletprocessor/index.md @@ -2,73 +2,67 @@ title: AudioWorkletProcessor slug: Web/API/AudioWorkletProcessor --- -

{{APIRef("Web Audio API")}}

+{{APIRef("Web Audio API")}} -

Web Audio API的 AudioWorkletProcessor 接口代表了一个 自定义的音频处理代码 {{domxref("AudioWorkletNode")}}. 它身处于 {{domxref("AudioWorkletGlobalScope")}} 并运行在 Web Audio rendering 线程上。同时，一个建立在其基础上的 {{domxref("AudioWorkletNode")}} 运行在主线程上。

+[Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API)的 **`AudioWorkletProcessor`** 接口代表了一个 自定义的音频处理代码 {{domxref("AudioWorkletNode")}}. 它身处于 {{domxref("AudioWorkletGlobalScope")}} 并运行在 Web Audio rendering 线程上。同时，一个建立在其基础上的 {{domxref("AudioWorkletNode")}} 运行在主线程上。 -

构造函数

+## 构造函数 -
AudioWorkletProcessor 及其子类不能通过用户提供的的代码直接实例化。它们只能随着与之相联系{{domxref("AudioWorkletNode")}}s 的创建而被其创建再内部。其子类的构造函数将被一个可选对象调用，因此您可以执行自定义的初始化过程——详细信息请参见构造函数页面。
+> **备注：** `AudioWorkletProcessor` 及其子类不能通过用户提供的的代码直接实例化。它们只能随着与之相联系{{domxref("AudioWorkletNode")}}s 的创建而被其创建再内部。其子类的构造函数将被一个可选对象调用，因此您可以执行自定义的初始化过程——详细信息请参见构造函数页面。 -
-
{{domxref("AudioWorkletProcessor.AudioWorkletProcessor", "AudioWorkletProcessor()")}}
-
创建一个 AudioWorkletProcessor 对象的新实例。
-
+- {{domxref("AudioWorkletProcessor.AudioWorkletProcessor", "AudioWorkletProcessor()")}} + - : 创建一个 `AudioWorkletProcessor` 对象的新实例。 -

属性

+## 属性 -
-
{{domxref("AudioWorkletProcessor.port", "port")}} {{readonlyinline}}
-
返回一个用于在处理程序和其所属的{{domxref("AudioWorkletNode")}}间双向通信的 {{domxref("MessagePort")}} 。 另一端 可通过该节点的{{domxref("AudioWorkletNode.port", "port")}} 属性使用。
-
+- {{domxref("AudioWorkletProcessor.port", "port")}} {{readonlyinline}} + - : 返回一个用于在处理程序和其所属的{{domxref("AudioWorkletNode")}}间双向通信的 {{domxref("MessagePort")}} 。 另一端 可通过该节点的{{domxref("AudioWorkletNode.port", "port")}} 属性使用。 -

方法

+## 方法 -

AudioWorkletProcessor 接口没有定义任何自己的方法。但是，您必须提供一个 {{domxref("AudioWorkletProcessor.process", "process()")}} 方法，用以处理音频流。

+_`AudioWorkletProcessor` 接口没有定义任何自己的方法。但是，您必须提供一个 {{domxref("AudioWorkletProcessor.process", "process()")}} 方法，用以处理音频流。_ -

事件

+## 事件 -

AudioWorkletProcessor 接口不响应任何事件。

+_`AudioWorkletProcessor` 接口不响应任何事件。_ -

使用说明

+## 使用说明 -

Deriving classes

+### Deriving classes -

要自定义音频处理代码， 你必须从AudioWorkletProcessor 接口派生一个类。这个派生类必须具有在该接口中不曾定义的{{domxref("AudioWorkletProcessor.process", "process")}} 方法。该方法将被每个含有 128 样本帧的块调用并且接受输入和输出数组以及自定义的{{domxref("AudioParam")}}s (如果它们刚被定义了) 的计算值作为参数。您可以使用输入和 音频参数值去填充输出数组，这是默认的用于使输出静音。

+要自定义音频处理代码， 你必须从`AudioWorkletProcessor` 接口派生一个类。这个派生类必须具有在该接口中不曾定义的{{domxref("AudioWorkletProcessor.process", "process")}} 方法。该方法将被每个含有 128 样本帧的块调用并且接受输入和输出数组以及自定义的{{domxref("AudioParam")}}s (如果它们刚被定义了) 的计算值作为参数。您可以使用输入和 音频参数值去填充输出数组，这是默认的用于使输出静音。 -

Optionally, if you want custom {{domxref("AudioParam")}}s on your node, you can supply a {{domxref("AudioWorkletProcessor.parameterDescriptors", "parameterDescriptors")}} property as a static getter on the processor. The array of {{domxref("AudioParamDescriptor")}}-based objects returned is used internally to create the {{domxref("AudioParam")}}s during the instantiation of the AudioWorkletNode.

+Optionally, if you want custom {{domxref("AudioParam")}}s on your node, you can supply a {{domxref("AudioWorkletProcessor.parameterDescriptors", "parameterDescriptors")}} property as a _static getter_ on the processor. The array of {{domxref("AudioParamDescriptor")}}-based objects returned is used internally to create the {{domxref("AudioParam")}}s during the instantiation of the `AudioWorkletNode`. -

The resulting AudioParams reside in the {{domxref("AudioWorkletNode.parameters", "parameters")}} property of the node and can be automated using standard methods such as linearRampToValueAtTime. Their calculated values will be passed into the {{domxref("AudioWorkletProcessor.process", "process()")}} method of the processor for you to shape the node output accordingly.

+The resulting `AudioParam`s reside in the {{domxref("AudioWorkletNode.parameters", "parameters")}} property of the node and can be automated using standard methods such as [`linearRampToValueAtTime`](/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime). Their calculated values will be passed into the {{domxref("AudioWorkletProcessor.process", "process()")}} method of the processor for you to shape the node output accordingly. -

处理音频

+### 处理音频 -

一个创建自定义音频处理算法的步骤的实例：

+一个创建自定义音频处理算法的步骤的实例： -
    -
  1. 创建一个独立的文件;
    2. -
  2. 在这个文件中： -
      -
    1. Extend the AudioWorkletProcessor class (see "Deriving classes" section) and supply your own {{domxref("AudioWorkletProcessor.process", "process()")}} method in it;
      2. -
    2. Register the processor using {{domxref("AudioWorkletGlobalScope.registerProcessor()")}} method;
      3. -
    -
    3. -
  3. Load the file using {{domxref("Worklet.addModule", "addModule()")}} method on your audio context's {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}} property;
    4. -
  4. Create an {{domxref("AudioWorkletNode")}} based on the processor. The processor will be instantiated internally by the AudioWorkletNode constructor.
    5. -
  5. Connect the node to the other nodes.
    6. -
+1. 创建一个独立的文件; +2. 在这个文件中： -

例子

+ 1. Extend the `AudioWorkletProcessor` class (see ["Deriving classes" section](#Deriving_classes)) and supply your own {{domxref("AudioWorkletProcessor.process", "process()")}} method in it; + 2. Register the processor using {{domxref("AudioWorkletGlobalScope.registerProcessor()")}} method; -

In the example below we create a custom {{domxref("AudioWorkletNode")}} that outputs white noise.

+3. Load the file using {{domxref("Worklet.addModule", "addModule()")}} method on your audio context's {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}} property; +4. Create an {{domxref("AudioWorkletNode")}} based on the processor. The processor will be instantiated internally by the `AudioWorkletNode` constructor. +5. Connect the node to the other nodes. -

First, we need to define a custom AudioWorkletProcessor, which will output white noise, and register it. Note that this should be done in a separate file.

+## 例子 -
// white-noise-processor.js
+In the example below we create a custom {{domxref("AudioWorkletNode")}} that outputs white noise.
+
+First, we need to define a custom `AudioWorkletProcessor`, which will output white noise, and register it. Note that this should be done in a separate file.
+
+```js
+// white-noise-processor.js
 class WhiteNoiseProcessor extends AudioWorkletProcessor {
   process (inputs, outputs, parameters) {
     const output = outputs[0]
-    output.forEach(channel => {
-      for (let i = 0; i < channel.length; i++) {
+    output.forEach(channel => {
+      for (let i = 0; i < channel.length; i++) {
         channel[i] = Math.random() * 2 - 1
       }
     })
@@ -77,31 +71,26 @@ class WhiteNoiseProcessor extends AudioWorkletProcessor {
 }
 
 registerProcessor('white-noise-processor', WhiteNoiseProcessor)
-
+``` -

Next, in our main script file we'll load the processor, create an instance of {{domxref("AudioWorkletNode")}}, passing it the name of the processor, then connect the node to an audio graph.

+Next, in our main script file we'll load the processor, create an instance of {{domxref("AudioWorkletNode")}}, passing it the name of the processor, then connect the node to an audio graph. -
const audioContext = new AudioContext()
+```js
+const audioContext = new AudioContext()
 await audioContext.audioWorklet.addModule('white-noise-processor.js')
 const whiteNoiseNode = new AudioWorkletNode(audioContext, 'white-noise-processor')
 whiteNoiseNode.connect(audioContext.destination)
-
+``` -

Specifications

+## Specifications {{Specifications}} -

Browser compatibility

- -
- +## Browser compatibility -

{{Compat("api.AudioWorkletProcessor")}}

-
+{{Compat("api.AudioWorkletProcessor")}} -

See also

+## See also - +- [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) +- [Using the Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/authenticatorresponse/index.md b/files/zh-cn/web/api/authenticatorresponse/index.md index 928894e05c6b94..1c47615a60c146 100644 --- a/files/zh-cn/web/api/authenticatorresponse/index.md +++ b/files/zh-cn/web/api/authenticatorresponse/index.md @@ -2,37 +2,32 @@ title: AuthenticatorResponse slug: Web/API/AuthenticatorResponse --- -
{{APIRef("Web Authentication API")}}{{securecontext_header}}
+{{APIRef("Web Authentication API")}}{{securecontext_header}} -

The AuthenticatorResponse interface of the Web Authentication API is the base interface for interfaces that provide a cryptographic root of trust for a key pair. The child interfaces include information from the browser such as the challenge origin and either may be returned from {{domxref("PublicKeyCredential.response")}}.

+The **`AuthenticatorResponse`** interface of the [Web Authentication API](/zh-CN/docs/Web/API/Web_Authentication_API) is the base interface for interfaces that provide a cryptographic root of trust for a key pair. The child interfaces include information from the browser such as the challenge origin and either may be returned from {{domxref("PublicKeyCredential.response")}}. -

Interfaces based on AuthenticatorResponse

+## Interfaces based on AuthenticatorResponse -

Below is a list of interfaces based on the AuthenticatorResponse interface.

+Below is a list of interfaces based on the AuthenticatorResponse interface. -
-
    -
  • {{domxref("AuthenticatorAssertionResponse")}}
    • -
  • {{domxref("AuthenticatorAttestationResponse")}}
    • -
-
+- {{domxref("AuthenticatorAssertionResponse")}} +- {{domxref("AuthenticatorAttestationResponse")}} -

Properties

+## Properties -
-
{{domxref("AuthenticatorResponse.clientDataJSON")}}
-
A JSON string in an {{domxref("ArrayBuffer")}}, representing the client data that was passed to {{domxref("CredentialsContainer.create()")}} or {{domxref("CredentialsContainer.get()")}}.
-
+- {{domxref("AuthenticatorResponse.clientDataJSON")}} + - : A [JSON](/zh-CN/docs/Learn/JavaScript/Objects/JSON) string in an {{domxref("ArrayBuffer")}}, representing the client data that was passed to {{domxref("CredentialsContainer.create()")}} or {{domxref("CredentialsContainer.get()")}}. -

方法

+## 方法 -

无

+无 -

示例

+## 示例 -

Getting an AuthenticatorAssertionResponse

+### Getting an AuthenticatorAssertionResponse -
var options = {
+```js
+var options = {
   challenge: new Uint8Array([/* bytes sent from the server */])
 };
 
@@ -44,12 +39,12 @@ navigator.credentials.get({ "publicKey": options })
 }).catch(function (err) {
      console.error(err);
 });
+```
 
-
+### Getting an AuthenticatorAttestationResponse -

Getting an AuthenticatorAttestationResponse

- -
var publicKey = {
+```js
+var publicKey = {
   challenge: /* from the server */,
   rp: {
     name: "Example CORP",
@@ -73,22 +68,19 @@ navigator.credentials.create({ publicKey })
     var attestationResponse = newCredentialInfo.response;
   }).catch(function (err) {
      console.error(err);
-  });
+ }); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.AuthenticatorResponse")}}

+{{Compat("api.AuthenticatorResponse")}} -

参见

+## 参见 -
    -
  • {{domxref("AuthenticatorAttestationResponse")}}
    • -
  • {{domxref("AuthenticatorAssertionResponse")}}
    • -
  • {{domxref("PublicKeyCredential.response")}}
    • -
+- {{domxref("AuthenticatorAttestationResponse")}} +- {{domxref("AuthenticatorAssertionResponse")}} +- {{domxref("PublicKeyCredential.response")}} diff --git a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.md b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.md index f064655e4f81f9..470faf589e82b1 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.md +++ b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.md @@ -2,30 +2,29 @@ title: AudioContext.createAnalyser() slug: Web/API/BaseAudioContext/createAnalyser --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -
-

{{ domxref("AudioContext") }}的createAnalyser()方法能创建一个{{ domxref("AnalyserNode") }}，可以用来获取音频时间和频率数据，以及实现数据可视化。

-
+{{ domxref("AudioContext") }}的`createAnalyser()`方法能创建一个{{ domxref("AnalyserNode") }}，可以用来获取音频时间和频率数据，以及实现数据可视化。 -
-

注意：关于该节点的更多信息，请查看{{domxref("AnalyserNode")}}

-
+> **备注：** 关于该节点的更多信息，请查看{{domxref("AnalyserNode")}} -

语法

+## 语法 -
var audioCtx = new AudioContext();
-var analyser = audioCtx.createAnalyser();
+```js +var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +``` -

返回值

+### 返回值 -

{{domxref("AnalyserNode")}}对象

+{{domxref("AnalyserNode")}}对象 -

例子

+## 例子 -

下面的例子展示了 AudioContext 创建分析器节点的基本用法，然后用 requestAnimationFrame() 来反复获取时域数据，并绘制出当前音频输入的“示波器风格”输出。更多完整例子请查看Voice-change-O-matic demo (中app.js 的 128–205 行代码)

+下面的例子展示了 AudioContext 创建分析器节点的基本用法，然后用 requestAnimationFrame() 来反复获取时域数据，并绘制出当前音频输入的“示波器风格”输出。更多完整例子请查看[Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) demo (中[app.js 的 128–205 行](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)代码) -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 
   ...
@@ -54,7 +53,7 @@ function draw() {
       var sliceWidth = WIDTH * 1.0 / bufferLength;
       var x = 0;
 
-      for(var i = 0; i < bufferLength; i++) {
+      for(var i = 0; i < bufferLength; i++) {
 
         var v = dataArray[i] / 128.0;
         var y = v * HEIGHT/2;
@@ -72,18 +71,17 @@ function draw() {
       canvasCtx.stroke();
     };
 
-    draw();
+ draw(); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.BaseAudioContext.createAnalyser")}} -

另见

+## 另见 - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.md b/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.md index 7288dfefd87420..6d9ff52986c6b0 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.md +++ b/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.md @@ -2,44 +2,40 @@ title: BaseAudioContext.createPeriodicWave() slug: Web/API/BaseAudioContext/createPeriodicWave --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -
-

{{ domxref("BaseAudioContext") }} 接口的 createPeriodicWave() 方法用于创建可对 {{ domxref("OscillatorNode") }} 输出进行整形的 {{domxref("PeriodicWave")}}（周期波）。

-
+{{ domxref("BaseAudioContext") }} 接口的 `createPeriodicWave()` 方法用于创建可对 {{ domxref("OscillatorNode") }} 输出进行整形的 {{domxref("PeriodicWave")}}（周期波）。 -

语法

+## 语法 -
var wave = AudioContext.createPeriodicWave(real, imag[, constraints]);
+``` +var wave = AudioContext.createPeriodicWave(real, imag[, constraints]); +``` -

返回值

+### 返回值 -

一个 {{domxref("PeriodicWave")}}.

+一个 {{domxref("PeriodicWave")}}. -

参数

+### 参数 -
-
real
-
一系列余弦术语 (传统上的 A 项)。
-
imag
-
一系列正弦项 (传统上的 B 项)。
-
constraints {{optional_inline}}
-
一个字典对象，用于指定是否禁用规范化（如果没有指定，则默认启动规范化）。它有一个属性： -
    -
  • disableNormalization: 如果设置为 true，对周期波禁用规范化。默认值为 false.
    • -
-
-
+- `real` + - : 一系列余弦术语 (传统上的 A 项)。 +- `imag` + - : 一系列正弦项 (传统上的 B 项)。 +- `constraints` {{optional_inline}} -
-

如果使用规范化，生成波形的最大绝对峰值为 1。

-
+ - : 一个字典对象，用于指定是否禁用规范化（如果没有指定，则默认启动规范化）。它有一个属性： -

例子

+ - `disableNormalization`: 如果设置为 `true`，对周期波禁用规范化。默认值为 `false`. -

下面的例子为 createPeriodicWave() 的简单用法，创建包含简单正弦波的 {{domxref("PeriodicWave")}} 对象。

+> **备注：** 如果使用规范化，生成波形的最大绝对峰值为 1。 -
var real = new Float32Array(2);
+## 例子
+
+下面的例子为 `createPeriodicWave()` 的简单用法，创建包含简单正弦波的 {{domxref("PeriodicWave")}} 对象。
+
+```js
+var real = new Float32Array(2);
 var imag = new Float32Array(2);
 var ac = new AudioContext();
 var osc = ac.createOscillator();
@@ -56,32 +52,25 @@ osc.setPeriodicWave(wave);
 osc.connect(ac.destination);
 
 osc.start();
-osc.stop(2);
- -

+osc.stop(2); +``` -

这之所以有用是因为根据定义仅包含基本音调的声音是正弦波。

+这之所以有用是因为根据定义仅包含基本音调的声音是正弦波。 -

这里，我们创建一个具有两个值的 PeriodicWave (周期波) 。第一个值是 DC(直流) 偏移，它是振荡器启动的值。0 在这里是好的，因为我们想在 [-1.0; 1.0] 范围的中间开始曲线。

+这里，我们创建一个具有两个值的 `PeriodicWave` (周期波) 。第一个值是 DC(直流) 偏移，它是振荡器启动的值。0 在这里是好的，因为我们想在 \[-1.0; 1.0] 范围的中间开始曲线。 -

第二个值和后续值是正弦和余弦分量。你可以把它看做是傅里叶变换的结果，可以从时域值中获取频域值。这里，使用 createPeriodicWave()，你可以指定频率，浏览器会执行一个逆傅里叶变换，以获得振荡器的时域缓冲。这里，我们只在基础音上设置了一个全音量 (1.0) 的分量，所以我们得到一个正弦波。

+第二个值和后续值是正弦和余弦分量。你可以把它看做是傅里叶变换的结果，可以从时域值中获取频域值。这里，使用 `createPeriodicWave()`，你可以指定频率，浏览器会执行一个逆傅里叶变换，以获得振荡器的时域缓冲。这里，我们只在基础音上设置了一个全音量 (1.0) 的分量，所以我们得到一个正弦波。 -

傅里叶变换系数应该按升序给出 (例如. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} 等.) 可以是正的或者是负的。一个简单的手动获取此类系数的方法是使用图形计算器，尽管这不是最好的。

+傅里叶变换系数应该按升序给出 (例如. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} 等.) 可以是正的或者是负的。一个简单的手动获取此类系数的方法是使用图形计算器，尽管这不是最好的。 -

规格

+## 规格 {{Specifications}} -

浏览器兼容性

- -
- +## 浏览器兼容性 -

{{Compat("api.BaseAudioContext.createPeriodicWave")}}

-
+{{Compat("api.BaseAudioContext.createPeriodicWave")}} -

参见

+## 参见 - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.md b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.md index 8cae27ce862db8..fec3967b95bd40 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.md +++ b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.md @@ -2,30 +2,31 @@ title: AudioContext.createWaveShaper() slug: Web/API/BaseAudioContext/createWaveShaper --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -

{{ domxref("AudioContext") }} 接口的 createWaveShaper() 方法创建了 表示非线性失真的{{ domxref("WaveShaperNode") }}。该节点通常被用来给音频添加失真效果

+{{ domxref("AudioContext") }} 接口的 createWaveShaper() 方法创建了 表示非线性失真的{{ domxref("WaveShaperNode") }}。该节点通常被用来给音频添加失真效果 -

语法

+## 语法 -
var audioCtx = new AudioContext();
-var distortion = audioCtx.createWaveShaper();
+```js +var audioCtx = new AudioContext(); +var distortion = audioCtx.createWaveShaper(); +``` -

返回

+### 返回 -

A {{domxref("WaveShaperNode")}}.

+A {{domxref("WaveShaperNode")}}. -

例子

+## 例子 -

The following example shows basic usage of an AudioContext to create a wave shaper node. For applied examples/information, check out our Voice-change-O-matic demo (see app.js for relevant code).

+The following example shows basic usage of an AudioContext to create a wave shaper node. For applied examples/information, check out our [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)[ demo](http://mdn.github.io/voice-change-o-matic/) ([see app.js](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js) for relevant code). -

下面的例子展示了 AudioContext 创建一个波形整形器节点的基本用法。有关应用示例/信息，请查看我们的oice-change-O-matic demo演示（有关代码，请参阅app.js）。

+下面的例子展示了 AudioContext 创建一个波形整形器节点的基本用法。有关应用示例/信息，请查看我们的[oice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)[ demo](http://mdn.github.io/voice-change-o-matic/)演示（有关代码，请参阅[app.js](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js)）。 -
-

注：实现失真曲线并不是简单的事情，你可能需要到处找资料来找到这样的算法。我们在Stack Overflow上找到了以下的失真曲线代码

-
+> **备注：** 实现失真曲线并不是简单的事情，你可能需要到处找资料来找到这样的算法。我们在[Stack Overflow](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion)上找到了以下的失真曲线代码 -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var distortion = audioCtx.createWaveShaper();
 
   ...
@@ -37,7 +38,7 @@ function makeDistortionCurve(amount) {
     deg = Math.PI / 180,
     i = 0,
     x;
-  for ( ; i < n_samples; ++i ) {
+  for ( ; i < n_samples; ++i ) {
     x = i * 2 / n_samples - 1;
     curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
   }
@@ -47,18 +48,17 @@ function makeDistortionCurve(amount) {
   ...
 
 distortion.curve = makeDistortionCurve(400);
-distortion.oversample = '4x';
+distortion.oversample = '4x'; +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.BaseAudioContext.createWaveShaper")}} -

See also

+## See also - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.md b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.md index abf47d9b9d7eb2..9e33c6ead509c5 100644 --- a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.md +++ b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.md @@ -2,43 +2,44 @@ title: AudioContext.decodeAudioData() slug: Web/API/BaseAudioContext/decodeAudioData --- -

{{ APIRef("Web Audio API") }}

+{{ APIRef("Web Audio API") }} -
-

{{ domxref("AudioContext") }}接口的decodeAudioData()方法可用于异步解码音频文件中的 {{domxref("ArrayBuffer")}}. ArrayBuffer数据可以通过{{domxref("XMLHttpRequest")}}和{{domxref("FileReader")}}来获取。AudioBuffer 是通过 AudioContext 采样率进行解码的，然后通过回调返回结果。

-
+{{ domxref("AudioContext") }}接口的`decodeAudioData()方法可用于异步解码`音频文件中的 {{domxref("ArrayBuffer")}}. `ArrayBuffer数据可以通过`{{domxref("XMLHttpRequest")}}和{{domxref("FileReader")}}来获取。AudioBuffer 是通过 AudioContext 采样率进行解码的，然后通过回调返回结果。 -

这是从音频轨道创建用于 web audio API 音频源的首选方法。

+这是从音频轨道创建用于 web audio API 音频源的首选方法。 -

语法

+## 语法 -

旧版的回调函数语法

+旧版的回调函数语法 -
audioCtx.decodeAudioData(audioData, function(decodedData) {
+```
+audioCtx.decodeAudioData(audioData, function(decodedData) {
   // use the dec​oded data here
-});
+}); +``` -

新版的 promise-based 语法：

+新版的 promise-based 语法： -
audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+```
+audioCtx.decodeAudioData(audioData).then(function(decodedData) {
   // use the decoded data here
-});
+}); +``` -

举例

+## 举例 -

在本章节中，我们将首先学习基于回调的系统，然后采用新的基于 promise-based 的语法

+在本章节中，我们将首先学习基于回调的系统，然后采用新的基于 promise-based 的语法 -

旧的回调语法

+### 旧的回调语法 -

在这个事例中， getData() 方法使用 XHR 加载一个音轨，设置请求的 responsetype 为 ArrayBuffer 使它返回一个 arraybuffer 数据，然后存储在 audioData 变量中。然后我们将这个 arraybuffer 数据置于decodeAudioData()方法中使用，当成功解码PCM Data后通过回调返回, 将返回的结果通过{{ domxref("AudioContext.createBufferSource()") }}接口进行处理并获得一个{{ domxref("AudioBufferSourceNode") }}, 将源连接至{{domxref("AudioContext.destination") }}并将它设置为循环的。

+在这个事例中， `getData()` 方法使用 XHR 加载一个音轨，设置请求的 responsetype 为 ArrayBuffer 使它返回一个 arraybuffer 数据，然后存储在 audioData 变量中。然后我们将这个 arraybuffer 数据置于`decodeAudioData()方法中使用，当成功解码PCM Data后通过回调返回`, 将返回的结果通过{{ domxref("AudioContext.createBufferSource()") }}接口进行处理并获得一个{{ domxref("AudioBufferSourceNode") }}, 将源连接至{{domxref("AudioContext.destination") }}并将它设置为循环的。 -

通过按钮来运行 getData() 来获取音轨并播放它。当使用 stop() 方法后 source 将会被清除。

+通过按钮来运行 `getData()` 来获取音轨并播放它。当使用 `stop()` 方法后 source 将会被清除。 -
-

Note: You can run the example live (or view the source.)

-
+> **备注：** You can [run the example live](http://mdn.github.io/decode-audio-data/) (or [view the source](https://github.com/mdn/decode-audio-data).) -
// define variables
+```js
+// define variables
 
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var source;
@@ -94,39 +95,38 @@ stop.onclick = function() {
 
 // dump script to pre element
 
-pre.innerHTML = myScript.innerHTML;
+pre.innerHTML = myScript.innerHTML; +``` -

新的 promise-based 语法

+### 新的 promise-based 语法 -
ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
+```js
+ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
  // use the decoded data here
-});
+}); +``` -

参数

+## 参数 -
-
ArrayBuffer
-
将会被解码的音频数据，可通过{{domxref("XMLHttpRequest")}}或{{domxref("FileReader")}}来获取。
-
DecodeSuccessCallback
-
当成功解码后会被调用的回调函数。该回调函数只有一个 AudioBuffer 类型参数。
-
DecodeErrorCallback
-
一个可选的错误回调函数。
-
+- ArrayBuffer + - : 将会被解码的音频数据，可通过{{domxref("XMLHttpRequest")}}或{{domxref("FileReader")}}来获取。 +- DecodeSuccessCallback + - : 当成功解码后会被调用的回调函数。该回调函数只有一个 AudioBuffer 类型参数。 +- DecodeErrorCallback + - : 一个可选的错误回调函数。 -

返回

+## 返回 -

一个 {{domxref("Promise") }}对象。

+一个 {{domxref("Promise") }}对象。 -

标准

+## 标准 {{Specifications}} -

浏览器支持

+## 浏览器支持 {{Compat("api.BaseAudioContext.decodeAudioData")}} -

See also

+## See also - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/baseaudiocontext/index.md b/files/zh-cn/web/api/baseaudiocontext/index.md index 038f99b241537b..b913ddbc0feea3 100644 --- a/files/zh-cn/web/api/baseaudiocontext/index.md +++ b/files/zh-cn/web/api/baseaudiocontext/index.md @@ -2,113 +2,109 @@ title: BaseAudioContext slug: Web/API/BaseAudioContext --- -
{{APIRef("Web Audio API")}}
- -

The BaseAudioContext interface acts as a base definition for online and offline audio-processing graphs, as represented by {{domxref("AudioContext")}} and {{domxref("OfflineAudioContext")}} respectively. You wouldn't use BaseAudioContext directly — you'd use its features via one of these two inheriting interfaces.

- -

A BaseAudioContext can be a target of events, therefore it implements the {{domxref("EventTarget")}} interface.

- -

{{InheritanceDiagram}}

- -

Properties

- -
-
{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}
-
Returns the {{domxref("AudioWorklet")}} object, used for creating custom AudioNodes with JavaScript processing.
-
{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
-
Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at 0.
-
{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
-
Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.
-
{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
-
Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.
-
{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
-
Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.
-
{{domxref("BaseAudioContext.state")}} {{readonlyInline}}
-
Returns the current state of the AudioContext.
-
- -

Event handlers

- -
-
{{domxref("BaseAudioContext.onstatechange")}}
-
An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the AudioContext's state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).
-
- -

Methods

- -

Also implements methods from the interface {{domxref("EventTarget")}}.

- -
-
{{domxref("BaseAudioContext.createBuffer()")}}
-
Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("BaseAudioContext.createConstantSource()")}}
-
Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
-
{{domxref("BaseAudioContext.createBufferSource()")}}
-
Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.
-
{{domxref("BaseAudioContext.createScriptProcessor()")}}
-
Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
-
{{domxref("BaseAudioContext.createStereoPanner()")}}
-
Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
-
{{domxref("BaseAudioContext.createAnalyser()")}}
-
Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
-
{{domxref("BaseAudioContext.createBiquadFilter()")}}
-
Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
-
{{domxref("BaseAudioContext.createChannelMerger()")}}
-
Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
-
{{domxref("BaseAudioContext.createChannelSplitter()")}}
-
Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
-
{{domxref("BaseAudioContext.createConvolver()")}}
-
Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
-
{{domxref("BaseAudioContext.createDelay()")}}
-
Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.
-
{{domxref("BaseAudioContext.createDynamicsCompressor()")}}
-
Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
-
{{domxref("BaseAudioContext.createGain()")}}
-
Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
-
{{domxref("BaseAudioContext.createIIRFilter()")}}
-
Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.
-
{{domxref("BaseAudioContext.createOscillator()")}}
-
Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
-
{{domxref("BaseAudioContext.createPanner()")}}
-
Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
-
{{domxref("BaseAudioContext.createPeriodicWave()")}}
-
Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
-
{{domxref("BaseAudioContext.createWaveShaper()")}}
-
Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
-
{{domxref("BaseAudioContext.decodeAudioData()")}}
-
Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. This method only works on complete files, not fragments of audio files.
-
{{domxref("BaseAudioContext.resume()")}}
-
Resumes the progression of time in an audio context that has previously been suspended/paused.
-
- -

Examples

- -

Basic audio context declaration:

- -
var audioCtx = new AudioContext();
- -

Cross browser variant:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
+{{APIRef("Web Audio API")}}
+
+The `BaseAudioContext` interface acts as a base definition for online and offline audio-processing graphs, as represented by {{domxref("AudioContext")}} and {{domxref("OfflineAudioContext")}} respectively. You wouldn't use `BaseAudioContext` directly — you'd use its features via one of these two inheriting interfaces.
+
+A `BaseAudioContext` can be a target of events, therefore it implements the {{domxref("EventTarget")}} interface.
+
+{{InheritanceDiagram}}
+
+## Properties
+
+- {{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}
+  - : Returns the {{domxref("AudioWorklet")}} object, used for creating custom AudioNodes with JavaScript processing.
+- {{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
+  - : Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at `0`.
+- {{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
+  - : Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.
+- {{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
+  - : Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.
+- {{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
+  - : Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.
+- {{domxref("BaseAudioContext.state")}} {{readonlyInline}}
+  - : Returns the current state of the `AudioContext`.
+
+### Event handlers
+
+- {{domxref("BaseAudioContext.onstatechange")}}
+  - : An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the `AudioContext`'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).
+
+## Methods
+
+_Also implements methods from the interface_ {{domxref("EventTarget")}}.
+
+- {{domxref("BaseAudioContext.createBuffer()")}}
+  - : Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
+- {{domxref("BaseAudioContext.createConstantSource()")}}
+  - : Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
+- {{domxref("BaseAudioContext.createBufferSource()")}}
+  - : Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.
+- {{domxref("BaseAudioContext.createScriptProcessor()")}}
+  - : Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
+- {{domxref("BaseAudioContext.createStereoPanner()")}}
+  - : Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
+- {{domxref("BaseAudioContext.createAnalyser()")}}
+  - : Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
+- {{domxref("BaseAudioContext.createBiquadFilter()")}}
+  - : Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
+- {{domxref("BaseAudioContext.createChannelMerger()")}}
+  - : Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
+- {{domxref("BaseAudioContext.createChannelSplitter()")}}
+  - : Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
+- {{domxref("BaseAudioContext.createConvolver()")}}
+  - : Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
+- {{domxref("BaseAudioContext.createDelay()")}}
+  - : Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.
+- {{domxref("BaseAudioContext.createDynamicsCompressor()")}}
+  - : Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
+- {{domxref("BaseAudioContext.createGain()")}}
+  - : Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
+- {{domxref("BaseAudioContext.createIIRFilter()")}}
+  - : Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.
+- {{domxref("BaseAudioContext.createOscillator()")}}
+  - : Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
+- {{domxref("BaseAudioContext.createPanner()")}}
+  - : Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
+- {{domxref("BaseAudioContext.createPeriodicWave()")}}
+  - : Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
+- {{domxref("BaseAudioContext.createWaveShaper()")}}
+  - : Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
+- {{domxref("BaseAudioContext.decodeAudioData()")}}
+  - : Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s `response` attribute after setting the `responseType` to `arraybuffer`. This method only works on complete files, not fragments of audio files.
+- {{domxref("BaseAudioContext.resume()")}}
+  - : Resumes the progression of time in an audio context that has previously been suspended/paused.
+
+## Examples
+
+Basic audio context declaration:
+
+```js
+var audioCtx = new AudioContext();
+```
+
+Cross browser variant:
+
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var oscillatorNode = audioCtx.createOscillator();
 var gainNode = audioCtx.createGain();
 var finish = audioCtx.destination;
-// etc.
+// etc. +``` -

Specifications

+## Specifications {{Specifications}} -

Browser compatibility

+## Browser compatibility {{Compat("api.BaseAudioContext")}} -

See also

+## See also - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) +- {{domxref("AudioContext")}} +- {{domxref("OfflineAudioContext")}} diff --git a/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.md b/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.md index 56a7571b4cf328..f8048dfc0e97ed 100644 --- a/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.md +++ b/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.md @@ -2,27 +2,30 @@ title: BeforeInstallPromptEvent.prompt() slug: Web/API/BeforeInstallPromptEvent/prompt --- -

{{APIRef("")}}

+{{APIRef("")}} -

{{SeeCompatTable}}

+{{SeeCompatTable}} -

{{domxref("BeforeInstallPromptEvent")}} 接口的 prompt()方法允许一个开发人员在自己选择的一个时间显示安装提示。

+{{domxref("BeforeInstallPromptEvent")}} 接口的 **`prompt()`**方法允许一个开发人员在自己选择的一个时间显示安装提示。 -

句法

+## 句法 -
BeforeInstallPromptEvent.prompt()
+``` +BeforeInstallPromptEvent.prompt() +``` -

参数

+### 参数 -

无

+无 -

返回

+### 返回 -

一个空的 {{jsxref("Promise")}}.

+一个空的 {{jsxref("Promise")}}. -

范例

+## 范例 -
let isTooSoon = true;
+```
+let isTooSoon = true;
 window.addEventListener("beforeinstallprompt", function(e) {
   if (isTooSoon) {
     e.preventDefault(); // Prevents prompt display
@@ -35,14 +38,13 @@ window.addEventListener("beforeinstallprompt", function(e) {
 
   // The event was re-dispatched in response to our request
   // ...
-});
+}); +``` -

规范

+## 规范 -
-

This method is not part of a specification.

-
+This method is not part of a specification. -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.BeforeInstallPromptEvent.prompt")}} diff --git a/files/zh-cn/web/api/beforeunloadevent/index.md b/files/zh-cn/web/api/beforeunloadevent/index.md index da2ff49176e530..c739d655c85062 100644 --- a/files/zh-cn/web/api/beforeunloadevent/index.md +++ b/files/zh-cn/web/api/beforeunloadevent/index.md @@ -2,36 +2,37 @@ title: BeforeUnloadEvent slug: Web/API/BeforeUnloadEvent --- -

{{APIRef}}

+{{APIRef}} -

beforeunload 事件触发于 window、document 和它们的资源即将卸载时。

+**`beforeunload`** 事件触发于 window、document 和它们的资源即将卸载时。 -

当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框。在 浏览器兼容性 中查看更多信息。

+当事件属性 `returnValue` 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框。在 [浏览器兼容性](#浏览器兼容性) 中查看更多信息。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableYes
Target objectsdefaultView
Interface{{domxref("Event")}}
BubblesNo
CancelableYes
Target objectsdefaultView
Interface{{domxref("Event")}}
-

示例

+## 示例 -
window.addEventListener("beforeunload", function( event ) {
+```js
+window.addEventListener("beforeunload", function( event ) {
   event.returnValue = "\o/";
 });
 
@@ -39,28 +40,28 @@ slug: Web/API/BeforeUnloadEvent
 window.addEventListener("beforeunload", function( event ) {
   event.preventDefault();
 });
-
+``` -

基于 Webkit 的浏览器没有遵循该弹窗规范。以下是一个基本跨浏览器运行的例子。

+基于 Webkit 的浏览器没有遵循该弹窗规范。以下是一个基本跨浏览器运行的例子。 -
window.addEventListener("beforeunload", function (e) {
+```js
+window.addEventListener("beforeunload", function (e) {
   var confirmationMessage = "\o/";
 
   (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
   return confirmationMessage;                                //Webkit, Safari, Chrome etc.
-});
+}); +``` -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.BeforeUnloadEvent")}}

+{{Compat("api.BeforeUnloadEvent")}} -

参见

+## 参见 - +- {{Event("DOMContentLoaded")}} +- {{Event("readystatechange")}} +- {{Event("load")}} +- {{Event("beforeunload")}} +- {{Event("unload")}} +- [卸载文档 — 提示卸载文档](http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document) diff --git a/files/zh-cn/web/api/biquadfilternode/index.md b/files/zh-cn/web/api/biquadfilternode/index.md index 83eafbbb6e8da3..2cde68078ea49a 100644 --- a/files/zh-cn/web/api/biquadfilternode/index.md +++ b/files/zh-cn/web/api/biquadfilternode/index.md @@ -2,149 +2,81 @@ title: BiquadFilterNode slug: Web/API/BiquadFilterNode --- -

{{APIRef("Web Audio API")}}

+{{APIRef("Web Audio API")}} -
-

BiquadFilterNode接口表示一个简单低阶滤波器(双二阶滤波器), 通过 {{ domxref("AudioContext.createBiquadFilter()") }} 方法创建。它是一个能表示不同类型的过滤器，声调控制设备，图形均衡器的{{domxref("AudioNode")}} . 一个BiquadFilterNode(双二阶滤波器) 总是恰好有一个输入和一个输出。

-
+`BiquadFilterNode接口表示一个简单低阶滤波器(双二阶滤波器)`, 通过 {{ domxref("AudioContext.createBiquadFilter()") }} 方法创建。它是一个能表示不同类型的过滤器，声调控制设备，图形均衡器的{{domxref("AudioNode")}} . 一个`BiquadFilterNode(`双二阶滤波器`)` 总是恰好有一个输入和一个输出。 - - - - - - - - - - - - - - - - - - - - - - -
Number of inputs1
Number of outputs1
Channel count mode"max"
Channel count2 (not used in the default count mode)
Channel interpretation"speakers"
- -

属性

- -

继承属性自父级的 {{domxref("AudioNode")}}.

- -
-
{{domxref("BiquadFilterNode.frequency")}}
-
Is an a-rate {{domxref("AudioParam")}}, a double representing a frequency in the current filtering algorithm measured in hertz (Hz).
-
{{domxref("BiquadFilterNode.detune")}}
-
Is an a-rate {{domxref("AudioParam")}} representing detuning of the frequency in cents.
-
{{domxref("BiquadFilterNode.Q")}}
-
Is an a-rate {{domxref("AudioParam")}}, a double representing a Q factor, or quality factor.
-
{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}
-
Is an a-rate {{domxref("AudioParam")}}, a double representing the gain used in the current filtering algorithm.
-
{{domxref("BiquadFilterNode.type")}}
-
节点实现定义不同过滤算法的一个字符串值。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + -
The meaning of the different parameters depending of the type of the filter (detune has the same meaning regardless, so isn't listed below)
typeDescriptionfrequencyQgain
lowpassStandard second-order resonant lowpass filter with 12dB/octave rolloff. Frequencies below the cutoff pass through; frequencies above it are attenuated.The cutoff frequency.Indicates how peaked the frequency is around the cutoff. The greater the value is, the greater is the peak.Not used
highpassStandard second-order resonant highpass filter with 12dB/octave rolloff. Frequencies below the cutoff are attenuated; frequencies above it pass through.The cutoff frequency.Indicates how peaked the frequency is around the cutoff. The greater the value, the greater the peak.Not used
bandpassStandard second-order bandpass filter. Frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through.The center of the range of frequencies.Controls the width of the frequency band. The greater the Q value, the smaller the frequency band.Not used
lowshelfStandard second-order lowshelf filer. Frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged.The upper limit of the frequencies getting a boost or an attenuation.Not usedThe boost, in dB, to be applied; if negative, it will be an attenuation.
highshelfStandard second-order highshelf filer. Frequencies higher than the frequency get a boost or an attenuation; frequencies lower than it are unchanged.The lower limit of the frequencies getting a boost or an attenuation.Not usedThe boost, in dB, to be applied; if negative, it will be an attenuation.
peakingFrequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged.The middle of the frequency range getting a boost or an attenuation.Controls the width of the frequency band. The greater the Q value, the smaller the frequency band.The boost, in dB, to be applied; if negative, it will be an attenuation.
notchStandard notch filter, also called a band-stop or band-rejection filter. It is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenuated.The center of the range of frequencies.Controls the width of the frequency band. The greater the Q value, the smaller the frequency band.Not used
allpassStandard second-order allpass filter. It lets all frequencies through, but changes the phase-relationship between the various frequencies.The frequency with the maximal group delay, that is, the frequency where the center of the phase transition occurs.Controls how sharp the transition is at the medium frequency. The larger this parameter is, the sharper and larger the transition will be.Not used
Number of inputs1
Number of outputs1
Channel count mode"max"
Channel count2 (not used in the default count mode)
Channel interpretation"speakers"
-
-
+ + +## 属性 + +_继承属性自父级的_ _{{domxref("AudioNode")}}_. + +- {{domxref("BiquadFilterNode.frequency")}} + - : Is an [a-rate](/zh-CN/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}}, a double representing a frequency in the current filtering algorithm measured in hertz (Hz). +- {{domxref("BiquadFilterNode.detune")}} + - : Is an [a-rate](/zh-CN/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}} representing detuning of the frequency in [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). +- {{domxref("BiquadFilterNode.Q")}} + - : Is an [a-rate](/zh-CN/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}}, a double representing a [Q factor](http://en.wikipedia.org/wiki/Q_factor), or _quality factor_. +- {{domxref("BiquadFilterNode.gain")}} {{readonlyInline}} + - : Is an [a-rate](/zh-CN/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}}, a double representing the [gain](http://en.wikipedia.org/wiki/Gain) used in the current filtering algorithm. +- {{domxref("BiquadFilterNode.type")}} + + - : 节点实现定义不同过滤算法的一个字符串值。 + + | `type` | Description | `frequency` | `Q` | `gain` | + | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ | + | `lowpass` | Standard second-order resonant lowpass filter with 12dB/octave rolloff. Frequencies below the cutoff pass through; frequencies above it are attenuated. | The cutoff frequency. | Indicates how peaked the frequency is around the cutoff. The greater the value is, the greater is the peak. | _Not used_ | + | `highpass` | Standard second-order resonant highpass filter with 12dB/octave rolloff. Frequencies below the cutoff are attenuated; frequencies above it pass through. | The cutoff frequency. | Indicates how peaked the frequency is around the cutoff. The greater the value, the greater the peak. | _Not used_ | + | `bandpass` | Standard second-order bandpass filter. Frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through. | The center of the range of frequencies. | Controls the width of the frequency band. The greater the `Q` value, the smaller the frequency band. | _Not used_ | + | `lowshelf` | Standard second-order lowshelf filer. Frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged. | The upper limit of the frequencies getting a boost or an attenuation. | _Not used_ | The boost, in dB, to be applied; if negative, it will be an attenuation. | + | `highshelf` | Standard second-order highshelf filer. Frequencies higher than the frequency get a boost or an attenuation; frequencies lower than it are unchanged. | The lower limit of the frequencies getting a boost or an attenuation. | _Not used_ | The boost, in dB, to be applied; if negative, it will be an attenuation. | + | `peaking` | Frequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged. | The middle of the frequency range getting a boost or an attenuation. | Controls the width of the frequency band. The greater the `Q` value, the smaller the frequency band. | The boost, in dB, to be applied; if negative, it will be an attenuation. | + | `notch` | Standard [notch](http://en.wikipedia.org/wiki/Band-stop_filter) filter, also called a _band-stop_ or _band-rejection_ filter. It is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenuated. | The center of the range of frequencies. | Controls the width of the frequency band. The greater the `Q` value, the smaller the frequency band. | _Not used_ | + | `allpass` | Standard second-order [allpass](http://en.wikipedia.org/wiki/All-pass_filter#Digital_Implementation) filter. It lets all frequencies through, but changes the phase-relationship between the various frequencies. | The frequency with the maximal [group delay](http://en.wikipedia.org/wiki/Group_delay_and_phase_delay), that is, the frequency where the center of the phase transition occurs. | Controls how sharp the transition is at the medium frequency. The larger this parameter is, the sharper and larger the transition will be. | _Not used_ | -

方法

+## 方法 -

继承方法自父级的 {{domxref("AudioNode")}}.

+_继承方法自父级的 {{domxref("AudioNode")}}_. -
-
{{domxref("BiquadFilterNode.getFrequencyResponse()")}}
-
From the current filter parameter settings this method calculates the frequency response for frequencies specified in the provided array of frequencies.
-
+- {{domxref("BiquadFilterNode.getFrequencyResponse()")}} + - : From the current filter parameter settings this method calculates the frequency response for frequencies specified in the provided array of frequencies. -

例子

+## 例子 -

{{page("/en-US/docs/Web/API/AudioContext.createBiquadFilter","Example")}}

+{{page("/en-US/docs/Web/API/AudioContext.createBiquadFilter","Example")}} -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.BiquadFilterNode")}} -

相关内容

+## 相关内容 - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/blob/index.md b/files/zh-cn/web/api/blob/index.md index d89b9a9d0c4422..7107324d6c98de 100644 --- a/files/zh-cn/web/api/blob/index.md +++ b/files/zh-cn/web/api/blob/index.md @@ -2,128 +2,125 @@ title: Blob slug: Web/API/Blob --- -
{{APIRef("File API")}}
+{{APIRef("File API")}} -

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 {{DOMxRef("ReadableStream")}} 来用于数据操作。

+`Blob` 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 {{DOMxRef("ReadableStream")}} 来用于数据操作。 -

Blob 表示的不一定是 JavaScript 原生格式的数据。{{domxref("File")}} 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

+Blob 表示的不一定是 JavaScript 原生格式的数据。{{domxref("File")}} 接口基于`Blob`，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 -

要从其他非 blob 对象和数据构造一个 Blob，请使用 {{domxref("Blob.Blob", "Blob()")}} 构造函数。要创建一个 blob 数据的子集 blob，请使用 {{domxref("Blob.slice()", "slice()")}} 方法。要获取用户文件系统上的文件对应的 Blob 对象，请参阅 {{domxref("File", "File")}} 文档。

+要从其他非 blob 对象和数据构造一个 `Blob`，请使用 {{domxref("Blob.Blob", "Blob()")}} 构造函数。要创建一个 blob 数据的子集 blob，请使用 {{domxref("Blob.slice()", "slice()")}} 方法。要获取用户文件系统上的文件对应的 `Blob` 对象，请参阅 {{domxref("File", "File")}} 文档。 -

接受 Blob 对象的 API 也被列在 {{domxref("File", "File")}} 文档中。

+接受 `Blob` 对象的 API 也被列在 {{domxref("File", "File")}} 文档中。 -
注意：slice() 方法原本接受 length 作为第二个参数，以表示复制到新 Blob 对象的字节数。如果设置的参数使 start + length 超出了源 Blob 对象的大小，则返回从开始到结尾的所有数据。
+> **备注：** `slice()` 方法原本接受 `length` 作为第二个参数，以表示复制到新 `Blob` 对象的字节数。如果设置的参数使 `start + length` 超出了源 `Blob` 对象的大小，则返回从开始到结尾的所有数据。 -
注意：slice() 方法在某些浏览器和版本上带有浏览器引擎前缀：比如 Firefox 12 及更早版本的blob.mozSlice() 和 Safari 中的blob.webkitSlice()。没有浏览器引擎前缀的老版本 slice() 方法有不同的语义，并且已过时。Firefox 30 取消了对 blob.mozSlice() 的支持。
+> **备注：** `slice()` 方法在某些浏览器和版本上带有浏览器引擎前缀：比如 Firefox 12 及更早版本的`blob.mozSlice()` 和 Safari 中的`blob.webkitSlice()`。没有浏览器引擎前缀的老版本 `slice()` 方法有不同的语义，并且已过时。Firefox 30 取消了对 `blob.mozSlice()` 的支持。 -

构造函数

+## 构造函数 -
-
{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
-
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
-
+- {{domxref("Blob.Blob", "Blob(blobParts[, options])")}} + - : 返回一个新创建的 `Blob` 对象，其内容由参数中给定的数组串联组成。 -

属性

+## 属性 -
-
{{domxref("Blob.size")}} {{readonlyinline}}
-
Blob 对象中所包含数据的大小（字节）。
-
{{domxref("Blob.type")}} {{readonlyinline}}
-
一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。
-
+- {{domxref("Blob.size")}} {{readonlyinline}} + - : `Blob` 对象中所包含数据的大小（字节）。 +- {{domxref("Blob.type")}} {{readonlyinline}} + - : 一个字符串，表明该 `Blob` 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。 -

方法

+## 方法 -
-
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
-
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
-
{{domxref("Blob.stream()", "Blob.stream()")}}
-
返回一个能读取 blob 内容的 {{domxref("ReadableStream")}}。
-
{{domxref("Blob.text()", "Blob.text()")}}
-
返回一个 promise 且包含 blob 所有内容的 UTF-8 格式的 {{domxref("USVString")}}。
-
{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}
-
返回一个 promise 且包含 blob 所有内容的二进制格式的 {{domxref("ArrayBuffer")}}
-
+- {{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}} + - : 返回一个新的 `Blob` 对象，包含了源 `Blob` 对象中指定范围内的数据。 +- {{domxref("Blob.stream()", "Blob.stream()")}} + - : 返回一个能读取 blob 内容的 {{domxref("ReadableStream")}}。 +- {{domxref("Blob.text()", "Blob.text()")}} + - : 返回一个 promise 且包含 blob 所有内容的 UTF-8 格式的 {{domxref("USVString")}}。 +- {{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}} + - : 返回一个 promise 且包含 blob 所有内容的二进制格式的 {{domxref("ArrayBuffer")}} -

示例

+## 示例 -

Blob 构造函数用法举例

+### Blob 构造函数用法举例 -

{{domxref("Blob.Blob", "Blob() 构造函数")}}允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 blob：

+{{domxref("Blob.Blob", "Blob() 构造函数")}}允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 blob： -
var debug = {hello: "world"};
-var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
+```js +var debug = {hello: "world"}; +var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); +``` -
-

{{ domxref("BlobBuilder") }} 接口提供了另外一种创建Blob 对象的方式，但该方式现在已经废弃，不应继续使用：

+> **警告：** {{ domxref("BlobBuilder") }} 接口提供了另外一种创建`Blob` 对象的方式，但该方式现在已经废弃，不应继续使用： +> +> ```js +> var builder = new BlobBuilder(); +> var fileParts = ['hey!']; +> builder.append(fileParts[0]); +> var myBlob = builder.getBlob('text/xml'); +> ``` -
var builder = new BlobBuilder();
-var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
-builder.append(fileParts[0]);
-var myBlob = builder.getBlob('text/xml');
-
-
+### 示例：使用 Blob 创建一个指向类型化数组的 URL -

示例：使用 Blob 创建一个指向类型化数组的 URL

+参考下面的代码： -

参考下面的代码：

- -
var typedArray = GetTheTypedArraySomehow();
+```js
+var typedArray = GetTheTypedArraySomehow();
 var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
 var url = URL.createObjectURL(blob);
 // 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的 URL 字符串
 // 你可以像使用普通 URL 那样使用它，比如用在 img.src 上。
-
+``` -

示例：从 Blob 中提取数据

+### 示例：从 Blob 中提取数据 -

一种从 Blob 中读取内容的方法是使用 {{domxref("FileReader")}}。以下代码将 Blob 的内容作为类型数组读取：

+一种从 Blob 中读取内容的方法是使用 {{domxref("FileReader")}}。以下代码将 Blob 的内容作为类型数组读取： -
var reader = new FileReader();
+```js
+var reader = new FileReader();
 reader.addEventListener("loadend", function() {
    // reader.result 包含被转化为类型数组 typed array 的 blob
 });
-reader.readAsArrayBuffer(blob);
+reader.readAsArrayBuffer(blob); +``` -

另一种读取 Blob 中内容的方式是使用 Response 对象。下述代码将 Blob 中的内容读取为文本：

+另一种读取 Blob 中内容的方式是使用 Response 对象。下述代码将 Blob 中的内容读取为文本： -
var text = await (new Response(blob)).text();
-
+```js +var text = await (new Response(blob)).text(); +``` -

通过使用 {{domxref("FileReader")}} 的其它方法可以把 Blob 读取为字符串或者数据 URL。

+通过使用 {{domxref("FileReader")}} 的其它方法可以把 Blob 读取为字符串或者数据 URL。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.Blob")}}

+{{Compat("api.Blob")}} -

[1]WebKit 和 Opera 11.10 版本实现的 slice() 使用 length 来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，WebKit 已经将其移除，并添加了 Blob.webkitSlice() 来支持这个新的语法。

+\[1][WebKit](http://trac.webkit.org/changeset/55670) 和 [Opera 11.10](http://www.opera.com/docs/specs/presto28/file/#blob) 版本实现的 `slice()` 使用 `length` 来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，WebKit 已经将其移除，并添加了 [`Blob.webkitSlice()`](http://trac.webkit.org/changeset/83873) 来支持这个新的语法。 -

[2] Firefox 4 版本实现的 slice() 使用 length来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，Gecko 已经将其移除，并添加了 mozSlice() 来支持这个新的语法。

+\[2] [Firefox 4](https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6) 版本实现的 `slice()` 使用 `length`来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，Gecko 已经将其移除，并添加了 `mozSlice()` 来支持这个新的语法。 -

[3] 在 Gecko 12.0 {{ geckoRelease("12.0") }} 之前，有个 bug 会影响 slice() 的行为，就是参数 start 和 end 的值不能超出 64 位有符号数字范围，现已修复。

+\[3] 在 Gecko 12.0 {{ geckoRelease("12.0") }} 之前，有个 bug 会影响 `slice()` 的行为，就是参数 `start` 和 `end` 的值不能超出 64 位有符号数字范围，现已修复。 -

[4] 请看 {{bug("1048325")}}。

+\[4] 请看 {{bug("1048325")}}。 -

Gecko 备注：特权许可

+## Gecko 备注：特权许可 -

要使用 chrome 代码，JSM 和 Bootstrap 作用域，你必须像这样导入它：

+要使用 chrome 代码，JSM 和 Bootstrap 作用域，你必须像这样导入它： -
Cu.importGlobalProperties(['Blob']);
+```js +Cu.importGlobalProperties(['Blob']); +``` -

Blob可以在 Worker 作用域内使用。

+`Blob`可以在 Worker 作用域内使用。 -

相关链接

+## 相关链接 - +- {{domxref("BlobBuilder")}} +- {{domxref("FileReader")}} +- {{domxref("File")}} +- {{domxref("URL.createObjectURL")}} +- [Components.utils.importGlobalProperties](/zh-CN/docs/Components.utils.importGlobalProperties) diff --git a/files/zh-cn/web/api/blob/slice/index.md b/files/zh-cn/web/api/blob/slice/index.md index d728d90026a273..eba8742a46144e 100644 --- a/files/zh-cn/web/api/blob/slice/index.md +++ b/files/zh-cn/web/api/blob/slice/index.md @@ -2,42 +2,40 @@ title: Blob.slice slug: Web/API/Blob/slice --- -

{{APIRef("File API")}}

+{{APIRef("File API")}} -

Blob.slice() 方法用于创建一个包含源 {{domxref("Blob")}}的指定字节范围内的数据的新 {{domxref("Blob")}} 对象。

+**`Blob.slice() `** 方法用于创建一个包含源 {{domxref("Blob")}}的指定字节范围内的数据的新 {{domxref("Blob")}} 对象。 -
注释： 请注意，在某些浏览器和版本上具有供应商前缀：例如：Firefox 12 及更早版本的 blob.mozSlice() 和 Safari 中的 blob.webkitSlice(). slice() 方法的旧版本，没有供应商前缀，具有不同的语义，并且已过时。
+> **备注：** 请注意，在某些浏览器和版本上具有供应商前缀：例如：Firefox 12 及更早版本的 blob.mozSlice() 和 Safari 中的 blob.webkitSlice(). slice() 方法的旧版本，没有供应商前缀，具有不同的语义，并且已过时。 -

语法

+## 语法 -
var blob = instanceOfBlob.slice([start [, end [, contentType]]]};
+``` +var blob = instanceOfBlob.slice([start [, end [, contentType]]]}; +``` -

参数

+### 参数 -
-
start {{ optional_inline() }}
-
这个参数代表 {{domxref("Blob")}} 里的下标，表示第一个会被会被拷贝进新的 {{domxref("Blob")}} 的字节的起始位置。如果你传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说，-10 将会是 {{domxref("Blob")}} 的倒数第十个字节。它的默认值是 0，如果你传入的 start 的长度大于源 {{domxref("Blob")}} 的长度，那么返回的将会是一个长度为 0 并且不包含任何数据的一个 {{domxref("Blob")}} 对象。
-
end {{ optional_inline() }}
-
这个参数代表的是 {{domxref("Blob")}} 的一个下标，这个下标 -1 的对应的字节将会是被拷贝进新的{{domxref("Blob")}} 的最后一个字节。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说， -10 将会是 {{domxref("Blob")}} 的倒数第十个字节。它的默认值就是它的原始长度 (size).
-
contentType {{ optional_inline() }}
-
给新的 {{domxref("Blob")}} 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。
-
+- `start` {{ optional_inline() }} + - : 这个参数代表 {{domxref("Blob")}} 里的下标，表示第一个会被会被拷贝进新的 {{domxref("Blob")}} 的字节的起始位置。如果你传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说，-10 将会是 {{domxref("Blob")}} 的倒数第十个字节。它的默认值是 0，如果你传入的 start 的长度大于源 {{domxref("Blob")}} 的长度，那么返回的将会是一个长度为 0 并且不包含任何数据的一个 {{domxref("Blob")}} 对象。 +- `end` {{ optional_inline() }} + - : 这个参数代表的是 {{domxref("Blob")}} 的一个下标，这个下标 -1 的对应的字节将会是被拷贝进新的{{domxref("Blob")}} 的最后一个字节。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说， -10 将会是 {{domxref("Blob")}} 的倒数第十个字节。它的默认值就是它的原始长度 (`size`). +- `contentType` {{ optional_inline() }} + - : 给新的 {{domxref("Blob")}} 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。 -

返回值

+### 返回值 -

一个新的 {{domxref("Blob")}} 对象，它包含了原始 {{domxref("Blob")}} 对象的某一个段的数据。

+一个新的 {{domxref("Blob")}} 对象，它包含了原始 {{domxref("Blob")}} 对象的某一个段的数据。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容

+## 浏览器兼容 {{Compat("api.Blob.slice")}} -

参见

+## 参见 -
    -
  • {{domxref("Blob")}}
    • -
  • {{domxref("BlobBuilder")}}
    • -
+- {{domxref("Blob")}} +- {{domxref("BlobBuilder")}} diff --git a/files/zh-cn/web/api/blobbuilder/index.md b/files/zh-cn/web/api/blobbuilder/index.md index a645fe805a6cb7..ec10e39697d104 100644 --- a/files/zh-cn/web/api/blobbuilder/index.md +++ b/files/zh-cn/web/api/blobbuilder/index.md @@ -2,35 +2,32 @@ title: BlobBuilder slug: Web/API/BlobBuilder --- -

{{ deprecated_header() }}

-

{{ SeeCompatTable() }}

-

The BlobBuilder interface provides an easy way to construct {{ domxref("Blob") }} objects. Just create a BlobBuilder and append chunks of data to it by calling the append() method. When you're done building your blob, call getBlob() to retrieve a {{ domxref("Blob") }} containing the data you sent into the blob builder.

-
- 注：BlobBuilder接口已经废弃，请使用新版草案中引入的 {{domxref('Blob') }}构造函数。
-

方法概述

- - - - - - - - - - - - - - - - - - -
void append(in ArrayBuffer data);
void append(in Blob data);
void append(in String data, [optional] in String endings);
Blob getBlob([optional] in DOMString contentType);
File getFile(in DOMString name, [optional] in DOMString contentType);
-

方法

-

append()

-

Appends the contents of the specified JavaScript object to the {{ domxref("Blob") }} being built. If the value you specify isn't a {{ domxref("Blob") }}, ArrayBuffer, or String, the value is coerced to a string before being appended to the blob.

-
void append(
+{{ deprecated_header() }}
+
+{{ SeeCompatTable() }}
+
+The `BlobBuilder` interface provides an easy way to construct {{ domxref("Blob") }} objects. Just create a `BlobBuilder` and append chunks of data to it by calling the [`append()`](<#append()>) method. When you're done building your blob, call [`getBlob()`](<#getBlob()>) to retrieve a {{ domxref("Blob") }} containing the data you sent into the blob builder.
+
+> **备注：** `BlobBuilder`接口已经废弃，请使用新版草案中引入的 {{domxref('Blob') }}构造函数。
+
+## 方法概述
+
+```js
+void append(in ArrayBuffer data);
+void append(in Blob data);
+void append(in String data, [optional] in String endings);
+Blob getBlob([optional] in DOMString contentType);
+File getFile(in DOMString name, [optional] in DOMString contentType);
+```
+
+## 方法
+
+### append()
+
+Appends the contents of the specified JavaScript object to the {{ domxref("Blob") }} being built. If the value you specify isn't a {{ domxref("Blob") }}, [`ArrayBuffer`](/zh-CN/JavaScript_typed_arrays/ArrayBuffer), or [`String`](/zh-CN/JavaScript/Reference/Global_Objects/String), the value is coerced to a string before being appended to the blob.
+
+```js
+void append(
   in ArrayBuffer data
 );
 
@@ -43,59 +40,62 @@ void append(
   in String data,
   [optional] in String endings
 );
-
-
参数
-
-
- data
-
- The data to append to the {{ domxref("Blob") }} being constructed.
-
- endings
-
- Specifies how strings containing \n are to be written out. This can be "transparent" (endings unchanged) or "native" (endings changed to match host OS filesystem convention). The default value is "transparent".
-
-

getBlob()

-

Returns the {{ domxref("Blob") }} object that has been constructed using the data passed through calls to append().

-
Blob getBlob(
+```
+
+###### 参数
+
+- `data`
+  - : The data to append to the {{ domxref("Blob") }} being constructed.
+- `endings`
+  - : Specifies how strings containing `\n` are to be written out. This can be `"transparent"` (endings unchanged) or `"native"` (endings changed to match host OS filesystem convention). The default value is `"transparent"`.
+
+### getBlob()
+
+Returns the {{ domxref("Blob") }} object that has been constructed using the data passed through calls to [`append()`](<#append()>).
+
+```
+Blob getBlob(
   in DOMString contentType {{ optional_inline() }}
 );
-
-
参数
-
-
- contentType {{ optional_inline() }}
-
- The MIME type of the data to be returned in the {{ domxref("Blob") }}. This will be the value of the Blob object's type property.
-
-
返回值
-

A {{ domxref("Blob") }} object containing all of the data passed to any calls to append() made since the BlobBuilder was created. This also resets the BlobBuilder so that the next call to append() is starting a new, empty blob.

-

getFile() {{ non-standard_inline() }}

-

返回一个{{ domxref("File") }}对象。

-
File getFile(
+```
+
+###### 参数
+
+- contentType {{ optional_inline() }}
+  - : The MIME type of the data to be returned in the {{ domxref("Blob") }}. This will be the value of the `Blob` object's type property.
+
+###### 返回值
+
+A {{ domxref("Blob") }} object containing all of the data passed to any calls to [`append()`](<#append()>) made since the `BlobBuilder` was created. This also resets the `BlobBuilder` so that the next call to [`append()`](<#append()>) is starting a new, empty blob.
+
+### getFile() {{ non-standard_inline() }}
+
+返回一个{{ domxref("File") }}对象。
+
+```
+File getFile(
   in DOMString name,
   [optional] in DOMString contentType
 );
-
-
参数
-
-
- name
-
- 文件名。
-
- contentType {{ optional_inline() }}
-
- 设置返回的{{ domxref("File") }}对象中的数据的 MIME 类型。这个值将会成为返回的File对象的 type 属性的值。
-
-
返回值
-

一个{{ domxref("File") }}对象。

-

浏览器兼容性

+``` + +###### 参数 + +- name + - : 文件名。 +- contentType {{ optional_inline() }} + - : 设置返回的{{ domxref("File") }}对象中的数据的 MIME 类型。这个值将会成为返回`的File`对象的 type 属性的值。 + +###### 返回值 + +一个{{ domxref("File") }}对象。 + +## 浏览器兼容性 + {{Compat("api.BlobBuilder")}} -

相关链接

- +## 相关链接 + +- [File API Specification: BlobBuilder](http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder) +- {{ domxref("Blob") }} +- {{ domxref("File") }} diff --git a/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.md b/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.md index 40f85ef1ea27e6..1ed85ac7095158 100644 --- a/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.md +++ b/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.md @@ -2,70 +2,75 @@ title: 'BroadcastChannel: messageerror event' slug: Web/API/BroadcastChannel/messageerror_event --- -
{{APIRef}}
+{{APIRef}} -

当频道收到一条无法反序列化的消息时会在 {{domxref('BroadcastChannel')}} 对象上触发 messageerror 事件。

+当频道收到一条无法反序列化的消息时会在 {{domxref('BroadcastChannel')}} 对象上触发 `messageerror` 事件。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("MessageEvent")}}
Event handler propertyonmessageerror
BubblesNo
CancelableNo
Interface{{domxref("MessageEvent")}}
Event handler property + onmessageerror +
-

示例

+## 示例 -

以下代码使用 addEventListener 来监听消息和错误：

+以下代码使用 [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) 来监听消息和错误： -
const channel = new BroadcastChannel('example-channel');
+```js
+const channel = new BroadcastChannel('example-channel');
 
-channel.addEventListener('message', (event) => {
+channel.addEventListener('message', (event) => {
   received.textContent = event.data;
 });
 
-channel.addEventListener('messageerror', (event) => {
+channel.addEventListener('messageerror', (event) => {
   console.error(event);
-});
+}); +``` -

使用 onmessage 和 onmessageerror 事件处理程序来实现相同效果：

+使用 [`onmessage`](/en-US/docs/Web/API/BroadcastChannel/onmessage) 和 [`onmessageerror`](/en-US/docs/Web/API/BroadcastChannel/onmessageerror) 事件处理程序来实现相同效果： -
const channel = new BroadcastChannel('example-channel');
+```js
+const channel = new BroadcastChannel('example-channel');
 
-channel.onmessage = (event) => {
+channel.onmessage = (event) => {
   received.textContent = event.data;
 };
 
-channel.onmessageerror = (event) => {
+channel.onmessageerror = (event) => {
   console.log(event);
 };
-
+``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.BroadcastChannel.messageerror_event")}}

+{{Compat("api.BroadcastChannel.messageerror_event")}} -

另见

+## 另见 - +- 相关事件：[`message`](/docs/Web/API/BroadcastChannel/message_event) diff --git a/files/zh-cn/web/api/cache/addall/index.md b/files/zh-cn/web/api/cache/addall/index.md index 39149a7a8312d9..7e41cff6b5f5b8 100644 --- a/files/zh-cn/web/api/cache/addall/index.md +++ b/files/zh-cn/web/api/cache/addall/index.md @@ -2,64 +2,45 @@ title: Cache.addAll() slug: Web/API/Cache/addAll --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

概要

+## 概要 -

{{domxref("Cache")}} 接口的 addAll() 方法接受一个 URL 数组，检索它们，并将生成的 response 对象添加到给定的缓存中。 在检索期间创建的 request 对象成为存储的 response 操作的 key。

+{{domxref("Cache")}} 接口的 **`addAll()`** 方法接受一个 URL 数组，检索它们，并将生成的 response 对象添加到给定的缓存中。 在检索期间创建的 request 对象成为存储的 response 操作的 key。 -
-

Note: addAll() will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting put() operation would overwrite a previous cache entry created by the same addAll() method.

-
+> **备注：** `addAll()` will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting `put()` operation would overwrite a previous cache entry created by the same `addAll()` method. -
-

Note: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

-
+> **备注：** Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in. -

语法

+## 语法 -
cache.addAll(requests[]).then(function() {
+```js
+cache.addAll(requests[]).then(function() {
   //requests have been added to the cache
 });
-
+``` -

参数

+### 参数 -
-
requests
-
要获取并添加到缓存的字符串 URL 数组。
-
+- requests + - : 要获取并添加到缓存的字符串 URL 数组。 -

返回值

+### 返回值 -

A {{jsxref("Promise")}} that resolves with void.

+A {{jsxref("Promise")}} that resolves with void. -

Exceptions

+### Exceptions - - - - - - - - - - - - - -
ExceptionHappens when
TypeError -

The URL scheme is not http or https.

+| **Exception** | **Happens when** | +| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `TypeError` | The URL scheme is not `http` or `https`.The Response status is not in the 200 range (i.e., not a successful response.) This occurs if the request does not return successfully, but also if the request is a _cross-origin no-cors_ request (in which case the reported status is always 0.) | -

The Response status is not in the 200 range (i.e., not a successful response.) This occurs if the request does not return successfully, but also if the request is a cross-origin no-cors request (in which case the reported status is always 0.)

-
+## 示例 -

示例

+此代码块等待一个 {{domxref("InstallEvent")}} 事件触发，然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理该应用程序的安装进程。 包括调用 {{domxref("CacheStorage.open")}} 创建一个新的 cache，然后使用 `addAll()` 添加一系列资源。 -

此代码块等待一个 {{domxref("InstallEvent")}} 事件触发，然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理该应用程序的安装进程。 包括调用 {{domxref("CacheStorage.open")}} 创建一个新的 cache，然后使用 addAll() 添加一系列资源。

- -
this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -77,20 +58,18 @@ slug: Web/API/Cache/addAll
     })
   );
 });
-
+``` -

规范

+### 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.Cache.addAll")}} -

参见

+## 参见 - +- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/zh-cn/web/api/cache/index.md b/files/zh-cn/web/api/cache/index.md index e4ef03be98e112..1420f5b1b6e52f 100644 --- a/files/zh-cn/web/api/cache/index.md +++ b/files/zh-cn/web/api/cache/index.md @@ -2,66 +2,55 @@ title: Cache slug: Web/API/Cache --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

Cache 接口为缓存的 Request / Response 对象对提供存储机制，例如，作为{{domxref("ServiceWorker")}} 生命周期的一部分。请注意，Cache 接口像 workers 一样，是暴露在 window 作用域下的。尽管它被定义在 service worker 的标准中， 但是它不必一定要配合 service worker 使用。

+**`Cache`** 接口为缓存的 [`Request`](http://fetch.spec.whatwg.org/#request) / `Response `对象对提供存储机制，例如，作为{{domxref("ServiceWorker")}} 生命周期的一部分。请注意，Cache 接口像 workers 一样，是暴露在 window 作用域下的。尽管它被定义在 service worker 的标准中， 但是它不必一定要配合 service worker 使用。 -

一个域可以有多个命名 Cache 对象。你需要在你的脚本 (例如，在 {{domxref("ServiceWorker")}} 中) 中处理缓存更新的方式。除非明确地更新缓存，否则缓存将不会被更新；除非删除，否则缓存数据不会过期。使用 {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开一个 Cache 对象，再使用 Cache 对象的方法去处理缓存。

+一个域可以有多个命名 Cache 对象。你需要在你的脚本 (例如，在 {{domxref("ServiceWorker")}} 中) 中处理缓存更新的方式。除非明确地更新缓存，否则缓存将不会被更新；除非删除，否则缓存数据不会过期。使用 {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开一个 Cache 对象，再使用 Cache 对象的方法去处理缓存。 -

你需要定期地清理缓存条目，因为每个浏览器都硬性限制了一个域下缓存数据的大小。缓存配额使用估算值，可以使用 {{domxref("StorageEstimate")}} API 获得。浏览器尽其所能去管理磁盘空间，但它有可能删除一个域下的缓存数据。浏览器要么自动删除特定域的全部缓存，要么全部保留。确保按名称安装版本缓存，并仅从可以安全操作的脚本版本中使用缓存。查看 Deleting old caches 获取更多信息。

+你需要定期地清理缓存条目，因为每个浏览器都硬性限制了一个域下缓存数据的大小。缓存配额使用估算值，可以使用 {{domxref("StorageEstimate")}} API 获得。浏览器尽其所能去管理磁盘空间，但它有可能删除一个域下的缓存数据。浏览器要么自动删除特定域的全部缓存，要么全部保留。确保按名称安装版本缓存，并仅从可以安全操作的脚本版本中使用缓存。查看 [Deleting old caches](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches) 获取更多信息。 -
-

Note: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}和{{domxref("Cache.addAll")}}只能在GET请求下使用。

-
+> **备注：** {{domxref("Cache.put")}}, {{domxref("Cache.add")}}和{{domxref("Cache.addAll")}}只能在`GET`请求下使用。 -
-

Note: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

-
+> **备注：** Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in. -
-

Note: 自 Chrome 46 版本起，Cache API 只保存安全来源的请求，即那些通过 HTTPS 服务的请求。

-
+> **备注：** 自 Chrome 46 版本起，Cache API 只保存安全来源的请求，即那些通过 HTTPS 服务的请求。 -
-

Note: The key matching algorithm depends on the VARY header in the value. So matching a new key requires looking at both key and value for entries in the Cache.

-
+> **备注：** The key matching algorithm depends on the [VARY header](https://www.fastly.com/blog/best-practices-for-using-the-vary-header) in the value. So matching a new key requires looking at both key and value for entries in the Cache. -
-

Note: Cache API 不支持 HTTP 缓存头。

-
+> **备注：** Cache API 不支持 HTTP 缓存头。 -

方法

+## 方法 -
-
{{domxref("Cache.match", "Cache.match(request, options)")}}
-
返回一个 {{jsxref("Promise")}}对象，resolve 的结果是跟 {{domxref("Cache")}} 对象匹配的第一个已经缓存的请求。
-
{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}
-
返回一个{{jsxref("Promise")}} 对象，resolve 的结果是跟{{domxref("Cache")}}对象匹配的所有请求组成的数组。
-
{{domxref("Cache.add", "Cache.add(request)")}}
-
抓取这个 URL，检索并把返回的 response 对象添加到给定的 Cache 对象。这在功能上等同于调用 fetch(), 然后使用 Cache.put() 将 response 添加到 cache 中。
-
{{domxref("Cache.addAll", "Cache.addAll(requests)")}}
-
抓取一个 URL 数组，检索并把返回的 response 对象添加到给定的 Cache 对象。
-
{{domxref("Cache.put", "Cache.put(request, response)")}}
-
同时抓取一个请求及其响应，并将其添加到给定的 cache。
-
{{domxref("Cache.delete", "Cache.delete(request, options)")}}
-
搜索 key 值为 request 的{{domxref("Cache")}} 条目。如果找到，则删除该{{domxref("Cache")}} 条目，并且返回一个 resolve 为 true 的{{jsxref("Promise")}}对象；如果未找到，则返回一个 resolve 为 false 的{{jsxref("Promise")}}对象。
-
{{domxref("Cache.keys", "Cache.keys(request, options)")}}
-
返回一个{{jsxref("Promise")}}对象，resolve 的结果是{{domxref("Cache")}}对象 key 值组成的数组。
-
+- {{domxref("Cache.match", "Cache.match(request, options)")}} + - : 返回一个 {{jsxref("Promise")}}对象，resolve 的结果是跟 {{domxref("Cache")}} 对象匹配的第一个已经缓存的请求。 +- {{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} + - : 返回一个{{jsxref("Promise")}} 对象，resolve 的结果是跟{{domxref("Cache")}}对象匹配的所有请求组成的数组。 +- {{domxref("Cache.add", "Cache.add(request)")}} + - : 抓取这个 URL，检索并把返回的 response 对象添加到给定的 Cache 对象。这在功能上等同于调用 fetch(), 然后使用 Cache.put() 将 response 添加到 cache 中。 +- {{domxref("Cache.addAll", "Cache.addAll(requests)")}} + - : 抓取一个 URL 数组，检索并把返回的 response 对象添加到给定的 Cache 对象。 +- {{domxref("Cache.put", "Cache.put(request, response)")}} + - : 同时抓取一个请求及其响应，并将其添加到给定的 cache。 +- {{domxref("Cache.delete", "Cache.delete(request, options)")}} + - : 搜索 key 值为 request 的{{domxref("Cache")}} 条目。如果找到，则删除该{{domxref("Cache")}} 条目，并且返回一个 resolve 为 true 的{{jsxref("Promise")}}对象；如果未找到，则返回一个 resolve 为 false 的{{jsxref("Promise")}}对象。 +- {{domxref("Cache.keys", "Cache.keys(request, options)")}} + - : 返回一个{{jsxref("Promise")}}对象，resolve 的结果是{{domxref("Cache")}}对象 key 值组成的数组。 -

示例

+## 示例 -

此代码段来自 service worker selective caching sample. (请参阅 selective caching live) 。该代码使用{{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开任何具有以font/开始的Content-Type 头的{{domxref("Cache")}}对象。

+此代码段来自 [service worker selective caching sample](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js). (请参阅 [selective caching live](https://googlechrome.github.io/samples/service-worker/selective-caching/)) 。该代码使用{{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开任何具有以`font/开始的`Content-Type 头的{{domxref("Cache")}}对象。 -

代码然后使用{{domxref("Cache.match", "Cache.match(request, options)")}}查看缓存中是否已经有一个匹配的 font，如果是，则返回它。 如果没有匹配的字体，代码将通过网络获取字体，并使用 {{domxref("Cache.put","Cache.put(request, response)")}}来缓存获取的资源。

+代码然后使用{{domxref("Cache.match", "Cache.match(request, options)")}}查看缓存中是否已经有一个匹配的 font，如果是，则返回它。 如果没有匹配的字体，代码将通过网络获取字体，并使用 {{domxref("Cache.put","Cache.put(request, response)")}}来缓存获取的资源。 -

代码处理从{{domxref("Globalfetch.fetch","fetch()")}} 操作抛出的异常。 请注意，HTTP 错误响应（例如 404）不会触发异常。 它将返回一个具有相应错误代码集的正常响应对象。

+代码处理从{{domxref("Globalfetch.fetch","fetch()")}} 操作抛出的异常。 请注意，HTTP 错误响应（例如 404）不会触发异常。 它将返回一个具有相应错误代码集的正常响应对象。 -

该代码片段还展示了服务工作线程使用的缓存版本控制的最佳实践。 虽然在这个例子中只有一个缓存，但同样的方法可用于多个缓存。 它将缓存的速记标识符映射到特定的版本化缓存名称。 代码还会删除命名不在 CURRENT_CACHES 中的所有缓存。

+该代码片段还展示了服务工作线程使用的缓存版本控制的最佳实践。 虽然在这个例子中只有一个缓存，但同样的方法可用于多个缓存。 它将缓存的速记标识符映射到特定的版本化缓存名称。 代码还会删除命名不在 CURRENT_CACHES 中的所有缓存。 -
注意： 在 Chrome 中，请访问 chrome://inspect/#service-workers ，然后单击注册的服务工作线程下面的“inspect”链接，查看 service-worker.js 脚本正在执行的各种操作的日志记录。
+> **备注：** **注意：** 在 Chrome 中，请访问 chrome://inspect/#service-workers ，然后单击注册的服务工作线程下面的“inspect”链接，查看 [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) 脚本正在执行的各种操作的日志记录。 -
var CACHE_VERSION = 1;
+```js
+var CACHE_VERSION = 1;
 
 // 简写标识符映射到特定版本的缓存。
 var CURRENT_CACHES = {
@@ -111,22 +100,21 @@ self.addEventListener('fetch', function(event) {
       });
     })
   );
-});
+}); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.Cache")}} -

参见

+## 参见 - +- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Service workers basic code example](https://github.com/mdn/sw-test) +- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) +- {{jsxref("Promise")}} +- [Using web workers](/zh-CN/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/zh-cn/web/api/cache/keys/index.md b/files/zh-cn/web/api/cache/keys/index.md index 563980927e6f1f..d9ee455028873d 100644 --- a/files/zh-cn/web/api/cache/keys/index.md +++ b/files/zh-cn/web/api/cache/keys/index.md @@ -2,65 +2,61 @@ title: Cache.keys() slug: Web/API/Cache/keys --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

{{domxref("Cache")}} 接口的 keys() 方法返回一个 {{jsxref("Promise")}} ，这个 {{jsxref("Promise")}} 将解析为一个{{domxref("Cache")}} 键的数组。

+{{domxref("Cache")}} 接口的 **`keys()`** 方法返回一个 {{jsxref("Promise")}} ，这个 {{jsxref("Promise")}} 将解析为一个{{domxref("Cache")}} 键的数组。 -

请求将以它们被插入的顺序返回。

+请求将以它们被插入的顺序返回。 -
-

注意: 具有相同 URL 但不同请求头的请求，如果它们的响应头中有 VARY 头部，则他们可以被返回。

-
+> **备注：** 具有相同 URL 但不同请求头的请求，如果它们的响应头中有 VARY 头部，则他们可以被返回。 -

语法

+## 语法 -
cache.keys(request,{options}).then(function(keys) {
+```js
+cache.keys(request,{options}).then(function(keys) {
   //do something with your array of requests
 });
-
+``` -

返回值

+### 返回值 -

返回一个解析为 {{domxref("Cache")}} 键数组的 {{jsxref("Promise")}}。

+返回一个解析为 {{domxref("Cache")}} 键数组的 {{jsxref("Promise")}}。 -

参数

+### 参数 -
-
request {{optional_inline}}
-
如果一个相关键被指定，则返对应的 {{domxref("Request")}} 。
-
options {{optional_inline}}
-
一个对象，它的属性决定了 keys 操作中的匹配操作是如何执行的。可选的属性有： -
    -
  • ignoreSearch: 一个 {{domxref("Boolean")}} 值，指定了匹配操作是否忽略 url 中的查询部分。如果为 true ，在执行匹配操作时， http://foo.com/?value=bar 的 ?value=bar 部分将会被忽。默认为 false 。
    • -
  • ignoreMethod: 一个 {{domxref("Boolean")}} 值，当为 true 时， 将会阻止匹配操作验证 {{domxref("Request")}} 的 HTTP 方法（通常只有 GET 和 HEAD 方法被允许）。默认为 false 。
    • -
  • ignoreVary: 一个 {{domxref("Boolean")}} 值，当为 true 时，告诉匹配操作不要验证 VARY 头部。换句话说，如果 URL 匹配，你会得到一个匹配而不管 {{domxref("Response")}} 对象是否有 VARY 头部。默认为 false 。
    • -
  • cacheName: 一个 {{domxref("DOMString")}} 值，描述了在一个特定的 cache 中进行匹配。注意这个选项会被 Cache.keys() 方法忽略。
    • -
-
-
+- request {{optional_inline}} + - : 如果一个相关键被指定，则返对应的 {{domxref("Request")}} 。 +- options {{optional_inline}} -

示例

+ - : 一个对象，它的属性决定了 keys 操作中的匹配操作是如何执行的。可选的属性有： -
caches.open('v1').then(function(cache) {
+    - `ignoreSearch`: 一个 {{domxref("Boolean")}} 值，指定了匹配操作是否忽略 url 中的查询部分。如果为 true ，在执行匹配操作时， `http://foo.com/?value=bar` 的 ` ?value=bar 部分将会被忽。默认为 ``false 。 `
+    - `ignoreMethod`: 一个 {{domxref("Boolean")}} 值，当为 true 时， 将会阻止匹配操作验证 {{domxref("Request")}} 的 HTTP 方法（通常只有 GET 和 HEAD 方法被允许）。默认为 false 。
+    - `ignoreVary`: 一个 {{domxref("Boolean")}} 值，当为 `true 时，告诉匹配操作不要验证 VARY 头部。换句话说，如果 URL 匹配，你会得到一个匹配而不管` {{domxref("Response")}} 对象是否有 VARY 头部。默认为 false 。
+    - `cacheName`: 一个 {{domxref("DOMString")}} 值，描述了在一个特定的 cache 中进行匹配。注意这个选项会被 Cache.keys() 方法忽略。
+
+## 示例
+
+```js
+caches.open('v1').then(function(cache) {
   cache.keys().then(function(keys) {
     keys.forEach(function(request, index, array) {
       cache.delete(request);
     });
   });
-})
+}) +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.Cache.keys")}} -

参见

+## 参见 - +- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/zh-cn/web/api/cache/match/index.md b/files/zh-cn/web/api/cache/match/index.md index f5bd8956df4d3d..007f4d76346810 100644 --- a/files/zh-cn/web/api/cache/match/index.md +++ b/files/zh-cn/web/api/cache/match/index.md @@ -2,52 +2,49 @@ title: Cache.match() slug: Web/API/Cache/match --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

{{domxref("Cache")}} 接口的 match() 方法，返回一个 {{jsxref("Promise")}} 解析为 (resolve to) 与 {{domxref("Cache")}} 对象中的第一个匹配请求相关联的{{domxref("Response")}} 。如果没有找到匹配，{{jsxref("Promise")}} 解析为 {{jsxref("undefined")}}。

+{{domxref("Cache")}} 接口的 **`match()`** 方法，返回一个 {{jsxref("Promise")}} 解析为 (resolve to) 与 {{domxref("Cache")}} 对象中的第一个匹配请求相关联的{{domxref("Response")}} 。如果没有找到匹配，{{jsxref("Promise")}} 解析为 {{jsxref("undefined")}}。 -

语法

+## 语法 -
cache.match(request,{options}).then(function(response) {
+```js
+cache.match(request,{options}).then(function(response) {
   //操作 response
 });
-
+``` -

返回值

+### 返回值 -

一个 {{jsxref("Promise")}} 对象，该对象解析为第一个匹配请求的 {{domxref("Response")}} 对象，如果没有匹配到，则解析到 {{jsxref("undefined")}} 。

+一个 {{jsxref("Promise")}} 对象，该对象解析为第一个匹配请求的 {{domxref("Response")}} 对象，如果没有匹配到，则解析到 {{jsxref("undefined")}} 。 -
-

Note: Cache.match() 基本上和 {{domxref("Cache.matchAll()")}} 一样，只不过 Cache.match() 只解析为 response[0] （第一个匹配的响应 (response) 对象） 而不是 response[] （所有响应对象组成的数组）。

-
+> **备注：** `Cache.match()` 基本上和 {{domxref("Cache.matchAll()")}} 一样，只不过 `Cache.match()` 只解析为 `response[0]` （第一个匹配的响应 (response) 对象） 而不是 `response[]` （所有响应对象组成的数组）。 -

参数

+### 参数 -
-
request
-
在{{domxref("Cache")}}对象中查找的{{domxref("Request")}}对象对应的 response。这个{{domxref("Request")}}可以是 object 或者是一个 URL.
-
options {{optional_inline}}
-
一个为 match 操作设置选项的对象。有效的选项如下： -
    -
  • ignoreSearch: 一个 {{domxref("Boolean")}} 值用来设置是否忽略 url 中的 query 部分。例如，如果该参数设置为 true ，那么 http://foo.com/?value=bar 中的 ?value=bar 部分就会在匹配中被忽略。该选项默认为 false。
    • -
  • ignoreMethod: 一个 {{domxref("Boolean")}} 值，如果设置为 true在匹配时就不会验证 {{domxref("Request")}} 对象的http 方法 (通常只允许是 GET 或 HEAD 。) 该参数默认值为 false。
    • -
  • ignoreVary: 一个 {{domxref("Boolean")}} 值，该值如果为 true 则匹配时不进行 VARY 部分的匹配。例如，如果一个 URL 匹配，此时无论{{domxref("Response")}}对象是否包含VARY头部，都会认为是成功匹配。该参数默认为 false。
    • -
  • cacheName: 一个 {{domxref("DOMString")}} ，代表一个具体的要被搜索的缓存。注意该选项被 Cache.match()方法忽略。
    • -
-
-
+- request + - : 在{{domxref("Cache")}}对象中查找的{{domxref("Request")}}对象对应的 response。这个{{domxref("Request")}}可以是 object 或者是一个 URL. +- options {{optional_inline}} -

例子

+ - : 一个为 `match` 操作设置选项的对象。有效的选项如下： -

这个是个来自 custom offline page 的例子 (live demo)。

+ - `ignoreSearch`: 一个 {{domxref("Boolean")}} 值用来设置是否忽略 url 中的 query 部分。例如，如果该参数设置为 `true` ，那么 `http://foo.com/?value=bar 中的` `?value=bar` 部分就会在匹配中被忽略。该选项默认为 `false`。 + - `ignoreMethod`: 一个 {{domxref("Boolean")}} 值，如果设置为 `true`在匹配时就不会验证 {{domxref("Request")}} 对象的`http` 方法 (通常只允许是 `GET` 或 `HEAD` 。) 该参数默认值为 `false`。 + - `ignoreVary`: 一个 {{domxref("Boolean")}} 值，该值如果为 `true` 则匹配时不进行 `VARY` 部分的匹配。例如，如果一个 URL 匹配，此时无论{{domxref("Response")}}对象是否包含`VARY`头部，都会认为是成功匹配。该参数默认为 `false`。 + - `cacheName`: 一个 {{domxref("DOMString")}} ，代表一个具体的要被搜索的缓存。注意该选项被 `Cache.match()`方法忽略。 -

下面的例子在请求失败时提供特定的数据。 catch() 在 fetch() 的调用抛出异常时触发。在 catch() 语句中， match()用来返回正确的响应。

+## 例子 -

在这个例子中，我们决定只缓存通过 GET 取得的 HTML 文档. 如果 if() 条件是 false，那么这个 fetch 处理器就不会处理这个请求。如果还有其他的 fetch 处理器被注册，它们将有机会调用 event.respondWith() 如果没有 fetch 处理器调用 event.respondWith() ，该请求就会像没有 service worker 介入一样由浏览器处理。如果 fetch() 返回了有效的 HTTP 响应，相应码是 4xx 或 5xx，那么catch() 就不会被调用。

+这个是个来自 [custom offline page](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js) 的例子 ([live demo](https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html))。 -
self.addEventListener('fetch', function(event) {
+下面的例子在请求失败时提供特定的数据。 `catch()` 在 `fetch()` 的调用抛出异常时触发。在 `catch()` 语句中， `match()`用来返回正确的响应。
+
+在这个例子中，我们决定只缓存通过 GET 取得的 HTML 文档. 如果 `if()` 条件是 false，那么这个 fetch 处理器就不会处理这个请求。如果还有其他的 fetch 处理器被注册，它们将有机会调用 `event.respondWith()` 如果没有 fetch 处理器调用 `event.respondWith()` ，该请求就会像没有 service worker 介入一样由浏览器处理。如果 `fetch()` 返回了有效的 HTTP 响应，相应码是 4xx 或 5xx，那么`catch()` 就**不会**被调用。
+
+```js
+self.addEventListener('fetch', function(event) {
   // 我们只想在用 GET 方法请求 HTML 文档时调用 event.respondWith()。
-  if (event.request.method === 'GET' &&
+  if (event.request.method === 'GET' &&
       event.request.headers.get('accept').indexOf('text/html') !== -1) {
     console.log('Handling fetch event for', event.request.url);
     event.respondWith(
@@ -59,20 +56,19 @@ slug: Web/API/Cache/match
       })
     );
   }
-});
+}); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.Cache.match")}} -

参阅

+## 参阅 - +- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/zh-cn/web/api/cache/matchall/index.md b/files/zh-cn/web/api/cache/matchall/index.md index 6c5971743de28c..1ac0bb71209252 100644 --- a/files/zh-cn/web/api/cache/matchall/index.md +++ b/files/zh-cn/web/api/cache/matchall/index.md @@ -2,67 +2,59 @@ title: Cache.matchAll() slug: Web/API/Cache/matchAll --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

{{domxref("Cache")}} 接口的 matchAll() 方法返回一个 {{jsxref("Promise")}} ，其 resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。

+{{domxref("Cache")}} 接口的 **`matchAll()`** 方法返回一个 {{jsxref("Promise")}} ，其 resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。 -

语法

+## 语法 -
cache.matchAll(request,{options}).then(function(response) {
+```js
+cache.matchAll(request,{options}).then(function(response) {
   //do something with the response array
 });
-
+``` -

返回值

+### 返回值 -

一个 {{jsxref("Promise")}}，resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。

+一个 {{jsxref("Promise")}}，resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。 -
-

注意: {{domxref("Cache.match()")}} 基本上与Cache.matchAll() 相同，除了它 resolve 为 response[0] (即第一个匹配响应) 而不是 response (数组中所有匹配的响应)。

-
+> **备注：** {{domxref("Cache.match()")}} 基本上与`Cache.matchAll()` 相同，除了它 resolve 为 `response[0]` (即第一个匹配响应) 而不是 `response` (数组中所有匹配的响应)。 -

参数

+### 参数 -
-
request {{optional_inline}}
-
{{domxref("Cache")}} 中你尝试查找的 The {{domxref("Request")}} . 如果忽略这一参数，你将获取到 cache 中所有 response 的副本。
-
options {{optional_inline}}
-
一个选项对象，允许你为 match 操作中要做的匹配设置特定控制选项。可用选项包括： -
    -
  • ignoreSearch: 一个 {{domxref("Boolean")}} 值用来设置匹配操作是否忽略 url 中的 query 部分。如果该参数设置为 true ，那么 http://foo.com/?value=bar 中的 ?value=bar 部分就会在匹配中被忽略。该选项默认为 false。
    • -
  • ignoreMethod: 一个 {{domxref("Boolean")}} 值，如果设置为 true在匹配时就不会验证 {{domxref("Request")}} 对象的http 方法 (通常只允许是 GET 或 HEAD 。) 该参数默认值为 false。
    • -
  • ignoreVary: 一个 {{domxref("Boolean")}} 值，该值如果为 true 则匹配时不进行 VARY 部分的匹配。例如，如果一个 URL 匹配，此时无论{{domxref("Response")}}对象是否包含VARY头部，都会认为是成功匹配。该参数默认为 false。
    • -
  • cacheName: 一个 {{domxref("DOMString")}} ，代表一个具体的要被搜索的缓存。注意该选项被Cache.matchAll()方法忽略。
    • -
-
-
+- request {{optional_inline}} + - : {{domxref("Cache")}} 中你尝试查找的 The {{domxref("Request")}} . 如果忽略这一参数，你将获取到 cache 中所有 `response` 的副本。 +- options {{optional_inline}} -

示例

+ - : 一个选项对象，允许你为 `match` 操作中要做的匹配设置特定控制选项。可用选项包括： -
caches.open('v1').then(function(cache) {
+    - `ignoreSearch`: 一个 {{domxref("Boolean")}} 值用来设置匹配操作是否忽略 url 中的 query 部分。如果该参数设置为 `true` ，那么 `http://foo.com/?value=bar` 中的 `?value=bar` 部分就会在匹配中被忽略。该选项默认为 `false`。
+    - `ignoreMethod`: 一个 {{domxref("Boolean")}} 值，如果设置为 `true`在匹配时就不会验证 {{domxref("Request")}} 对象的`http` 方法 (通常只允许是 `GET` 或 `HEAD` 。) 该参数默认值为 `false`。
+    - `ignoreVary`: 一个 {{domxref("Boolean")}} 值，该值如果为 `true` 则匹配时不进行 `VARY` 部分的匹配。例如，如果一个 URL 匹配，此时无论{{domxref("Response")}}对象是否包含`VARY`头部，都会认为是成功匹配。该参数默认为 `false`。
+    - `cacheName`: 一个 {{domxref("DOMString")}} ，代表一个具体的要被搜索的缓存。注意该选项被**`Cache.matchAll()`**方法忽略。
+
+## 示例
+
+```js
+caches.open('v1').then(function(cache) {
   cache.matchAll('/images/').then(function(response) {
     response.forEach(function(element, index, array) {
       cache.delete(element);
     });
   });
-})
+}) +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- -
- +## 浏览器兼容性 -

{{Compat("api.Cache.matchAll")}}

-
+{{Compat("api.Cache.matchAll")}} -

See also

+## See also - +- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/zh-cn/web/api/cache/put/index.md b/files/zh-cn/web/api/cache/put/index.md index 58df371f0c7a27..828116ff395985 100644 --- a/files/zh-cn/web/api/cache/put/index.md +++ b/files/zh-cn/web/api/cache/put/index.md @@ -2,68 +2,58 @@ title: Cache.put() slug: Web/API/Cache/put --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

{{domxref("Cache")}} 接口的 put() 方法 允许将键/值对添加到当前的 {{domxref("Cache")}} 对象中。

+{{domxref("Cache")}} 接口的 **`put()`** 方法 允许将键/值对添加到当前的 {{domxref("Cache")}} 对象中。 -

通常，你只想 {{domxref("GloblFetch.fetch","fetch()")}} 一个或多个请求，然后直接添加结果到 cache 中。这种情况下，最好使用 {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}}，因为它们是一个或者多个这些操作的便捷方法。

+通常，你只想 {{domxref("GloblFetch.fetch","fetch()")}} 一个或多个请求，然后直接添加结果到 cache 中。这种情况下，最好使用 {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}}，因为它们是一个或者多个这些操作的便捷方法。 -
fetch(url).then(function(response) {
+```js
+fetch(url).then(function(response) {
   if (!response.ok) {
     throw new TypeError('Bad response status');
   }
   return cache.put(url, response);
 })
+```
 
-
+> **备注：** `put()` 将覆盖先前存储在匹配请求的 cache 中的任何键/值对。 -
-

注意: put() 将覆盖先前存储在匹配请求的 cache 中的任何键/值对。

-
+> **备注：** {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不会缓存 `Response.status` 值不在 200 范围内的响应，而 {{domxref("Cache.put")}} 允许你存储任何请求/响应对。因此，{{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不能用于不透明的响应，而 {{domxref("Cache.put")}} 可以。 -
-

注意: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不会缓存 Response.status 值不在 200 范围内的响应，而 {{domxref("Cache.put")}} 允许你存储任何请求/响应对。因此，{{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不能用于不透明的响应，而 {{domxref("Cache.put")}} 可以。

-
+> **备注：** 当响应主体完全写入磁盘时，初始 Cache 执行 (在 Blink 和 Gecko 中) resolve {{domxref("Cache.add")}}、{{domxref("Cache.addAll")}} 和 {{domxref("Cache.put")}} promise. 更新的规范版本中声明：即使响应主体仍在流式传输，一旦条目被记录到数据库中，浏览器就可以 resolve promise. -
-

注意: 当响应主体完全写入磁盘时，初始 Cache 执行 (在 Blink 和 Gecko 中) resolve {{domxref("Cache.add")}}、{{domxref("Cache.addAll")}} 和 {{domxref("Cache.put")}} promise. 更新的规范版本中声明：即使响应主体仍在流式传输，一旦条目被记录到数据库中，浏览器就可以 resolve promise.

-
+## 语法 -

语法

- -
cache.put(request, response).then(function() {
+```
+cache.put(request, response).then(function() {
   // request/response pair has been added to the cache
 });
-
+``` -

参数

+### 参数 -
-
request
-
The {{domxref("Request")}} you want to add to the cache.
-
response
-
The {{domxref("Response")}} you want to match up to the request.
-
+- request + - : The {{domxref("Request")}} you want to add to the cache. +- response + - : The {{domxref("Response")}} you want to match up to the request. -

返回值

+### 返回值 -

A {{jsxref("Promise")}} that resolves with void.

+A {{jsxref("Promise")}} that resolves with void. -
-

Note: The promise will reject with a TypeError if the URL scheme is not http or https.

-
+> **备注：** The promise will reject with a `TypeError` if the URL scheme is not `http` or `https`. -

示例

+## 示例 -

This example is from the MDN sw-test example (see sw-test running live). Here we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:

+This example is from the MDN [sw-test example](https://github.com/mdn/sw-test/) (see [sw-test running live](https://mdn.github.io/sw-test/)). Here we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so: -
    -
  1. Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that.
    2. -
  2. If not, open the v1 cache using open(), put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using return response.clone(). Clone is needed because put() consumes the response body.
    3. -
  3. If this fails (e.g., because the network is down), return a fallback response.
    4. -
+1. Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that. +2. If not, open the `v1` cache using `open()`, put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using `return response.clone()`. Clone is needed because `put()` consumes the response body. +3. If this fails (e.g., because the network is down), return a fallback response. -
var response;
+```js
+var response;
 var cachedResponse = caches.match(event.request).catch(function() {
   return fetch(event.request);
 }).then(function(r) {
@@ -74,22 +64,19 @@ var cachedResponse = caches.match(event.request).catch(function() {
   return response.clone();
 }).catch(function() {
   return caches.match('/sw-test/gallery/myLittleVader.jpg');
-});
+}); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.Cache.put")}}

+{{Compat("api.Cache.put")}} -

See also

+## See also - +- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/zh-cn/web/api/cachestorage/index.md b/files/zh-cn/web/api/cachestorage/index.md index 5da8b472d503db..094f067ced38c0 100644 --- a/files/zh-cn/web/api/cachestorage/index.md +++ b/files/zh-cn/web/api/cachestorage/index.md @@ -2,48 +2,45 @@ title: CacheStorage slug: Web/API/CacheStorage --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

CacheStorage 接口表示 {{domxref("Cache")}} 对象的存储。它提供了一个 {{domxref("ServiceWorker")}} 、其它类型 worker 或者 {{domxref("window")}} 范围内可以访问到的所有命名 cache 的主目录（它并不是一定要和 service workers 一起使用，即使它是在 service workers 规范中定义的），并维护一份字符串名称到相应 {{domxref("Cache")}} 对象的映射。

+**`CacheStorage`** 接口表示 {{domxref("Cache")}} 对象的存储。它提供了一个 {{domxref("ServiceWorker")}} 、其它类型 worker 或者 {{domxref("window")}} 范围内可以访问到的所有命名 cache 的主目录（它并不是一定要和 service workers 一起使用，即使它是在 service workers 规范中定义的），并维护一份字符串名称到相应 {{domxref("Cache")}} 对象的映射。 -

CacheStorage 同样暴露了 {{domxref("CacheStorage.open()")}} 和 {{domxref("CacheStorage.match()")}}方法。使用 {{domxref("CacheStorage.open()")}} 获取 {{domxref("Cache")}} 实例。使用 {{domxref("CacheStorage.match()")}} 检查给定的 {{domxref("Request")}} 是否是 CacheStorage 对象跟踪的任何 {{domxref("Cache")}} 对象中的键。

+`CacheStorage` 同样暴露了 {{domxref("CacheStorage.open()")}} 和 {{domxref("CacheStorage.match()")}}方法。使用 {{domxref("CacheStorage.open()")}} 获取 {{domxref("Cache")}} 实例。使用 {{domxref("CacheStorage.match()")}} 检查给定的 {{domxref("Request")}} 是否是 `CacheStorage` 对象跟踪的任何 {{domxref("Cache")}} 对象中的键。 -

你可以通过 {{domxref("WorkerGlobalScope.caches", "caches")}} 属性访问 CacheStorage .

+你可以通过 {{domxref("WorkerGlobalScope.caches", "caches")}} 属性访问 `CacheStorage` . -
注意: CacheStorage 总是对不受信任的源（即那些不使用 HTTPS，尽管此定义将来很可能变得更加复杂。）使用 SecurityError reject. 测试时，你可以在 Firefox Devtools 选项/齿轮菜单中通过选中"通过 HTTP 启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。
+> **备注：** CacheStorage 总是对不受信任的源（即那些不使用 HTTPS，尽管此定义将来很可能变得更加复杂。）使用 `SecurityError` reject. 测试时，你可以在 Firefox Devtools 选项/齿轮菜单中通过选中"通过 HTTP 启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。 -
注意: {{domxref("CacheStorage.match()")}} 是一个便捷方法。匹配 cache 条目的同等功能可以通过执行 {{domxref("CacheStorage.open()")}} 打开 cache，使用 {{domxref("CacheStorage.keys()")}} 返回它包含的条目，并将你所需的条目与 {{domxref("CacheStorage.match()")}} 匹配。
+> **备注：** {{domxref("CacheStorage.match()")}} 是一个便捷方法。匹配 cache 条目的同等功能可以通过执行 {{domxref("CacheStorage.open()")}} 打开 cache，使用 {{domxref("CacheStorage.keys()")}} 返回它包含的条目，并将你所需的条目与 {{domxref("CacheStorage.match()")}} 匹配。 -

方法

+## 方法 -
-
{{domxref("CacheStorage.match()")}}
-
检查给定的 {{domxref("Request")}} 是否是 {{domxref("CacheStorage")}} 对象跟踪的任何 {{domxref("Cache")}} 对象的键，并返回一个 resolve 为该匹配的 {{jsxref("Promise")}} .
-
{{domxref("CacheStorage.has()")}}
-
如果存在与 cacheName 匹配的 {{domxref("Cache")}} 对象，则返回一个 resolve 为 true 的 {{jsxref("Promise")}} .
-
{{domxref("CacheStorage.open()")}}
-
返回一个 {{jsxref("Promise")}} ，resolve 为匹配 cacheName （如果不存在则创建一个新的 cache）的 {{domxref("Cache")}} 对象
-
{{domxref("CacheStorage.delete()")}}
-
查找匹配 cacheName 的 {{domxref("Cache")}} 对象，如果找到，则删除 {{domxref("Cache")}} 对象并返回一个 resolve 为 true 的 {{jsxref("Promise")}} 。如果没有找到 {{domxref("Cache")}} 对象，则返回 false.
-
{{domxref("CacheStorage.keys()")}}
-
返回一个 {{jsxref("Promise")}} ，它将使用一个包含与 {{domxref("CacheStorage")}} 追踪的所有命名 {{domxref("Cache")}} 对象对应字符串的数组来 resolve. 使用该方法迭代所有 {{domxref("Cache")}} 对象的列表。
-
+- {{domxref("CacheStorage.match()")}} + - : 检查给定的 {{domxref("Request")}} 是否是 {{domxref("CacheStorage")}} 对象跟踪的任何 {{domxref("Cache")}} 对象的键，并返回一个 resolve 为该匹配的 {{jsxref("Promise")}} . +- {{domxref("CacheStorage.has()")}} + - : 如果存在与 `cacheName` 匹配的 {{domxref("Cache")}} 对象，则返回一个 resolve 为 true 的 {{jsxref("Promise")}} . +- {{domxref("CacheStorage.open()")}} + - : 返回一个 {{jsxref("Promise")}} ，resolve 为匹配 `cacheName` （如果不存在则创建一个新的 cache）的 {{domxref("Cache")}} 对象 +- {{domxref("CacheStorage.delete()")}} + - : 查找匹配 `cacheName` 的 {{domxref("Cache")}} 对象，如果找到，则删除 {{domxref("Cache")}} 对象并返回一个 resolve 为 true 的 {{jsxref("Promise")}} 。如果没有找到 {{domxref("Cache")}} 对象，则返回 `false`. +- {{domxref("CacheStorage.keys()")}} + - : 返回一个 {{jsxref("Promise")}} ，它将使用一个包含与 {{domxref("CacheStorage")}} 追踪的所有命名 {{domxref("Cache")}} 对象对应字符串的数组来 resolve. 使用该方法迭代所有 {{domxref("Cache")}} 对象的列表。 -

示例

+## 示例 -

此代码片段来自于 MDN sw-test example （请参阅sw-test running live.）此 service worker 脚本等待 {{domxref("InstallEvent")}} 触发，然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理应用程序的安装过程。这包括调用 {{domxref("CacheStorage.open")}} 创建一个新的 cache，然后使用 {{domxref("Cache.addAll")}} 向其添加一系列资源。

+此代码片段来自于 MDN [sw-test example](https://github.com/mdn/sw-test/) （请参阅[sw-test running live](https://mdn.github.io/sw-test/).）此 service worker 脚本等待 {{domxref("InstallEvent")}} 触发，然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理应用程序的安装过程。这包括调用 {{domxref("CacheStorage.open")}} 创建一个新的 cache，然后使用 {{domxref("Cache.addAll")}} 向其添加一系列资源。 -

在第二个代码块，我们等待 {{domxref("FetchEvent")}} 触发。我们构建自定义相应，像这样：

+在第二个代码块，我们等待 {{domxref("FetchEvent")}} 触发。我们构建自定义相应，像这样： -
    -
  1. 检查 CacheStorage 中是否找到了匹配请求的内容。如果是，使用匹配内容。
    2. -
  2. 如果没有，从网络获取请求，然后同样打开第一个代码块中创建的 cache，并使用 {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).) 将请求的 clone 副本添加到它。
    3. -
  3. 如果此操作失败（例如，因为网络关闭），返回备用相应。
    4. -
+1. 检查 CacheStorage 中是否找到了匹配请求的内容。如果是，使用匹配内容。 +2. 如果没有，从网络获取请求，然后同样打开第一个代码块中创建的 cache，并使用 {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) 将请求的 clone 副本添加到它。 +3. 如果此操作失败（例如，因为网络关闭），返回备用相应。 -

最后，使用 {{domxref("FetchEvent.respondWith")}} 返回自定义响应最终等于的内容。

+最后，使用 {{domxref("FetchEvent.respondWith")}} 返回自定义响应最终等于的内容。 -
this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -74,20 +71,19 @@ this.addEventListener('fetch', function(event) {
   }).catch(function() {
     return caches.match('/sw-test/gallery/myLittleVader.jpg');
   }));
-});
+}); +``` -

说明

+## 说明 {{Specifications}} -

浏览器兼容

+## 浏览器兼容 -

{{Compat("api.CacheStorage")}}

+{{Compat("api.CacheStorage")}} -

参见

+## 参见 - +- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/zh-cn/web/api/cachestorage/match/index.md b/files/zh-cn/web/api/cachestorage/match/index.md index 28d92a0fc9b1ab..1c69c3408bae63 100644 --- a/files/zh-cn/web/api/cachestorage/match/index.md +++ b/files/zh-cn/web/api/cachestorage/match/index.md @@ -2,52 +2,49 @@ title: CacheStorage.match() slug: Web/API/CacheStorage/match --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

{{domxref("CacheStorage")}} 接口 (可适用于全局性caches) 的 match() 方法检查给定的{{domxref("Request")}} 对象或 url 字符串是否是一个已存储的 {{domxref("Response")}} 对象的 key. 这个方法针对 {{domxref("Response")}} 返回一个 {{jsxref("Promise")}} ，如果没有匹配则返回 undefined 。

+{{domxref("CacheStorage")}} 接口 (可适用于全局性`caches`) 的 **`match()`** 方法检查给定的{{domxref("Request")}} 对象或 url 字符串是否是一个已存储的 {{domxref("Response")}} 对象的 key. 这个方法针对 {{domxref("Response")}} 返回一个 {{jsxref("Promise")}} ，如果没有匹配则返回 `undefined` 。 -

cache 对象按创建顺序查询。

+cache 对象按创建顺序查询。 -
提示: {{domxref("CacheStorage.match()", "caches.match()")}} 是一个便捷方法。其作用等同于在每个缓存上调用 {{domxref("cache.match()")}} 方法（按照{{domxref("CacheStorage.keys()", "caches.keys()")}}返回的顺序) 直到返回{{domxref("Response")}} 对象。
+> **备注：** {{domxref("CacheStorage.match()", "caches.match()")}} 是一个便捷方法。其作用等同于在每个缓存上调用 {{domxref("cache.match()")}} 方法（按照{{domxref("CacheStorage.keys()", "caches.keys()")}}返回的顺序) 直到返回{{domxref("Response")}} 对象。 -

语法

+## 语法 -
caches.match(request, options).then(function(response) {
+```
+caches.match(request, options).then(function(response) {
   // Do something with the response
 });
-
+``` -

参数

+### 参数 -
-
request
-
想要匹配的 {{domxref("Request")}}。这个参数可以是 {{domxref("Request")}} 对象或 URL 字符串。
-
options {{optional_inline}}
-
这个对象中的属性控制在匹配操作中如何进行匹配选择。可选择参数如下： -
    -
  • ignoreSearch: {{domxref("Boolean")}}值， 指定匹配过程是否应该忽略 url 中查询参数。举个例子，如果该参数设置为true, 那么 ?value=bar 作为 http://foo.com/?value=bar 中的查询参数将会在匹配过程中被忽略。该参数默认 false。
    • -
  • ignoreMethod: {{domxref("Boolean")}} 值，当被设置为 true 时，将会阻止在匹配操作中对 {{domxref("Request")}}请求的 http 方式的验证 (通常只允许 GET 和 HEAD 两种请求方式)。该参数默认为 false.
    • -
  • ignoreVary: {{domxref("Boolean")}} 值，当该字段被设置为 true, 告知在匹配操作中忽略对VARY头信息的匹配。换句话说，当请求 URL 匹配上，你将获取匹配的 {{domxref("Response")}} 对象，无论请求的 VARY 头存在或者没有。该参数默认为 false.
    • -
  • cacheName: {{domxref("DOMString")}} 值， 表示所要搜索的缓存名称。
    • -
-
-
+- request + - : 想要匹配的 {{domxref("Request")}}。这个参数可以是 {{domxref("Request")}} 对象或 URL 字符串。 +- options {{optional_inline}} -

返回值

+ - : 这个对象中的属性控制在匹配操作中如何进行匹配选择。可选择参数如下： -

返回 resolve 为匹配 {{domxref("Response")}} 的 {{jsxref("Promise")}} 对象。如果没有与指定 request 相匹配 response，promise 将使用 undefined resolve.

+ - `ignoreSearch`: {{domxref("Boolean")}}值， 指定匹配过程是否应该忽略 url 中查询参数。举个例子，如果该参数设置为`true`, 那么 `?value=bar` 作为 `http://foo.com/?value=bar` 中的查询参数将会在匹配过程中被忽略。该参数默认 `false`。 + - `ignoreMethod`: {{domxref("Boolean")}} 值，当被设置为 `true` 时，将会阻止在匹配操作中对 {{domxref("Request")}}请求的 `http` 方式的验证 (通常只允许 `GET` 和 `HEAD` 两种请求方式)。该参数默认为 `false`. + - `ignoreVary`: {{domxref("Boolean")}} 值，当该字段被设置为 `true,` 告知在匹配操作中忽略对`VARY`头信息的匹配。换句话说，当请求 URL 匹配上，你将获取匹配的 {{domxref("Response")}} 对象，无论请求的 `VARY` 头存在或者没有。该参数默认为 `false`. + - `cacheName`: {{domxref("DOMString")}} 值， 表示所要搜索的缓存名称。 -

例子

+### 返回值 -

此示例来自于 MDN sw-test example （请参阅 sw-test running live）。这里，等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应，像这样：

+返回 resolve 为匹配 {{domxref("Response")}} 的 {{jsxref("Promise")}} 对象。如果没有与指定 request 相匹配 response，promise 将使用 `undefined` resolve. -
    -
  1. 使用 {{domxref("CacheStorage.match","CacheStorage.match()")}} 检查 {{domxref("CacheStorage")}} 中是否存在匹配请求，如果存在，则使用它。
    2. -
  2. 如果没有，使用 open() 打开 v1 cache，使用 {{domxref("Cache.put","Cache.put()")}} 将默认网络请求放入 cache 中，并只用 return response.clone() 返回默认网络请求的克隆副本。最后一个是必须的，因为 put() 使用响应主体。
    3. -
  3. 如果此操作失败（例如，因为网络已关闭），则返回备用响应。
    4. -
+## 例子 -
caches.match(event.request).then(function(response) {
+此示例来自于 MDN [sw-test example](https://github.com/mdn/sw-test/) （请参阅 [sw-test running live](https://mdn.github.io/sw-test/)）。这里，等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应，像这样：
+
+1.  使用 {{domxref("CacheStorage.match","CacheStorage.match()")}} 检查 {{domxref("CacheStorage")}} 中是否存在匹配请求，如果存在，则使用它。
+2.  如果没有，使用 `open()` 打开 `v1` cache，使用 {{domxref("Cache.put","Cache.put()")}} 将默认网络请求放入 cache 中，并只用 `return response.clone()` 返回默认网络请求的克隆副本。最后一个是必须的，因为 `put()` 使用响应主体。
+3.  如果此操作失败（例如，因为网络已关闭），则返回备用响应。
+
+```js
+caches.match(event.request).then(function(response) {
   return response || fetch(event.request).then(function(r) {
     caches.open('v1').then(function(cache) {
       cache.put(event.request, r);
@@ -56,22 +53,19 @@ slug: Web/API/CacheStorage/match
   });
 }).catch(function() {
   return caches.match('/sw-test/gallery/myLittleVader.jpg');
-});
+}); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.CacheStorage.match")}}

+{{Compat("api.CacheStorage.match")}} -

亦可参考

+## 亦可参考 -
    -
  • Using Service Workers
    • -
  • {{domxref("Cache")}}
    • -
  • {{domxref("WorkerGlobalScope.caches", "self.caches")}}
    • -
+- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches", "self.caches")}} diff --git a/files/zh-cn/web/api/cachestorage/open/index.md b/files/zh-cn/web/api/cachestorage/open/index.md index a1037122ccf717..fa6ef863a6a3c3 100644 --- a/files/zh-cn/web/api/cachestorage/open/index.md +++ b/files/zh-cn/web/api/cachestorage/open/index.md @@ -2,46 +2,42 @@ title: CacheStorage.open() slug: Web/API/CacheStorage/open --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

{{domxref("CacheStorage")}} 接口的 open() 方法返回一个 resolve 为匹配 cacheName 的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} .

+{{domxref("CacheStorage")}} 接口的 **`open()`** 方法返回一个 resolve 为匹配 `cacheName` 的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} . -
-

注意: 如果指定的 {{domxref("Cache")}} 不存在，则使用该 cacheName 创建一个新的 cache，并返回一个 resolve 为该新 {{domxref("Cache")}} 对象的{{jsxref("Promise")}}.

-
+> **备注：** 如果指定的 {{domxref("Cache")}} 不存在，则使用该 `cacheName` 创建一个新的 cache，并返回一个 resolve 为该新 {{domxref("Cache")}} 对象的{{jsxref("Promise")}}. -

语法

+## 语法 -
// "caches" is a global read-only variable, which is an instance of CacheStorage,
+```js
+// "caches" is a global read-only variable, which is an instance of CacheStorage,
 // For more info, refer to: https://developer.mozilla.org/en-US/docs/Web/API/caches
 
-caches.open(cacheName).then(function(cache) {
+caches.open(cacheName).then(function(cache) {
   // Do something with your cache
 });
-
+``` -

参数

+### 参数 -
-
cacheName
-
要打开的 cache 对象 name.
-
+- cacheName + - : 要打开的 cache 对象 name. -

返回值

+### 返回值 -

一个 resolve 为请求的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} .

+一个 resolve 为请求的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} . -

示例

+## 示例 -

此示例来自于 MDN sw-test example （请参阅 sw-test running live）。这里，等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应，像这样：

+此示例来自于 MDN [sw-test example](https://github.com/mdn/sw-test/) （请参阅 [sw-test running live](https://mdn.github.io/sw-test/)）。这里，等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应，像这样： -
    -
  1. 使用 {{domxref("CacheStorage.match","CacheStorage.match()")}} 检查 {{domxref("CacheStorage")}} 中是否存在匹配请求，如果存在，则使用它。
    2. -
  2. 如果没有，使用 {{domxref("CacheStorage.open","CacheStorage.open()")}} 打开 v1 cache，使用 {{domxref("Cache.put","Cache.put()")}} 将默认网络请求放入 cache 中，并使用 return response.clone() 返回默认网络请求的克隆副本。最后一个是必须的，因为 put() 使用响应主体。
    3. -
  3. 如果此操作失败（例如，因为网络已关闭），则返回备用响应。
    4. -
+1. 使用 {{domxref("CacheStorage.match","CacheStorage.match()")}} 检查 {{domxref("CacheStorage")}} 中是否存在匹配请求，如果存在，则使用它。 +2. 如果没有，使用 {{domxref("CacheStorage.open","CacheStorage.open()")}} 打开 `v1` cache，使用 {{domxref("Cache.put","Cache.put()")}} 将默认网络请求放入 cache 中，并使用 `return response.clone()` 返回默认网络请求的克隆副本。最后一个是必须的，因为 `put()` 使用响应主体。 +3. 如果此操作失败（例如，因为网络已关闭），则返回备用响应。 -
var cachedResponse = caches.match(event.request).catch(function() {
+```js
+var cachedResponse = caches.match(event.request).catch(function() {
   return fetch(event.request);
 }).then(function(response) {
   caches.open('v1').then(function(cache) {
@@ -50,22 +46,19 @@ caches.open(cacheName).then(function(cache) {
   return response.clone();
 }).catch(function() {
   return caches.match('/sw-test/gallery/myLittleVader.jpg');
-});
+}); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.CacheStorage.open")}}

+{{Compat("api.CacheStorage.open")}} -

See also

+## See also - +- [Using Service Workers](/zh-CN/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/zh-cn/web/api/canvas_api/index.md b/files/zh-cn/web/api/canvas_api/index.md index 8a1901e798bf7d..846f0b0054ba66 100644 --- a/files/zh-cn/web/api/canvas_api/index.md +++ b/files/zh-cn/web/api/canvas_api/index.md @@ -2,116 +2,105 @@ title: Canvas slug: Web/API/Canvas_API --- -
{{CanvasSidebar}}
+{{CanvasSidebar}} -

Canvas API 提供了一个通过JavaScript 和 HTML的{{HtmlElement("canvas")}}元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

+**Canvas API** 提供了一个通过[JavaScript](/zh-CN/docs/Web/JavaScript) 和 [HTML](/zh-CN/docs/Web/HTML)的{{HtmlElement("canvas")}}元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 -

Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

+Canvas API 主要聚焦于 2D 图形。而同样使用``元素的 [WebGL API](/zh-CN/docs/Web/WebGL) 则用于绘制硬件加速的 2D 和 3D 图形。 -

基础示例

+## 基础示例 -

这个简单的例子在画布绘制一个绿色的长方形。

+这个简单的例子在画布绘制一个绿色的长方形。 -

HTML

+### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+### JavaScript -

{{domxref("Document.getElementById()")}} 方法获取 HTML <canvas> 元素的引用。接着，{{domxref("HTMLCanvasElement.getContext()")}} 方法获取这个元素的 context——图像稍后将在此被渲染。

+{{domxref("Document.getElementById()")}} 方法获取 HTML `` 元素的引用。接着，{{domxref("HTMLCanvasElement.getContext()")}} 方法获取这个元素的 context——图像稍后将在此被渲染。 -

由 {{domxref("CanvasRenderingContext2D")}} 接口完成实际的绘制。{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 属性让长方形变成绿色。{{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 高 100。

+由 {{domxref("CanvasRenderingContext2D")}} 接口完成实际的绘制。{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 属性让长方形变成绿色。{{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 高 100。 -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 150, 100);
- -

结果

- -

{{ EmbedLiveSample('基础示例', 700, 180) }}

- -

参考

- -
-
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
  • {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasGradient")}}
    • -
  • {{domxref("CanvasImageSource")}}
    • -
  • {{domxref("CanvasPattern")}}
    • -
  • {{domxref("ImageBitmap")}}
    • -
  • {{domxref("ImageData")}}
    • -
  • {{domxref("RenderingContext")}}
    • -
  • {{domxref("TextMetrics")}}
    • -
  • {{domxref("OffscreenCanvas")}}{{experimental_inline}}
    • -
  • {{domxref("Path2D")}}{{experimental_inline}}
    • -
  • {{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
    • -
-
- -
-

备注： 与 WebGLRenderingContext 有关的接口请参考 WebGL。

-
- -

{{domxref("CanvasCaptureMediaStream")}} 也与之相关。

- -

教程与指导

- -
-
Canvas 教程
-
一个综合性教程，包括了<canvas>的基本用法与高级功能。
-
代码片段：Canvas
-
一些面向开发者的 <canvas> 代码片段。
-
-
深入 HTML5 Canvas
-
一个手把手的、长度与书本相若的 Canvas API 和 WebGL 介绍。
-
-
Demo：一个基础的光线追踪器
-
运用 canvas 制作的光线追踪动画示例。
-
-
使用 canvas 绘制视频
-
结合{{HTMLElement("video")}}和 {{HTMLElement("canvas")}}来实现实时操作视频数据。
-
- -

库

- -

Canvas API 是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于 canvas 的项目更快和更简单。

- -
    -
  • EaselJS 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源 canvas 库
    • -
  • Fabric.js 具有 SVG 解析功能的开源 canvas 库
    • -
  • heatmap.js 基于 canvas 的热点图的开源库
    • -
  • JavaScript InfoVis Toolkit 创建交互式的 2D Canvas 数据可视化
    • -
  • Konva.js 用于桌面端和移动端应用的 2D canvas 库
    • -
  • p5.js 包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能
    • -
  • Paper.js 运行于 HTML5 Canvas 上的开源矢量图形脚本框架
    • -
  • Phaser 用于基于 Canvas 和 WebGL 的浏览器尤其的快速、自由、有趣的开源框架
    • -
  • Processing.js 用于处理可视化语言
    • -
  • Pts.js 在 canvas 和 SVG 中进行创意性代码写作和可视化的库
    • -
  • Rekapi 关键帧动画库
    • -
  • Scrawl-canvas 用来创建和编辑 2D 图形的开源库
    • -
  • ZIM 框架为 canvas 上的代码创意性提供方便性、组件和可控性，包括可用性和数百个色彩缤纷的教程
    • -
- -
-

备注： 与 WebGL 有关的 2D 和 3D 的库请参考 WebGL。

-
- -

标准

+ctx.fillRect(10, 10, 150, 100); +``` -{{Specifications("html.elements.canvas")}} +### 结果 + +{{ EmbedLiveSample('基础示例', 700, 180) }} + +## 参考 + +- {{domxref("HTMLCanvasElement")}} +- {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasImageSource")}} +- {{domxref("CanvasPattern")}} +- {{domxref("ImageBitmap")}} +- {{domxref("ImageData")}} +- {{domxref("RenderingContext")}} +- {{domxref("TextMetrics")}} +- {{domxref("OffscreenCanvas")}}{{experimental_inline}} +- {{domxref("Path2D")}}{{experimental_inline}} +- {{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}} + +> **备注：** 与 `WebGLRenderingContext` 有关的接口请参考 [WebGL](/zh-CN/docs/Web/WebGL)。 + +{{domxref("CanvasCaptureMediaStream")}} 也与之相关。 + +## 教程与指导 + +- [Canvas 教程](/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial) + - : 一个综合性教程，包括了\的基本用法与高级功能。 +- [代码片段：Canvas](/zh-CN/Add-ons/Code_snippets/Canvas) + - : 一些面向开发者的 \ 代码片段。 +- [深入 HTML5 Canvas](http://joshondesign.com/p/books/canvasdeepdive/title.html) + + - : 一个手把手的、长度与书本相若的 Canvas API 和 WebGL 介绍。 + +- [Demo：一个基础的光线追踪器](/zh-CN/docs/Web/API/Canvas_API/A_basic_ray-caster) -

浏览器兼容性

+ - : 运用 canvas 制作的光线追踪动画示例。 + +- [使用 canvas 绘制视频](/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas) + + - : 结合{{HTMLElement("video")}}和 {{HTMLElement("canvas")}}来实现实时操作视频数据。 + +## 库 + +Canvas API 是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于 canvas 的项目更快和更简单。 + +- [EaselJS](http://www.createjs.com/easeljs) 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源 canvas 库 +- [Fabric.js](http://fabricjs.com) 具有 SVG 解析功能的开源 canvas 库 +- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) 基于 canvas 的热点图的开源库 +- [JavaScript InfoVis Toolkit](http://thejit.org/) 创建交互式的 2D Canvas 数据可视化 +- [Konva.js](https://konvajs.github.io/) 用于桌面端和移动端应用的 2D canvas 库 +- [p5.js ](https://p5js.org/)包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能 +- [Paper.js](http://paperjs.org/) 运行于 HTML5 Canvas 上的开源矢量图形脚本框架 +- [Phaser](https://phaser.io/) 用于基于 Canvas 和 WebGL 的浏览器尤其的快速、自由、有趣的开源框架 +- [Processing.js](http://processingjs.org) 用于处理可视化语言 +- [Pts.js](https://ptsjs.org/) 在 canvas 和 SVG 中进行创意性代码写作和可视化的库 +- [Rekapi](https://github.com/jeremyckahn/rekapi) 关键帧动画库 +- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) 用来创建和编辑 2D 图形的开源库 +- [ZIM](http://zimjs.com/) 框架为 canvas 上的代码创意性提供方便性、组件和可控性，包括可用性和数百个色彩缤纷的教程 + +> **备注：** 与 WebGL 有关的 2D 和 3D 的库请参考 [WebGL](/zh-CN/docs/Web/WebGL)。 + +## 标准 + +{{Specifications("html.elements.canvas")}} -

Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持<canvas> ，更旧版本的 IE 中，页面可以通过引入 Google 的 Explorer Canvas 项目中的脚本来获得<canvas>支持。Google Chrome 和 Opera 9+ 也支持 <canvas>。

+## 浏览器兼容性 -

其它相关

+Mozilla 程序从 Gecko 1.8 ([Firefox 1.5](/zh-CN/docs/Firefox_1.5_for_developers)) 开始支持 ``。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持`` ，更旧版本的 IE 中，页面可以通过引入 Google 的 [Explorer Canvas](https://github.com/arv/explorercanvas) 项目中的脚本来获得``支持。Google Chrome 和 Opera 9+ 也支持 ``。 - +## 其它相关 - +- [WebGL](/zh-CN/docs/Web/WebGL) diff --git a/files/zh-cn/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/zh-cn/web/api/canvas_api/manipulating_video_using_canvas/index.md index 6e3c1a23928a4b..0f21e023ed3902 100644 --- a/files/zh-cn/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/zh-cn/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -2,23 +2,22 @@ title: 使用 canvas 处理视频 slug: Web/API/Canvas_API/Manipulating_video_using_canvas --- -
{{CanvasSidebar}}
+{{CanvasSidebar}} -
-

通过在一个 canvas（画布）上结合 video 元素功能，你可以实时地操纵视频数据来合成各种视觉特效到正在呈现的视频画面中。本教程示范如何使用 JavaScript 代码执行色度键控（也被称为“绿屏效果”）。

-
+通过在一个 canvas（画布）上结合 video 元素功能，你可以实时地操纵视频数据来合成各种视觉特效到正在呈现的视频画面中。本教程示范如何使用 JavaScript 代码执行色度键控（也被称为“绿屏效果”）。 -

查看该实例。

+[查看该实例](/samples/video/chroma-key/index.xhtml)。 -

文档内容

+## 文档内容 -

以下是用于渲染该内容的 XHTML 文档。

+以下是用于渲染该内容的 XHTML 文档。 -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <style>
+```html
+
+
+  
+    
+    
+  
 
-  <body onload="processor.doLoad()">
-    <div>
-      <video id="video" src="video.ogv" controls="true"/>
-    </div>
-    <div>
-      <canvas id="c1" width="160" height="96"/>
-      <canvas id="c2" width="160" height="96"/>
-    </div>
-  </body>
-</html>
-
+ +
+
+
+ + +
+ + +``` -

从这里带出的关键有：

+从这里带出的关键有： -
    -
  1. 这篇文档布置了两个 canvas 元素，分别带着 ID 为 c1 和 c2 的属性。Canvas c1 用于显示原视频的当前帧，而 c2 用于显示执行了色度键控效果后的视频；c2 预先加载将被用于替换视频中绿幕（绿色背景）的静态图像。
    2. -
  2. JavaScript 代码从一个名为 main.js 的脚本引入；这个脚本使用 JavaScript 1.8 特性，所以在 22 行引入脚本时它的 version（版本）是指定的。
    3. -
  3. 当文档加载时，在 main.js 里的 processor.doLoad() 方法开始执行。
    4. -
+1. 这篇文档布置了两个 [`canvas`](/zh-CN/docs/Web/HTML/Element/canvas) 元素，分别带着 ID 为 `c1` 和 `c2` 的属性。Canvas `c1` 用于显示原视频的当前帧，而 `c2` 用于显示执行了色度键控效果后的视频；`c2` 预先加载将被用于替换视频中绿幕（绿色背景）的静态图像。 +2. JavaScript 代码从一个名为 `main.js` 的脚本引入；这个脚本使用 JavaScript 1.8 特性，所以在 22 行引入脚本时它的 version（版本）是指定的。 +3. 当文档加载时，在 `main.js` 里的 `processor.doLoad()` 方法开始执行。 -

JavaScript 代码

+## JavaScript 代码 -

main.js 里的 JavaScript 代码由三个方法组成。

+`main.js` 里的 JavaScript 代码由三个方法组成。 -

初始化色键播放器

+### 初始化色键播放器 -

当 XHTML 文档最初加载时 doLoad() 方法被调用。这个方法的工作是准备色键处理代码所需的变量，并设置一个监听事件以便我们可以监测用户何时开始播放视频。

+当 XHTML 文档最初加载时 `doLoad()` 方法被调用。这个方法的工作是准备色键处理代码所需的变量，并设置一个监听事件以便我们可以监测用户何时开始播放视频。 -
  var processor;
+```js
+  var processor;
 
   processor.doLoad = function doLoad() {
     this.video = document.getElementById('video');
@@ -81,17 +79,18 @@ slug: Web/API/Canvas_API/Manipulating_video_using_canvas
         self.timerCallback();
       }, false);
   },
-
+``` -

这段代码抓取 XHTML 文档中关键元素的引用，即 video 元素和两个 canvas 元素。它也获取了两个 canvas 各自的图形上下文引用。这些将在我们真正做色键控制效果的时候被用到。

+这段代码抓取 XHTML 文档中关键元素的引用，即 `video` 元素和两个 `canvas` 元素。它也获取了两个 canvas 各自的图形上下文引用。这些将在我们真正做色键控制效果的时候被用到。 -

然后 addEventListener() 被调用来开始监视 video 元素以便我们在用户按下视频上的播放按钮时获得通知。为响应用户开始回放，这段代码获取了视频的宽度和高度，并各自减半（当我们执行色度键控效果的时候我们将减半视频的尺寸），然后调用 timerCallback() 方法来开始监视视频以及计算视觉效果。

+然后 `addEventListener()` 被调用来开始监视 `video` 元素以便我们在用户按下视频上的播放按钮时获得通知。为响应用户开始回放，这段代码获取了视频的宽度和高度，并各自减半（当我们执行色度键控效果的时候我们将减半视频的尺寸），然后调用 `timerCallback()` 方法来开始监视视频以及计算视觉效果。 -

计时器回调

+### 计时器回调 -

计时器回调最初在视频开始播放时（当“播放”事件发生时）被调用，然后负责设定自身定期被调用以便为每一帧启用键控效果。

+计时器回调最初在视频开始播放时（当“播放”事件发生时）被调用，然后负责设定自身定期被调用以便为每一帧启用键控效果。 -
  processor.timerCallback = function timerCallback() {
+```js
+  processor.timerCallback = function timerCallback() {
     if (this.video.paused || this.video.ended) {
       return;
     }
@@ -101,59 +100,58 @@ slug: Web/API/Canvas_API/Manipulating_video_using_canvas
         self.timerCallback();
       }, 0);
   },
-
+``` -

回调做的第一件事情是检查视频是否正好在播放；如果不是，回调立即返回并不会做任何事情。

+回调做的第一件事情是检查视频是否正好在播放；如果不是，回调立即返回并不会做任何事情。 -

然后（如果视频正在播放）它调用 computeFrame() 方法，该方法对当前视频帧执行色度键控效果。

+然后（如果视频正在播放）它调用 `computeFrame()` 方法，该方法对当前视频帧执行色度键控效果。 -

回调做的最后一件事是调用 setTimeout() 来设定它自身被尽快地再次调用。在真实环境中，你可能会根据视频的帧速率情况来计划实现这种调用。

+回调做的最后一件事是调用 `setTimeout()` 来设定它自身被尽快地再次调用。在真实环境中，你可能会根据视频的帧速率情况来计划实现这种调用。 -

操作视频帧数据

+### 操作视频帧数据 -

下方展示的 computeFrame() 方法负责真实获取一帧数据并执行色度键控效果。

+下方展示的 `computeFrame()` 方法负责真实获取一帧数据并执行色度键控效果。 -
  processor.computeFrame = function computeFrame() {
+```js
+  processor.computeFrame = function computeFrame() {
     this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
     let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
     let l = frame.data.length / 4;
 
-    for (let i = 0; i < l; i++) {
+    for (let i = 0; i < l; i++) {
       let r = frame.data[i * 4 + 0];
       let g = frame.data[i * 4 + 1];
       let b = frame.data[i * 4 + 2];
-      if (g > 100 && r > 100 && b < 43)
+      if (g > 100 && r > 100 && b < 43)
         frame.data[i * 4 + 3] = 0;
     }
     this.ctx2.putImageData(frame, 0, 0);
     return;
   }
-
+``` -

当这段例行程序被调用时，video 元素正显示最新的视频数据帧，就像这样：

+当这段例行程序被调用时，video 元素正显示最新的视频数据帧，就像这样： -

video.png

+![video.png](/@api/deki/files/3282/=video.png) -

在第 2 行，视频帧被复制到第一个 canvas 的图形上下文 ctx1 中，并指定了和我们之前保存的值一样的宽度和高度来绘制一半大小的帧。注意这点，你可以简单地把 video 元素放到上下文的 drawImage() 方法当中来绘制当前的视频帧到上下文里。效果如下：

+在第 2 行，视频帧被复制到第一个 canvas 的图形上下文 `ctx1` 中，并指定了和我们之前保存的值一样的宽度和高度来绘制一半大小的帧。注意这点，你可以简单地把 video 元素放到上下文的 `drawImage()` 方法当中来绘制当前的视频帧到上下文里。效果如下： -

sourcectx.png

+![sourcectx.png](/@api/deki/files/3284/=sourcectx.png) -

第 3 行通过在第一个上下文里调用 getImageData() 方法获取到视频当前帧的原始图形数据的拷贝。它提供了原始的 32 位像素的图像数据使我们可以继续操作。第 4 行通过用帧的图像数据的总大小除以四来计算图像中的像素数。

+第 3 行通过在第一个上下文里调用 `getImageData()` 方法获取到视频当前帧的原始图形数据的拷贝。它提供了原始的 32 位像素的图像数据使我们可以继续操作。第 4 行通过用帧的图像数据的总大小除以四来计算图像中的像素数。 -

从第 6 行开始 for 循环扫描帧的像素，取出每个像素的红、绿和蓝的值，并和用于检测绿幕的预设的数对比。其中绿幕将用从 foo.png 导入的静态背景图像替换。

+从第 6 行开始 `for` 循环扫描帧的像素，取出每个像素的红、绿和蓝的值，并和用于检测绿幕的预设的数对比。其中绿幕将用从 `foo.png` 导入的静态背景图像替换。 -

每一个（数值）范围内得到的被认为是绿幕一部分的帧图像数据里的像素具有的 alpha 值被替换为零，以表示该像素完全透明。因此，最终的图像里的整个绿幕的区域 100% 透明，于是在 13 行当它被绘制到目标上下文中时，效果是作为一层遮罩覆于静态背景上面。

+每一个（数值）范围内得到的被认为是绿幕一部分的帧图像数据里的像素具有的 alpha 值被替换为零，以表示该像素完全透明。因此，最终的图像里的整个绿幕的区域 100% 透明，于是在 13 行当它被绘制到目标上下文中时，效果是作为一层遮罩覆于静态背景上面。 -

形成的图像像这样：

+形成的图像像这样： -

output.png

+![output.png](/@api/deki/files/3283/=output.png) -

这随视频播放而被反复实现，所以一帧接着一帧被处理并带有色键效果被显示出来。

+这随视频播放而被反复实现，所以一帧接着一帧被处理并带有色键效果被显示出来。 -

查看该实例。

+[查看该实例](/samples/video/chroma-key/index.xhtml)。 -

参见

+## 参见 - +- [使用音频和视频](/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video) diff --git a/files/zh-cn/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/zh-cn/web/api/canvas_api/tutorial/advanced_animations/index.md index 7514515e36e8b4..fc1d08162d53c7 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/zh-cn/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -2,22 +2,22 @@ title: 高级动画 slug: Web/API/Canvas_API/Tutorial/Advanced_animations --- -
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}} -
-

在上一章，我们制作了基本动画以及逐步了解了让物件移动的方法。在这一部分，我们将会对运动有更深的了解并学会添加一些符合物理的运动以让我们的动画更加高级。

-
+在上一章，我们制作了[基本动画](/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations)以及逐步了解了让物件移动的方法。在这一部分，我们将会对运动有更深的了解并学会添加一些符合物理的运动以让我们的动画更加高级。 -

绘制小球

+## 绘制小球 -

我们将会画一个小球用于动画学习，所以首先在画布上画一个球。下面的代码帮助我们建立画布。

+我们将会画一个小球用于动画学习，所以首先在画布上画一个球。下面的代码帮助我们建立画布。 -
<canvas id="canvas" width="600" height="300"></canvas>
-
+```html + +``` -

跟平常一样，我们需要先画一个 context（画布场景）。为了画出这个球，我们又会创建一个包含一些相关属性以及 draw() 函数的 ball 对象，来完成绘制。

+跟平常一样，我们需要先画一个 context（画布场景）。为了画出这个球，我们又会创建一个包含一些相关属性以及 `draw()` 函数的 `ball` 对象，来完成绘制。 -
var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 var ball = {
@@ -34,15 +34,17 @@ var ball = {
   }
 };
 
-ball.draw();
+ball.draw(); +``` -

这里并没有什么特别的。小球实际上是一个简单的圆形，在{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} 函数的帮助下画出。

+这里并没有什么特别的。小球实际上是一个简单的圆形，在{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} 函数的帮助下画出。 -

添加速率

+## 添加速率 -

现在我们有了一个小球，正准备添加一些基本动画，正如我们上一章所学的。又是这样，{{domxref("window.requestAnimationFrame()")}} 再一次帮助我们控制动画。小球依旧依靠添加速率矢量进行移动。在每一帧里面，我们依旧用{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} 清理掉之前帧里旧的圆形。

+现在我们有了一个小球，正准备添加一些基本动画，正如我们[上一章](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations)所学的。又是这样，{{domxref("window.requestAnimationFrame()")}} 再一次帮助我们控制动画。小球依旧依靠添加速率矢量进行移动。在每一帧里面，我们依旧用{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} 清理掉之前帧里旧的圆形。 -
var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 
@@ -79,27 +81,31 @@ canvas.addEventListener('mouseout', function(e){
 });
 
 ball.draw();
-
+``` -

边界

+## 边界 -

若没有任何的碰撞检测，我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转。为了这么做，我们把下面的检查代码添加进 draw 函数：

+若没有任何的碰撞检测，我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转。为了这么做，我们把下面的检查代码添加进 `draw` 函数： -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+```js
+if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
   ball.vy = -ball.vy;
 }
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
   ball.vx = -ball.vx;
-}
+} +``` -

首个预览

+### 首个预览 -

让我们看看现今它变得如何。移动你的鼠标到画布里开启动画。

+让我们看看现今它变得如何。移动你的鼠标到画布里开启动画。 - - -

{{EmbedLiveSample("首个预览", "610", "310")}}

+ball.draw(); +``` -

加速度

+{{EmbedLiveSample("首个预览", "610", "310")}} -

为了让动作更真实，你可以像这样处理速度，例如：

+## 加速度 -
ball.vy *= .99;
-ball.vy += .25;
+为了让动作更真实，你可以像这样处理速度，例如： -

这会逐帧减少垂直方向的速度，所以小球最终将只会在地板上弹跳。

+```js +ball.vy *= .99; +ball.vy += .25; +``` - - -

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ball.draw(); +``` -

长尾效果

+{{EmbedLiveSample("Second_demo", "610", "310")}} -

现在，我们使用的是 {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} 函数帮我们清除前一帧动画。若用一个半透明的 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} 函数取代之，就可轻松制作长尾效果。

+## 长尾效果 -
ctx.fillStyle = 'rgba(255,255,255,0.3)';
-ctx.fillRect(0,0,canvas.width,canvas.height);
+现在，我们使用的是 {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} 函数帮我们清除前一帧动画。若用一个半透明的 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} 函数取代之，就可轻松制作长尾效果。 - +ball.draw(); +``` -

{{EmbedLiveSample("Third_demo", "610", "310")}}

+{{EmbedLiveSample("Third_demo", "610", "310")}} -

添加鼠标控制

+## 添加鼠标控制 -

为了更好地控制小球，我们可以用 mousemove事件让它跟随鼠标活动。下面例子中，click 事件会释放小球然后让它重新跳起。

+为了更好地控制小球，我们可以用 [`mousemove`](/en-US/docs/Web/Reference/Events/mousemove)事件让它跟随鼠标活动。下面例子中，[click](/zh-CN/docs/Web/Events/click) 事件会释放小球然后让它重新跳起。 - +```html hidden + +``` -
var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 var running = false;
@@ -323,10 +334,10 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
     ball.vx = -ball.vx;
   }
 
@@ -355,21 +366,19 @@ canvas.addEventListener('mouseout', function(e){
 });
 
 ball.draw();
-
+``` -

用你的鼠标移动小球，点击可以释放。

+用你的鼠标移动小球，点击可以释放。 -

{{EmbedLiveSample("添加鼠标控制", "610", "310")}}

+{{EmbedLiveSample("添加鼠标控制", "610", "310")}} -

Breakout

+## Breakout -

本短文仅仅解释了一小部分的创建高级动画的技巧。其实还有更多！试试添加一个球拍，一些砖块，然后将这个例子弄成一个 Breakout（译者注：打砖块游戏）如何？查看我们的游戏开发区去查阅更多相关文章。

+本短文仅仅解释了一小部分的创建高级动画的技巧。其实还有更多！试试添加一个球拍，一些砖块，然后将这个例子弄成一个 [Breakout](http://en.wikipedia.org/wiki/Breakout_%28video_game%29)（译者注：打砖块游戏）如何？查看我们的[游戏开发](/zh-CN/docs/Games)区去查阅更多相关文章。 -

参考

+## 参考 - +- {{domxref("window.requestAnimationFrame()")}} +- [网页动画高效开发](/zh-CN/docs/Games/Techniques/Efficient_animation_for_web_games) -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

+{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}} diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md index 5e3772b6a150e2..8a175cc808c580 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md @@ -2,69 +2,67 @@ title: Canvas 的基本用法 slug: Web/API/Canvas_API/Tutorial/Basic_usage --- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}} -
-

让我们通过了解 {{HTMLElement("canvas")}} {{Glossary("HTML")}} 元素本身开始本教程。在本页结束时，你会了解到如何去设置一个 canvas 2D 上下文以及如何在你的浏览器上创建第一个例子。

-
+让我们通过了解 {{HTMLElement("canvas")}} {{Glossary("HTML")}} 元素本身开始本教程。在本页结束时，你会了解到如何去设置一个 canvas 2D 上下文以及如何在你的浏览器上创建第一个例子。 -

<canvas> 元素

+## `` 元素 -
<canvas id="tutorial" width="150" height="150"></canvas>
-
+```html + +``` -

{{HTMLElement("canvas")}} 看起来和 {{HTMLElement("img")}} 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<canvas> 标签只有两个属性—— {{htmlattrxref("width", "canvas")}}和{{htmlattrxref("height", "canvas")}}。这些都是可选的，并且同样利用 {{Glossary("DOM")}} properties 来设置。当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用{{Glossary("CSS")}}来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。

+{{HTMLElement("canvas")}} 看起来和 {{HTMLElement("img")}} 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，`` 标签只有两个属性**——** {{htmlattrxref("width", "canvas")}}和{{htmlattrxref("height", "canvas")}}。这些都是可选的，并且同样利用 {{Glossary("DOM")}} [properties](/zh-CN/docs/Web/API/HTMLCanvasElement) 来设置。当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用{{Glossary("CSS")}}来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。 -
-

注意： 如果你绘制出来的图像是扭曲的，尝试用 width 和 height 属性为<canvas>明确规定宽高，而不是使用 CSS。

-
+> **备注：** 如果你绘制出来的图像是扭曲的，尝试用 width 和 height 属性为\明确规定宽高，而不是使用 CSS。 -

id属性并不是<canvas>元素所特有的，而是每一个 HTML 元素都默认具有的属性（比如 class 属性）。给每个标签都加上一个 id 属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。

+[`id`](/zh-CN/docs/Web/HTML/Global_attributes/id)属性并不是\元素所特有的，而是每一个 HTML 元素都默认具有的属性（比如 class 属性）。给每个标签都加上一个 id 属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。 -

<canvas>元素可以像任何一个普通的图像一样（有{{cssxref("margin")}}，{{cssxref("border")}}，{{cssxref("background")}}等等属性）被设计。然而，这些样式不会影响在 canvas 中的实际图像。我们将会在一个专门的章节里看到这是如何解决的。当开始时没有为 canvas 规定样式规则，其将会完全透明。

+\元素可以像任何一个普通的图像一样（有{{cssxref("margin")}}，{{cssxref("border")}}，{{cssxref("background")}}等等属性）被设计。然而，这些样式不会影响在 canvas 中的实际图像。我们将会在一个[专门的章节](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)里看到这是如何解决的。当开始时没有为 canvas 规定样式规则，其将会完全透明。 -
-

替换内容

+### 替换内容 -

<canvas>元素与{{HTMLElement("img")}}标签的不同之处在于，就像{{HTMLElement("video")}}，{{HTMLElement("audio")}}，或者 {{HTMLElement("picture")}}元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者文本浏览器不支持 HTML 元素"canvas"，在这些浏览器上你应该总是能展示替代内容。

+\元素与{{HTMLElement("img")}}标签的不同之处在于，就像{{HTMLElement("video")}}，{{HTMLElement("audio")}}，或者 {{HTMLElement("picture")}}元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者文本浏览器不支持 HTML 元素"canvas"，在这些浏览器上你应该总是能展示替代内容。 -

这非常简单：我们只是在<canvas>标签中提供了替换内容。不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染 canvas。

+这非常简单：我们只是在\标签中提供了替换内容。不支持\的浏览器将会忽略容器并在其中渲染后备内容。而支持\的浏览器将会忽略在容器中包含的内容，并且只是正常渲染 canvas。 -

举个例子，我们可以提供对 canvas 内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示：

+举个例子，我们可以提供对 canvas 内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示： -
<canvas id="stockGraph" width="150" height="150">
+```html
+
   current stock price: $3.15 +0.15
-</canvas>
+
 
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
+ + + +``` -

</canvas> 标签不可省

+### `` 标签不可省 -

与 {{HTMLElement("img")}} 元素不同，{{HTMLElement("canvas")}} 元素需要结束标签 (</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

+与 {{HTMLElement("img")}} 元素不同，{{HTMLElement("canvas")}} 元素**需要**结束标签 (``)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。 -

如果不需要替代内容，一个简单的 <canvas id="foo" ...></canvas> 在所有支持 canvas 的浏览器中都是完全兼容的。

+如果不需要替代内容，一个简单的 ` `在所有支持 canvas 的浏览器中都是完全兼容的。 -

渲染上下文（The rendering context）

+## 渲染上下文（The rendering context） -

{{HTMLElement("canvas")}} 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如， WebGL 使用了基于OpenGL ES的 3D 上下文 ("experimental-webgl") 。

+{{HTMLElement("canvas")}} 元素创造了一个固定大小的画布，它公开了一个或多个**渲染上下文**，其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如， [WebGL](/zh-CN/docs/Web/WebGL) 使用了基于[OpenGL ES](http://www.khronos.org/opengles/)的 3D 上下文 ("experimental-webgl") 。 -

canvas 起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。{{HTMLElement("canvas")}} 元素有一个叫做 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数，即上下文的类型。对于 2D 图像而言，如本教程，你可以使用 {{domxref("CanvasRenderingContext2D")}}。

+canvas 起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。{{HTMLElement("canvas")}} 元素有一个叫做 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 的方法，这个方法是用来获得渲染上下文和它的绘画功能。`getContext()`接受一个参数，即上下文的类型。对于 2D 图像而言，如本教程，你可以使用 {{domxref("CanvasRenderingContext2D")}}。 -
var canvas = document.getElementById('tutorial');
+```js
+var canvas = document.getElementById('tutorial');
 var ctx = canvas.getContext('2d');
-
+``` -

代码的第一行通过使用 {{domxref("document.getElementById()")}} 方法来为 {{HTMLElement("canvas")}} 元素得到 DOM 对象。一旦有了元素对象，你可以通过使用它的 getContext() 方法来访问绘画上下文。

+代码的第一行通过使用 {{domxref("document.getElementById()")}} 方法来为 {{HTMLElement("canvas")}} 元素得到 DOM 对象。一旦有了元素对象，你可以通过使用它的 getContext() 方法来访问绘画上下文。 -
-

检查支持性

+## 检查支持性 -

替换内容是用于在不支持 {{HTMLElement("canvas")}} 标签的浏览器中展示的。通过简单的测试 getContext() 方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：

+替换内容是用于在不支持 {{HTMLElement("canvas")}} 标签的浏览器中展示的。通过简单的测试 `getContext()` 方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子： -
var canvas = document.getElementById('tutorial');
+```js
+var canvas = document.getElementById('tutorial');
 
 if (canvas.getContext){
   var ctx = canvas.getContext('2d');
@@ -72,52 +70,50 @@ if (canvas.getContext){
 } else {
   // canvas-unsupported code here
 }
-
-
-
+``` -

一个模板骨架

+## 一个模板骨架 -

这里的是一个最简单的模板，我们之后就可以把它作为之后的例子的起点。

+这里的是一个最简单的模板，我们之后就可以把它作为之后的例子的起点。 -
-

注意：为了简洁，我们在 HTML 中内嵌了 script 元素，但并不推荐这种做法。

-
+> **备注：** 为了简洁，我们在 HTML 中内嵌了 script 元素，但并不推荐这种做法。 -
<html>
-  <head>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
+```html
+
+  
+    Canvas tutorial
+    
+    
+  
+  
+    
+  
+
+```
 
-
上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}， {{domxref("WindowTimers.setInterval", "window.setInterval()")}}，或者其他任何事件处理程序来调用。

+上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}， {{domxref("WindowTimers.setInterval", "window.setInterval()")}}，或者其他任何事件处理程序来调用。
 
-
模板看起来会是这样。如这里所示，它最初是空白的。

+模板看起来会是这样。如这里所示，它最初是空白的。
 
-
{{EmbedLiveSample("一个模板骨架", 160, 160)}}

+{{EmbedLiveSample("一个模板骨架", 160, 160)}}
 
-
一个简单例子

+## 一个简单例子
 
-
一开始，让我们来看个简单的例子，我们绘制了两个有趣的长方形，其中的一个有着 alpha 透明度。我们将在接下来的例子里深入探索一下这是如何工作的。

+一开始，让我们来看个简单的例子，我们绘制了两个有趣的长方形，其中的一个有着 alpha 透明度。我们将在接下来的例子里深入探索一下这是如何工作的。
 
-
<html>
- <head>
-  <script type="application/javascript">
+```html
+
+ 
+  
+ 
+ 
+   
+ 
+
+```
 
-
例子看起来像是这样：:

+例子看起来像是这样：:
 
-
{{EmbedLiveSample("一个简单例子", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+{{EmbedLiveSample("一个简单例子", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}
 
-
{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

+{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/index.md b/files/zh-cn/web/api/canvas_api/tutorial/index.md
index 6e0dddacb8ee37..232657d5379e82 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/index.md
@@ -2,46 +2,40 @@
 title: Canvas 教程
 slug: Web/API/Canvas_API/Tutorial
 ---
-
{{CanvasSidebar}}

+{{CanvasSidebar}}
 
-

+[![](https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg)](/zh-CN/docs/HTML/Canvas)
 
-

-
<canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的 (以及不那么简单的) 动画。右边的图片展示了一些 <canvas> 的实现示例，在这个教程后面我们将看到。

-

+[**``**](/zh-CN/docs/Web/HTML/Element/canvas)是一个可以使用脚本 (通常为[JavaScript](/zh-CN/docs/JavaScript)) 来绘制图形的 [HTML](/zh-CN/docs/HTML) 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的 (以及[不那么简单的](/zh-CN/docs/Web/API/Canvas_API/A_basic_ray-caster)) 动画。右边的图片展示了一些 `` 的实现示例，在这个教程后面我们将看到。
 
-
本篇教程从一些基础开始，描述了如何使用<canvas>元素来绘制 2D 图形。教程中提供的例子，会让你明白可以用 canvas 做什么，也会提供一些代码片段来帮助你开始构建自己的内容。

+本篇教程从一些基础开始，描述了如何使用\元素来绘制 2D 图形。教程中提供的例子，会让你明白可以用 canvas 做什么，也会提供一些代码片段来帮助你开始构建自己的内容。
 
-
<canvas> 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

+`` 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。
 
-
开始之前

+## 开始之前
 
-
使用 <canvas> 元素不是非常难，但你需要一些基本的HTML和JavaScript知识。除一些过时的浏览器不支持<canvas> 元素外，所有的新版本主流浏览器都支持它。Canvas 的默认大小为 300 像素×150 像素（宽×高，像素的单位是 px）。但是，可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。为了在 Canvas 上绘制图形，我们使用一个 JavaScript 上下文对象，它能动态创建图像（ creates graphics on the fly）。

+使用 `` 元素不是非常难，但你需要一些基本的[HTML](/zh-CN/docs/HTML)和[JavaScript](/zh-CN/docs/JavaScript)知识。除一些过时的浏览器不支持`` 元素外，所有的新版本主流浏览器都支持它。Canvas 的默认大小为 300 像素 ×150 像素（宽 × 高，像素的单位是 px）。但是，可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。为了在 Canvas 上绘制图形，我们使用一个 JavaScript 上下文对象，它能动态创建图像（ creates graphics on the fly）。
 
-
本教程包含

+## 本教程包含
 
-
+- [基本用法](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage)
+- [绘制图形](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+- [使用样式与颜色](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)
+- [绘制文本](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text)
+- [使用图像](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images)
+- [变形](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations)
+- [合成和剪辑](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing)
+- [基本动画](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations)
+- [高级动画](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Advanced_animations)
+- [像素处理](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)
+- [点击区域和无障碍访问](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility)
+- [优化 canvas](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)
+- [终曲](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Finale)
 
-
相关链接

+## 相关链接
 
-
+- [Canvas 专题页](/zh-CN/docs/Web/API/Canvas_API)
+- [Adobe Illustrator to Canvas plug-in](http://visitmix.com/labs/ai2canvas/)
+- [HTML5 Canvas 教程](http://www.html5canvastutorials.com/)
 
-
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}

+{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md
index c8514bdd57346a..1fccb06b181955 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md
@@ -2,131 +2,127 @@
 title: 使用图像 Using images
 slug: Web/API/Canvas_API/Tutorial/Using_images
 ---
-
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}
 
-
canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如 PNG、GIF 或者 JPEG。你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。

+canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如 PNG、GIF 或者 JPEG。你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。
 
-
引入图像到 canvas 里需要以下两步基本操作：

+引入图像到 canvas 里需要以下两步基本操作：
 
-
    
- 
  1. 获得一个指向{{domxref("HTMLImageElement")}}的对象或者另一个 canvas 元素的引用作为源，也可以通过提供一个 URL 的方式来使用图片（参见例子）
    2. 
- 
  2. 使用drawImage()函数将图片绘制到画布上
    3. 
-

+1.  获得一个指向{{domxref("HTMLImageElement")}}的对象或者另一个 canvas 元素的引用作为源，也可以通过提供一个 URL 的方式来使用图片（参见[例子](http://www.html5canvastutorials.com/tutorials/html5-canvas-images/)）
+2.  使用`drawImage()`函数将图片绘制到画布上
 
-
我们来看看具体是怎么做的。

+我们来看看具体是怎么做的。
 
-
获得需要绘制的图片

+## 获得需要绘制的图片
 
-
canvas 的 API 可以使用下面这些类型中的一种作为图片的源：

+canvas 的 API 可以使用下面这些类型中的一种作为图片的源：
 
-

- 
{{domxref("HTMLImageElement")}}

- 
这些图片是由Image()函数构造出来的，或者任何的{{HTMLElement("img")}}元素

- 
{{domxref("HTMLVideoElement")}}

- 
用一个 HTML 的 {{HTMLElement("video")}}元素作为你的图片源，可以从视频中抓取当前帧作为一个图像

- 
{{domxref("HTMLCanvasElement")}}

- 
可以使用另一个 {{HTMLElement("canvas")}} 元素作为你的图片源。

- 
{{domxref("ImageBitmap")}}

- 
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

-

+- **{{domxref("HTMLImageElement")}}**
+  - : 这些图片是由`Image()函数构造出来的，或者任何的{{HTMLElement("img")}}元素`
+- **{{domxref("HTMLVideoElement")}}**
+  - : 用一个 HTML 的 {{HTMLElement("video")}}元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
+- **{{domxref("HTMLCanvasElement")}}**
+  - : 可以使用另一个 {{HTMLElement("canvas")}} 元素作为你的图片源。
+- **{{domxref("ImageBitmap")}}**
+  - : 这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
 
-
这些源统一由 {{domxref("CanvasImageSource")}}类型来引用。

+这些源统一由 {{domxref("CanvasImageSource")}}类型来引用。
 
-
有几种方式可以获取到我们需要在 canvas 上使用的图片。

+有几种方式可以获取到我们需要在 canvas 上使用的图片。
 
-
使用相同页面内的图片

+### 使用相同页面内的图片
 
-
我们可以通过下列方法的一种来获得与 canvas 相同页面内的图片的引用：

+我们可以通过下列方法的一种来获得与 canvas 相同页面内的图片的引用：
 
-
    
- 
  • {{domxref("document.images")}}集合
    • 
- 
  •  {{domxref("document.getElementsByTagName()")}}方法
    • 
- 
  • 如果你知道你想使用的指定图片的 ID，你可以用{{domxref("document.getElementById()")}}获得这个图片
    • 
-

+- {{domxref("document.images")}}集合
+- {{domxref("document.getElementsByTagName()")}}方法
+- 如果你知道你想使用的指定图片的 ID，你可以用{{domxref("document.getElementById()")}}获得这个图片
 
-
使用其它域名下的图片

+### 使用其它域名下的图片
 
-
在 {{domxref("HTMLImageElement")}}上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染 canvas，否则，使用这个图片将会污染 canvas。

+在 {{domxref("HTMLImageElement")}}上使用[crossOrigin](/zh-CN/docs/HTML/CORS_settings_attributes)属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染 canvas，否则，使用这个图片将会[污染 canvas](/zh-CN/docs/CORS_Enabled_Image#.E4.BB.80.E4.B9.88.E6.98.AF.22.E8.A2.AB.E6.B1.A1.E6.9F.93.22.E7.9A.84canvas)。
 
-
使用其它 canvas 元素

+### 使用其它 canvas 元素
 
-
和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

+和引用页面内的图片类似地，用 `document.getElementsByTagName `或 `document.getElementById `方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。
 
-
一个常用的应用就是将第二个 canvas 作为另一个大的 canvas 的缩略图。

+一个常用的应用就是将第二个 canvas 作为另一个大的 canvas 的缩略图。
 
-
由零开始创建图像

+### 由零开始创建图像
 
-
或者我们可以用脚本创建一个新的 {{domxref("HTMLImageElement")}} 对象。要实现这个方法，我们可以使用很方便的Image()构造函数。

+或者我们可以用脚本创建一个新的 {{domxref("HTMLImageElement")}} 对象。要实现这个方法，我们可以使用很方便的`Image()构造函数。`
 
-
var img = new Image();   // 创建一个<img>元素
+```js
+var img = new Image();   // 创建一个元素
 img.src = 'myImage.png'; // 设置图片源地址
-

+```
 
-
当脚本执行后，图片开始装载。

+当脚本执行后，图片开始装载。
 
-
若调用 drawImage 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此你应该用 load 事件来保证不会在加载完毕之前使用这个图片：

+若调用 `drawImage` 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此你应该用 load 事件来保证不会在加载完毕之前使用这个图片：
 
-
var img = new Image();   // 创建 img 元素
+```js
+var img = new Image();   // 创建 img 元素
 img.onload = function(){
   // 执行 drawImage 语句
 }
 img.src = 'myImage.png'; // 设置图片源地址
-

+```
 
-
如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预加载策略超出本教程的范围。

+如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预加载策略超出本教程的范围。
 
-
通过 data: url 方式嵌入图像

+### 通过 data: url 方式嵌入图像
 
-
我们还可以通过 data:url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。

+我们还可以通过 [data:url](http://en.wikipedia.org/wiki/Data:_URL) 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。
 
-
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-

+```js
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+```
 
-
其优点就是图片内容即时可用，无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，图片大的话内嵌的 url 数据会相当的长：

+其优点就是图片内容即时可用，无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，图片大的话内嵌的 url 数据会相当的长：
 
-
使用视频帧

+### 使用视频帧
 
-
你还可以使用{{HTMLElement("video")}} 中的视频帧（即便视频是不可见的）。例如，如果你有一个 ID 为“myvideo”的{{HTMLElement("video")}} 元素，你可以这样做：

+你还可以使用{{HTMLElement("video")}} 中的视频帧（即便视频是不可见的）。例如，如果你有一个 ID 为“myvideo”的{{HTMLElement("video")}} 元素，你可以这样做：
 
-
function getMyVideo() {
+```js
+function getMyVideo() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
 
     return document.getElementById('myvideo');
   }
-}

+}
+```
 
-
它将为这个视频返回{{domxref("HTMLVideoElement")}}对象，正如我们前面提到的，它可以作为我们的 Canvas 图片源。

+它将为这个视频返回{{domxref("HTMLVideoElement")}}对象，正如我们前面提到的，它可以作为我们的 Canvas 图片源。
 
-
绘制图片

+## 绘制图片
 
-
一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种。

+一旦获得了源图对象，我们就可以使用 `drawImage` 方法将它渲染到 canvas 里。`drawImage` 方法有三种形态，下面是最基础的一种。
 
-

- 
drawImage(image, x, y)

- 
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

-

+- **`drawImage(image, x, y)`**
+  - : 其中 `image` 是 image 或者 canvas 对象，`x` 和 `y 是其在目标 canvas 里的起始坐标。`
 
-

-
SVG 图像必须在 <svg> 根指定元素的宽度和高度。

-

+> **备注：** SVG 图像必须在 \ 根指定元素的宽度和高度。
 
-
例子：一个简单的线图

+### 例子：一个简单的线图
 
-

+![](/@api/deki/files/58/=Canvas_backdrop.png)
 
-
下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制复杂的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。

+下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制复杂的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 `onload` 事件响应函数中触发绘制动作。`drawImage` 方法将背景图放置在 canvas 的左上角 (0,0) 处。
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
  function draw() {
+```js
+  function draw() {
     var ctx = document.getElementById('canvas').getContext('2d');
     var img = new Image();
     img.onload = function(){
@@ -140,88 +136,87 @@ img.src = 'myImage.png'; // 设置图片源地址
     }
     img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
   }
-

+```
 
-
结果看起来是这样的：

+结果看起来是这样的：
 
-
{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}
 
-
缩放 Scaling

+## 缩放 Scaling
 
-
drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。

+`drawImage` 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。
 
-

- 
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}

- 
这个方法多了 2 个参数：width 和 height，这两个参数用来控制 当向 canvas 画入时应该缩放的大小

-

+- {{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+  - : 这个方法多了 2 个参数：`width` 和 `height，`这两个参数用来控制 当向 canvas 画入时应该缩放的大小
 
-
例子：平铺图像

+### 例子：平铺图像
 
-

+![](/@api/deki/files/106/=Canvas_scale_image.png)
 
-
在这个例子里，我会用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。见下面的代码，第一层 for 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一，50x38 px。这种方法可以用来很好的达到背景图案的效果，在下面的教程中会看到。

+在这个例子里，我会用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。见下面的代码，第一层 `for` 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一，50x38 px。这种方法可以用来很好的达到背景图案的效果，在下面的教程中会看到。
 
-

-
注意：图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果您的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。

-

+> **备注：** 注意：图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果您的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var img = new Image();
   img.onload = function(){
-    for (var i=0;i<4;i++){
-      for (var j=0;j<3;j++){
+    for (var i=0;i<4;i++){
+      for (var j=0;j<3;j++){
         ctx.drawImage(img,j*50,i*38,50,38);
       }
     }
   };
   img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}

+}
+```
 
-
结果看起来像这样：

+结果看起来像这样：
 
-
{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}
 
-
切片 Slicing

+## 切片 Slicing
 
-
drawImage 方法的第三个也是最后一个变种有 8 个新参数，用于控制做切片显示的。

+`drawImage` 方法的第三个也是最后一个变种有 8 个新参数，用于控制做切片显示的。
 
-

- 
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}

- 
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它 8 个参数最好是参照右边的图解，前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

-

+- {{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+  - : 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它 8 个参数最好是参照右边的图解，前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。
 
-

+![](/@api/deki/files/79/=Canvas_drawimage.jpg)
 
-
切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像，那么你可以用这个方法来合成一个完整图像。例如，你想画一张图表，而手上有一个包含所有必需的文字的 PNG 文件，那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。

+切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像，那么你可以用这个方法来合成一个完整图像。例如，你想画一张图表，而手上有一个包含所有必需的文字的 PNG 文件，那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。
 
-
例子：相框

+### 例子：相框
 
-

+![](/@api/deki/files/80/=Canvas_drawimage2.jpg)
 
-
在这个例子里面我用到上面已经用过的犀牛图像，不过这次我要给犀牛头做个切片特写，然后合成到一个相框里面去。相框带有阴影效果，是一个以 24-bit PNG 格式保存的图像。因为 24-bit PNG 图像带有一个完整的 8-bit alpha 通道，与 GIF 和 8-bit PNG 不同，我可以将它放成背景而不必担心底色的问题。

+在这个例子里面我用到上面已经用过的犀牛图像，不过这次我要给犀牛头做个切片特写，然后合成到一个相框里面去。相框带有阴影效果，是一个以 24-bit PNG 格式保存的图像。因为 24-bit PNG 图像带有一个完整的 8-bit alpha 通道，与 GIF 和 8-bit PNG 不同，我可以将它放成背景而不必担心底色的问题。
 
-
我用一个与上面用到的不同的方法来装载图像，直接将图像插入到 HTML 里面，然后通过 CSS 隐藏（display:none）它。两个图像我都赋了 id ，方便后面使用。看下面的脚本，相当简单，首先对犀牛头做好切片（第一次drawImage）放在 canvas 上，然后再上面套个相框（第二次drawImage）。

+我用一个与上面用到的不同的方法来装载图像，直接将图像插入到 HTML 里面，然后通过 CSS 隐藏（`display:none`）它。两个图像我都赋了 `id` ，方便后面使用。看下面的脚本，相当简单，首先对犀牛头做好切片（第一次`drawImage`）放在 canvas 上，然后再上面套个相框（第二次`drawImage`）。
 
-
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>

+```html
+
+ 
+   
+   

+     
+     
+   

+ 
+
+```
 
-
function draw() {
+```js
+function draw() {
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
 
@@ -232,41 +227,44 @@ img.src = 'myImage.png'; // 设置图片源地址
   // Draw frame
   ctx.drawImage(document.getElementById('frame'),0,0);
 }
-

-
-
{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

-
-
-
-

-
-
我这一章最后的示例是弄一个小画廊。画廊由挂着几张画作的格子组成。当页面装载好之后，为每张画创建一个 canvas 元素并用加上画框然后插入到画廊中去。

-
-
在我这个例子里面，所有“画”都是固定宽高的，画框也是。你可以做些改进，通过脚本用画的宽高来准确控制围绕它的画框的大小。

-
-
下面的代码应该是蛮简单易懂的了。就是遍历图像对象数组，依次创建新的 canvas 元素并添加进去。可能唯一需要注意的，对于那些并不熟悉 DOM 的朋友来说，是 insertBefore 方法的用法。insertBefore 是父节点（单元格）的方法，用于将新节点（canvas 元素）插入到我们想要插入的节点之前。

-
-
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>

-
-
body {
+```
+
+{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}
+
+## 示例：画廊 Art gallery example
+
+![](/@api/deki/files/57/=Canvas_art_gallery.jpg)
+
+我这一章最后的示例是弄一个小画廊。画廊由挂着几张画作的格子组成。当页面装载好之后，为每张画创建一个 canvas 元素并用加上画框然后插入到画廊中去。
+
+在我这个例子里面，所有“画”都是固定宽高的，画框也是。你可以做些改进，通过脚本用画的宽高来准确控制围绕它的画框的大小。
+
+下面的代码应该是蛮简单易懂的了。就是遍历图像对象数组，依次创建新的 canvas 元素并添加进去。可能唯一需要注意的，对于那些并不熟悉 DOM 的朋友来说，是 [`insertBefore`](/En/DOM/Node.insertBefore) 方法的用法。`insertBefore` 是父节点（单元格）的方法，用于将新节点（canvas 元素）插入到我们想要插入的节点之前。
+
+```html
+
+ 
+     
+      
+        
+        
+        
+        
+      
+      
+        
+        
+        
+        
+      
+     

+     
+ 
+
+```
+
+```css
+body {
   background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
   margin: 10px;
 }
@@ -281,12 +279,14 @@ table {
 
 td {
   padding: 15px;
-}

+}
+```
 
-
function draw() {
+```js
+function draw() {
 
   // Loop through all images
-  for (i=0;i<document.images.length;i++){
+  for (i=0;i
+```
 
-
{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+{{EmbedLiveSample("Art_gallery_example", 725, 400)}}
 
-
控制图像的缩放行为 Controlling image scaling behavior

+## 控制图像的缩放行为 Controlling image scaling behavior
 
-
如同前文所述，过度缩放图像可能会导致图像模糊或像素化。您可以通过使用绘图环境的{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}属性来控制是否在缩放图像时使用平滑算法。默认值为true，即启用平滑缩放。您也可以像这样禁用此功能：

+如同前文所述，过度缩放图像可能会导致图像模糊或像素化。您可以通过使用绘图环境的{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}属性来控制是否在缩放图像时使用平滑算法。默认值为`true`，即启用平滑缩放。您也可以像这样禁用此功能：
 
-
ctx.mozImageSmoothingEnabled = false;
+```js
+ctx.mozImageSmoothingEnabled = false;
 ctx.webkitImageSmoothingEnabled = false;
 ctx.msImageSmoothingEnabled = false;
-ctx.imageSmoothingEnabled = false;

+ctx.imageSmoothingEnabled = false;
+```
 
-
{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

+{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}
diff --git a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
index b547383304cc8e..f90a12ef10d32d 100644
--- a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
+++ b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.md
@@ -2,37 +2,39 @@
 title: CanvasGradient.addColorStop()
 slug: Web/API/CanvasGradient/addColorStop
 ---
-
{{APIRef("Canvas")}}

+{{APIRef("Canvas")}}
 
-
CanvasGradient.addColorStop() 方法添加一个由偏移值和颜色值指定的断点到渐变。如果偏移值不在0到1之间，将抛出INDEX_SIZE_ERR错误，如果颜色值不能被解析为有效的 CSS 颜色值 {{cssxref("<color>")}}，将抛出SYNTAX_ERR错误。

+**`CanvasGradient.addColorStop()`** 方法添加一个由**偏移值**和**颜色值**指定的断点到渐变。如果偏移值不在`0`到`1`之间，将抛出`INDEX_SIZE_ERR`错误，如果颜色值不能被解析为有效的 CSS 颜色值 {{cssxref("<color>")}}，将抛出`SYNTAX_ERR`错误。
 
-
语法

+## 语法
 
-
void gradient.addColorStop(offset, color);
-

+```js
+void gradient.addColorStop(offset, color);
+```
 
-
参数

+### 参数
 
-

- 
offset

- 
0到1之间的值，超出范围将抛出INDEX_SIZE_ERR错误

- 
color

- 
CSS 颜色值 {{cssxref("<color>")}}。如果颜色值不能被解析为有效的 CSS 颜色值 <color>，将抛出SYNTAX_ERR错误。

-

+- offset
+  - : `0`到`1`之间的值，超出范围将抛出`INDEX_SIZE_ERR`错误
+- color
+  - : CSS 颜色值 {{cssxref("<color>")}}。如果颜色值不能被解析为有效的 CSS 颜色值 ``，将抛出`SYNTAX_ERR`错误。
 
-
示例

+## 示例
 
-
使用addColorStop方法

+### 使用`addColorStop`方法
 
-
一个使用{{domxref("CanvasGradient")}}对象的addColorStop 方法的简单例子

+一个使用{{domxref("CanvasGradient")}}对象的`addColorStop` 方法的简单例子
 
-
HTML

+#### HTML
 
-
 <canvas id="canvas"></canvas>

+```html
+ 
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 var gradient = ctx.createLinearGradient(0,0,200,0);
@@ -40,27 +42,26 @@ gradient.addColorStop(0,"green");
 gradient.addColorStop(1,"white");
 ctx.fillStyle = gradient;
 ctx.fillRect(10,10,200,100);
-

+```
 
-
编辑以下代码可看到画布变化：

+编辑以下代码可看到画布变化：
 
-
+```
 
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }}
 
-
标准

+## 标准
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasGradient.addColorStop")}}
 
-
请参阅

+## 请参阅
 
-
    
- 
  • 接口定义 {{domxref("CanvasGradient")}}
    • 
- 
  • {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
    • 
- 
  • {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
    • 
-

+- 接口定义 {{domxref("CanvasGradient")}}
+- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
diff --git a/files/zh-cn/web/api/canvaspattern/settransform/index.md b/files/zh-cn/web/api/canvaspattern/settransform/index.md
index 52e28ecaa26bb3..57db47ad3a52be 100644
--- a/files/zh-cn/web/api/canvaspattern/settransform/index.md
+++ b/files/zh-cn/web/api/canvaspattern/settransform/index.md
@@ -2,37 +2,38 @@
 title: CanvasPattern.setTransform()
 slug: Web/API/CanvasPattern/setTransform
 ---
-
{{APIRef("Canvas API")}} {{SeeCompatTable}}

+{{APIRef("Canvas API")}} {{SeeCompatTable}}
 
-
CanvasPattern.setTransform() 方法使用 {{domxref("SVGMatrix")}} 对象作为图案的变换矩阵，并在此图案上调用它。

+**`CanvasPattern.setTransform()`** 方法使用 {{domxref("SVGMatrix")}} 对象作为图案的变换矩阵，并在此图案上调用它。
 
-
语法

+## 语法
 
-
void pattern.setTransform(matrix);
-

+```
+void pattern.setTransform(matrix);
+```
 
-
参数

+### 参数
 
-

- 
matrix

- 
{{domxref("SVGMatrix")}} ，被用作图案的变换矩阵。

-

+- `matrix`
+  - : {{domxref("SVGMatrix")}} ，被用作图案的变换矩阵。
 
-
示例

+## 示例
 
-
使用 setTransform 方法

+### 使用 `setTransform` 方法
 
-
这是一段简单的代码片段，使用 setTransform 方法创建一个来自 {{domxref("SVGMatrix")}} 具有指定图案变化的{{domxref("CanvasPattern")}} 。如例子所示，如果你把图案赋值给当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} ，当你使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，图案会被应用到 canvas 上绘制出效果。

+这是一段简单的代码片段，使用 `setTransform` 方法创建一个来自 {{domxref("SVGMatrix")}} 具有指定图案变化的{{domxref("CanvasPattern")}} 。如例子所示，如果你把图案赋值给当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} ，当你使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，图案会被应用到 canvas 上绘制出效果。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-<svg id="svg1"></svg>
-

+```html
+
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 var svg1 = document.getElementById("svg1");
@@ -47,20 +48,18 @@ img.onload = function() {
   ctx.fillStyle = pattern;
   ctx.fillRect(0,0,400,400);
 };
-

+```
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
+```
 
-
{{ EmbedLiveSample('Playable_code', 700, 380) }}

+{{ EmbedLiveSample('Playable_code', 700, 380) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasPattern.setTransform")}}
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义，{{domxref("CanvasPattern")}}
    • 
- 
  • {{domxref("SVGMatrix")}}
    • 
-

+- 接口定义，{{domxref("CanvasPattern")}}
+- {{domxref("SVGMatrix")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md
index 3d6b0472af2c7a..bf236313718364 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.md
@@ -2,70 +2,70 @@
 title: CanvasRenderingContext2D.arc()
 slug: Web/API/CanvasRenderingContext2D/arc
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

+**`CanvasRenderingContext2D.arc()`** 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 _(x, y)_ 位置，半径为 _r_ ，根据*anticlockwise* （默认为顺时针）指定的方向从 _startAngle_ 开始绘制，到 _endAngle_ 结束。
 
-
语法

+## 语法
 
-
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-

+```
+void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+```
 
-
Parameters

+### Parameters
 
-

- 
x

- 
圆弧中心（圆心）的 x 轴坐标。

- 
y

- 
圆弧中心（圆心）的 y 轴坐标。

- 
radius

- 
圆弧的半径。

- 
startAngle

- 
圆弧的起始点，x 轴方向开始计算，单位以弧度表示。

- 
endAngle

- 
圆弧的终点， 单位以弧度表示。

- 
anticlockwise {{optional_inline}}

- 
可选的{{jsxref("Boolean")}}值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。 

-

+- `x`
+  - : 圆弧中心（圆心）的 x 轴坐标。
+- `y`
+  - : 圆弧中心（圆心）的 y 轴坐标。
+- `radius`
+  - : 圆弧的半径。
+- `startAngle`
+  - : 圆弧的起始点，x 轴方向开始计算，单位以弧度表示。
+- `endAngle`
+  - : 圆弧的终点， 单位以弧度表示。
+- `anticlockwise` {{optional_inline}}
+  - : 可选的{{jsxref("Boolean")}}值 ，如果为 `true`，逆时针绘制圆弧，反之，顺时针绘制。
 
-
示例

+## 示例
 
-
使用 arc 方法

+### 使用 `arc` 方法
 
-
这是一段绘制圆的简单的代码片段。

+这是一段绘制圆的简单的代码片段。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.arc(75, 75, 50, 0, 2 * Math.PI);
 ctx.stroke();
-

+```
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
-
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}

+```
 
-
不同的形状演示

+{{ EmbedLiveSample('Playable_code', 700, 360) }}
 
-
在此例中，使用 arc() 尽可能地绘制不同的形状。

+### 不同的形状演示
 
-
-
-
var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 // Draw shapes
-for (i=0;i<4;i++){
-  for(j=0;j<3;j++){
+for (i=0;i<4;i++){
+  for(j=0;j<3;j++){
     ctx.beginPath();
     var x          = 25+j*50;               // x coordinate
     var y          = 25+i*50;               // y coordinate
@@ -122,26 +117,25 @@ for (i=0;i<4;i++){
 
     ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
 
-    if (i>1){
+    if (i>1){
       ctx.fill();
     } else {
       ctx.stroke();
     }
   }
-}

+}
+```
 
-
{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}

+{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasRenderingContext2D.arc")}}
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
index b6556e1a44134e..84b72ee406aec5 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.md
@@ -2,44 +2,45 @@
 title: CanvasRenderingContext2D.arcTo()
 slug: Web/API/CanvasRenderingContext2D/arcTo
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.arcTo() 是 Canvas 2D API 根据控制点和半径绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。

+**`CanvasRenderingContext2D.arcTo()`** 是 Canvas 2D API 根据控制点和半径绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的**切线**，画出两条切线之间的弧线路径。
 
-
语法

+## 语法
 
-
void ctx.arcTo(x1, y1, x2, y2, radius);
-

+```
+void ctx.arcTo(x1, y1, x2, y2, radius);
+```
 
-
Parameters

+### Parameters
 
-

- 
x1

- 
第一个控制点的 x 轴坐标。

- 
y1

- 
第一个控制点的 y 轴坐标。

- 
x2

- 
第二个控制点的 x 轴坐标。

- 
y2

- 
第二个控制点的 y 轴坐标。

- 
radius

- 
圆弧的半径。

-

+- `x1`
+  - : 第一个控制点的 x 轴坐标。
+- `y1`
+  - : 第一个控制点的 y 轴坐标。
+- `x2`
+  - : 第二个控制点的 x 轴坐标。
+- `y2`
+  - : 第二个控制点的 y 轴坐标。
+- `radius`
+  - : 圆弧的半径。
 
-
示例

+## 示例
 
-
使用 arcTo 方法

+### 使用 `arcTo` 方法
 
-
这是一段绘制圆弧的简单的代码片段。基础点是蓝色的，两个控制点是红色的。

+这是一段绘制圆弧的简单的代码片段。基础点是蓝色的，两个控制点是红色的。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.setLineDash([])
@@ -66,21 +67,21 @@ ctx.stroke();
 ctx.beginPath();
 ctx.arc(120,38,30,0,2*Math.PI);
 ctx.stroke();
-

+```
 
-
{{ EmbedLiveSample('Using_the_arc_method', 315, 165) }}

+{{ EmbedLiveSample('Using_the_arc_method', 315, 165) }}
 
-
尝试 arcTo 参数

+### 尝试 `arcTo` 参数
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
+```
 
-
{{ EmbedLiveSample('Trying_the_arcTo_parameters', 700, 360) }}

+{{ EmbedLiveSample('Trying_the_arcTo_parameters', 700, 360) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasRenderingContext2D.arcTo")}}
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md
index 93f06e2fe32ea4..981ad8279d282b 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.md
@@ -2,29 +2,32 @@
 title: CanvasRenderingContext2D.beginPath()
 slug: Web/API/CanvasRenderingContext2D/beginPath
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。

+**`CanvasRenderingContext2D.beginPath()`** 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
 
-
语法

+## 语法
 
-
void ctx.beginPath();
-

+```
+void ctx.beginPath();
+```
 
-
示例

+## 示例
 
-
使用 beginPath 方法

+### 使用 `beginPath` 方法
 
-
这是一段受用 beginPath 方法的简单的代码片段。

+这是一段受用 `beginPath` 方法的简单的代码片段。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 // First path
@@ -40,19 +43,17 @@ ctx.strokeStyle = 'green';
 ctx.moveTo(20,20);
 ctx.lineTo(120,120);
 ctx.stroke();
-

+```
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
+```
 
-
{{ EmbedLiveSample('Playable_code', 700, 460) }}

+{{ EmbedLiveSample('Playable_code', 700, 460) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasRenderingContext2D.beginPath")}}
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • 
- 
  • {{domxref("CanvasRenderingContext2D.closePath()")}}
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.closePath()")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
index e4dd239c1f489b..dc4e5c65bcfc82 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.md
@@ -2,46 +2,47 @@
 title: CanvasRenderingContext2D.bezierCurveTo()
 slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.bezierCurveTo() 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。

+**`CanvasRenderingContext2D.bezierCurveTo()`** 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 `moveTo()` 进行修改。
 
-
语法

+## 语法
 
-
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-

+```
+void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+```
 
-
参数

+### 参数
 
-

- 
cp1x

- 
第一个控制点的 x 轴坐标。

- 
cp1y

- 
第一个控制点的 y 轴坐标。

- 
cp2x

- 
第二个控制点的 x 轴坐标。

- 
cp2y

- 
第二个控制点的 y 轴坐标。

- 
x

- 
结束点的 x 轴坐标。

- 
y

- 
结束点的 y 轴坐标。

-

+- `cp1x`
+  - : 第一个控制点的 x 轴坐标。
+- `cp1y`
+  - : 第一个控制点的 y 轴坐标。
+- `cp2x`
+  - : 第二个控制点的 x 轴坐标。
+- `cp2y`
+  - : 第二个控制点的 y 轴坐标。
+- `x`
+  - : 结束点的 x 轴坐标。
+- `y`
+  - : 结束点的 y 轴坐标。
 
-
示例

+## 示例
 
-
使用 bezierCurveTo 方法

+### 使用 `bezierCurveTo` 方法
 
-
这是一段绘制贝赛尔曲线的简单的代码片段。  控制点是红色的， 开始和结束点是蓝色的。

+这是一段绘制贝赛尔曲线的简单的代码片段。 控制点是红色的， 开始和结束点是蓝色的。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
@@ -59,27 +60,29 @@ ctx.fillStyle = 'red';
 // control point one
 ctx.fillRect(230, 30, 10, 10);
 // control point two
-ctx.fillRect(150, 70, 10, 10);

+ctx.fillRect(150, 70, 10, 10);
+```
 
-
{{ EmbedLiveSample('使用_bezierCurveTo_方法', 315, 165) }}

+{{ EmbedLiveSample('使用_bezierCurveTo_方法', 315, 165) }}
 
-
尝试 bezierCurveTo 参数

+### 尝试 `bezierCurveTo` 参数
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
+```
 
-
{{ EmbedLiveSample('尝试_bezierCurveTo_参数', 700, 360) }}

+{{ EmbedLiveSample('尝试_bezierCurveTo_参数', 700, 360) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasRenderingContext2D.bezierCurveTo")}}
 
-
参见

+## 参见
 
-
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- [维基百科关于贝赛尔曲线](http://en.wikipedia.org/wiki/B%C3%A9zier_curve)。
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
index 1c0d4e163b900a..4930baaf42e58f 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clearrect/index.md
@@ -2,58 +2,59 @@
 title: CanvasRenderingContext2D.clearRect()
 slug: Web/API/CanvasRenderingContext2D/clearRect
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.clearRect()是 Canvas 2D API 的方法，这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。

+**`CanvasRenderingContext2D.clearRect()`**是 Canvas 2D API 的方法，这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。
 
-

-
注意： 如果没有依照 绘制路径 的步骤，使用 clearRect() 会导致意想之外的结果。请确保在调用 clearRect()之后绘制新内容前调用{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 。

-

+> **备注：** 如果没有依照 [绘制路径](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#%E7%BB%98%E5%88%B6%E8%B7%AF%E5%BE%84) 的步骤，使用 `clearRect()` 会导致意想之外的结果。请确保在调用 `clearRect()`之后绘制新内容前调用{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 。
 
-
语法

+## 语法
 
-
void ctx.clearRect(x, y, width, height);
-

+```
+void ctx.clearRect(x, y, width, height);
+```
 
-
 clearRect() 方法在一个矩形区域内设置所有像素都是透明的 (rgba(0,0,0,0))。这个矩形范围的左上角在 (x, y)，宽度和高度分别由 width 和height确定。

+`clearRect()` 方法在一个矩形区域内设置所有像素都是透明的 (`rgba(0,0,0,0)`)。这个矩形范围的左上角在 `(x, y)`，宽度和高度分别由 `width` 和`height`确定。
 
-
参数

+### 参数
 
-

- 
x

- 
矩形起点的 x 轴坐标。

- 
y

- 
矩形起点的 y 轴坐标。

- 
width

- 
矩形的宽度。

- 
height

- 
矩形的高度。

-

+- `x`
+  - : 矩形起点的 x 轴坐标。
+- `y`
+  - : 矩形起点的 y 轴坐标。
+- `width`
+  - : 矩形的宽度。
+- `height`
+  - : 矩形的高度。
 
-
示例

+## 示例
 
-
清除整个画布

+### 清除整个画布
 
-
这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 {{HtmlElement("canvas")}} 元素。

+这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 {{HtmlElement("canvas")}} 元素。
 
-
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
-ctx.clearRect(0, 0, canvas.width, canvas.height);

+ctx.clearRect(0, 0, canvas.width, canvas.height);
+```
 
-
清除一部分画布

+### 清除一部分画布
 
-
这仅是一段简单地使用 clearRect 方法的代码片段。

+这仅是一段简单地使用 `clearRect` 方法的代码片段。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
下面代码中被清除的区域是一个矩形，它的左上点坐标在 (10, 10)，宽度和高度分别是 120 和 100 像素。

+下面代码中被清除的区域是一个矩形，它的左上点坐标在 (10, 10)，宽度和高度分别是 120 和 100 像素。
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 // 绘制黄色背景
@@ -71,26 +72,23 @@ ctx.closePath();
 ctx.fill();
 
 // 清除一部分画布
-ctx.clearRect(10, 10, 120, 100);

+ctx.clearRect(10, 10, 120, 100);
+```
 
-
结果

+#### 结果
 
-
{{EmbedLiveSample('Erasing_part_of_a_canvas', 700, 180)}}

+{{EmbedLiveSample('Erasing_part_of_a_canvas', 700, 180)}}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
+{{Compat("api.CanvasRenderingContext2D.clearRect")}}
 
+## 参见
 
-
{{Compat("api.CanvasRenderingContext2D.clearRect")}}

-
-
参见

-
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • 
- 
  • {{domxref("CanvasRenderingContext2D.fillRect()")}}
    • 
- 
  • {{domxref("CanvasRenderingContext2D.strokeRect()")}}
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.fillRect()")}}
+- {{domxref("CanvasRenderingContext2D.strokeRect()")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
index 22ef4f9027c0fe..c57d43596664ec 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.md
@@ -2,48 +2,49 @@
 title: CanvasRenderingContext2D.clip()
 slug: Web/API/CanvasRenderingContext2D/clip
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.clip() 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。

+**`CanvasRenderingContext2D.clip()`** 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。
 
-
语法

+## 语法
 
-
void ctx.clip();
-void ctx.clip(fillRule);
-void ctx.clip(path, fillRule);
-

+```
+void ctx.clip();
+void ctx.clip(fillRule);
+void ctx.clip(path, fillRule);
+```
 
-
参数

+### 参数
 
-

+![](canvas_clipping_path.png)
 
-

- 
fillRule

- 
这个算法判断一个点是在路径内还是在路径外。

- 允许的值：
- 
- 

- 
path

- 
需要剪切的 {{domxref("Path2D")}} 路径。

-

+- `fillRule`
 
-
示例

+  - : 这个算法判断一个点是在路径内还是在路径外。
+    允许的值：
 
-
使用 clip 方法

+    - **`"nonzero`**": [非零环绕原则](http://en.wikipedia.org/wiki/Nonzero-rule)，默认的原则。
+    - **`"evenodd"`**: [奇偶环绕原则](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule)。
 
-
这是一段简单的代码片段，使用 clip 方法创建剪切区域。

+- `path`
+  - : 需要剪切的 {{domxref("Path2D")}} 路径。
 
-
HTML

+## 示例
 
-
<canvas id="canvas"></canvas>
-

+### 使用 `clip` 方法
 
-
JavaScript

+这是一段简单的代码片段，使用 `clip` 方法创建剪切区域。
 
-
var canvas = document.getElementById("canvas");
+#### HTML
+
+```html
+
+```
+
+#### JavaScript
+
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 // Create clipping region
@@ -51,25 +52,24 @@ ctx.arc(100, 100, 75, 0, Math.PI*2, false);
 ctx.clip();
 
 ctx.fillRect(0, 0, 100,100);
-

+```
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
+```
 
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasRenderingContext2D.clip")}}
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md
index b1ade0b0c4a187..edc28d9b68b407 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md
@@ -2,29 +2,32 @@
 title: CanvasRenderingContext2D.closePath()
 slug: Web/API/CanvasRenderingContext2D/closePath
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.closePath() 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。

+**`CanvasRenderingContext2D.closePath()`** 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。
 
-
语法

+## 语法
 
-
void ctx.closePath();
-

+```
+void ctx.closePath();
+```
 
-
示例

+## 示例
 
-
使用 closePath 方法

+### 使用 `closePath` 方法
 
-
这是一段使用 closePath 方法的简单的代码片段。

+这是一段使用 `closePath` 方法的简单的代码片段。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
@@ -33,28 +36,27 @@ ctx.lineTo(200,20);
 ctx.lineTo(120,120);
 ctx.closePath(); // draws last line of the triangle
 ctx.stroke();
-

+```
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
+```
 
-
{{ EmbedLiveSample('Playable_code', 700, 400) }}

+{{ EmbedLiveSample('Playable_code', 700, 400) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasRenderingContext2D.closePath")}}
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • 
- 
  • {{domxref("CanvasRenderingContext2D.beginPath()")}}
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.beginPath()")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.md
index b94c4687043722..546ae24bb8987e 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.md
@@ -2,55 +2,54 @@
 title: CanvasRenderingContext2D.createLinearGradient()
 slug: Web/API/CanvasRenderingContext2D/createLinearGradient
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。

+**`CanvasRenderingContext2D.createLinearGradient()`**方法创建一个沿参数坐标指定的直线的渐变。
 
-

+![](mdn-canvas-lineargradient.png)
 
-
该方法返回一个线性 {{domxref("CanvasGradient")}}对象。想要应用这个渐变，需要把这个返回值赋值给 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 或者 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}。

+该方法返回一个线性 {{domxref("CanvasGradient")}}对象。想要应用这个渐变，需要把这个返回值赋值给 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 或者 {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}。
 
-
语法

+## 语法
 
-
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
-

+```
+CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
+```
 
-
createLinearGradient() 方法需要指定四个参数，分别表示渐变线段的开始和结束点。

+`createLinearGradient()` 方法需要指定四个参数，分别表示渐变线段的开始和结束点。
 
-
参数

+### 参数
 
-

- 
x0

- 
起点的 x 轴坐标。

- 
y0

- 
起点的 y 轴坐标。

- 
x1

- 
终点的 x 轴坐标。

- 
y1

- 
终点的 y 轴坐标。

-

+- `x0`
+  - : 起点的 x 轴坐标。
+- `y0`
+  - : 起点的 y 轴坐标。
+- `x1`
+  - : 终点的 x 轴坐标。
+- `y1`
+  - : 终点的 y 轴坐标。
 
-
返回值

+### 返回值
 
-

- 
{{domxref("CanvasGradient")}}

- 
一个根据指定线路初始化的线性 CanvasGradient 对象。

-

+- {{domxref("CanvasGradient")}}
+  - : 一个根据指定线路初始化的线性` ``CanvasGradient` 对象。
 
-
示例

+## 示例
 
-
使用线性渐变填充一个矩形

+### 使用线性渐变填充一个矩形
 
-
这个例子使用createLinearGradient() 方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。

+这个例子使用`createLinearGradient()` 方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById('canvas');
+```
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 // Create a linear gradient
@@ -65,27 +64,27 @@ gradient.addColorStop(1, 'green');
 
 // Set the fill style and draw a rectangle
 ctx.fillStyle = gradient;
-ctx.fillRect(20, 20, 200, 100);

+ctx.fillRect(20, 20, 200, 100);
+```
 
-
结果

+#### 结果
 
-
+```
 
-
{{ EmbedLiveSample('Filling_a_rectangle_with_a_linear_gradient', 700, 180) }}

+{{ EmbedLiveSample('Filling_a_rectangle_with_a_linear_gradient', 700, 180) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

-
-
-
-
{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

-
-
+## 浏览器兼容性
 
-
Gecko 特性说明

+{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}
 
-
    
- 
  • 自 Gecko 2.0 {{geckoRelease("2.0")}}开始，参数指定了极值会抛出NOT_SUPPORTED_ERR  而不再是之前的 SYNTAX_ERR 异常。
    • 
-

+### Gecko 特性说明
 
-


- 参见

+- 自 Gecko 2.0 {{geckoRelease("2.0")}}开始，参数指定了极值会抛出`NOT_SUPPORTED_ERR` 而不再是之前的 `SYNTAX_ERR `异常。
 
-

+## 
参见
 
-
    
- 
  • 接口定义： {{domxref("CanvasRenderingContext2D")}}
    • 
- 
  • {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
    • 
-

+- 接口定义： {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
index f25a8cb2aa7b83..f64eee1437e1b2 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createpattern/index.md
@@ -2,62 +2,62 @@
 title: CanvasRenderingContext2D.createPattern()
 slug: Web/API/CanvasRenderingContext2D/createPattern
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.createPattern() 是 Canvas 2D API 使用指定的图像 ({{domxref("CanvasImageSource")}}) 创建模式的方法。它通过 repetition 参数在指定的方向上重复元图像。此方法返回一个{{domxref("CanvasPattern")}}对象。

+**`CanvasRenderingContext2D.createPattern()`** 是 Canvas 2D API 使用指定的图像 ({{domxref("CanvasImageSource")}}) 创建模式的方法。它通过 repetition 参数在指定的方向上重复元图像。此方法返回一个{{domxref("CanvasPattern")}}对象。
 
-
语法

+## 语法
 
-
CanvasPattern ctx.createPattern(image, repetition);
-

+```
+CanvasPattern ctx.createPattern(image, repetition);
+```
 
-
参数

+### 参数
 
-

- 
image

- 
作为重复图像源的 {{domxref("CanvasImageSource")}} 对象。可以是下列之一：
- 
    
-  
  • {{domxref("HTMLImageElement")}} ({{HTMLElement("img")}}),
    • 
-  
  • {{domxref("HTMLVideoElement")}} ({{HTMLElement("video")}}),
    • 
-  
  • {{domxref("HTMLCanvasElement")}} ({{HTMLElement("canvas")}}),
    • 
-  
  • {{domxref("CanvasRenderingContext2D")}},
    • 
-  
  • {{domxref("ImageBitmap")}},
    • 
-  
  • {{domxref("ImageData")}},
    • 
-  
  • {{domxref("Blob")}}.
    • 
- 

- 

- 
repetition

- 
{{domxref("DOMString")}}，指定如何重复图像。允许的值有：
- 
    
-  
  • "repeat" (both directions),
    • 
-  
  • "repeat-x" (horizontal only),
    • 
-  
  • "repeat-y" (vertical only), 
    • 
-  
  • "no-repeat" (neither).
    • 
- 

- 如果为空字符串 ('') 或 {{jsxref("null")}} (但不是 {{jsxref("undefined")}})，repetition 将被当作"repeat"。

-

+- `image`
 
-
返回值

+  - : 作为重复图像源的 {{domxref("CanvasImageSource")}} 对象。可以是下列之一：
 
-

- 
{{domxref("CanvasPattern")}}

- 
描述模式的不透明对象

-

+    - {{domxref("HTMLImageElement")}} ({{HTMLElement("img")}}),
+    - {{domxref("HTMLVideoElement")}} ({{HTMLElement("video")}}),
+    - {{domxref("HTMLCanvasElement")}} ({{HTMLElement("canvas")}}),
+    - {{domxref("CanvasRenderingContext2D")}},
+    - {{domxref("ImageBitmap")}},
+    - {{domxref("ImageData")}},
+    - {{domxref("Blob")}}.
 
-
示例

+- `repetition`
 
-
使用createPattern方法

+  - : {{domxref("DOMString")}}，指定如何重复图像。允许的值有：
 
-
这是一段简单的代码片段，使用 createPattern 方法创建一个指定图像和重复的{{domxref("CanvasPattern")}} 对象。创建完成后，可以使用{{domxref("CanvasPattern.setTransform()")}}方法对图案进行变形。如示例所示，你可以把此模式赋值给当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，当你使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果。

+    - `"repeat"` (both directions),
+    - `"repeat-x"` (horizontal only),
+    - `"repeat-y"` (vertical only),
+    - `"no-repeat"` (neither).
 
-
HTML

+    如果为空字符串 (`''`) 或 {{jsxref("null")}} (但不是 {{jsxref("undefined")}})，repetition 将被当作"repeat"。
 
-
<canvas id="canvas"></canvas>
-

+### 返回值
 
-
JavaScript

+- {{domxref("CanvasPattern")}}
+  - : 描述模式的不透明对象
 
-
var canvas = document.getElementById("canvas");
+## 示例
+
+### 使用`createPattern`方法
+
+这是一段简单的代码片段，使用 createPattern 方法创建一个指定图像和重复的{{domxref("CanvasPattern")}} 对象。创建完成后，可以使用{{domxref("CanvasPattern.setTransform()")}}方法对图案进行变形。如示例所示，你可以把此模式赋值给当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}，当你使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果。
+
+#### HTML
+
+```html
+
+```
+
+#### JavaScript
+
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 var img = new Image();
@@ -67,29 +67,28 @@ img.onload = function() {
   ctx.fillStyle = pattern;
   ctx.fillRect(0,0,400,400);
 };
-

-
-
编辑以下代码并在线查看 canvas 变化：

+```
 
-
+```
 
-
{{ EmbedLiveSample('Playable_code', 700, 380) }}

+{{ EmbedLiveSample('Playable_code', 700, 380) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.CanvasRenderingContext2D.createPattern")}}
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • 
- 
  • {{domxref("CanvasPattern")}}
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasPattern")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.md
index 9673627f23d51c..3bd91208c27da1 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.md
@@ -2,53 +2,52 @@
 title: CanvasRenderingContext2D.createRadialGradient()
 slug: Web/API/CanvasRenderingContext2D/createRadialGradient
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.createRadialGradient() 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 {{domxref("CanvasGradient")}}。

+**`CanvasRenderingContext2D.createRadialGradient()`** 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 {{domxref("CanvasGradient")}}。
 
-
语法

+## 语法
 
-
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
-

+```
+CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
+```
 
-
参数

+### 参数
 
-

- 
x0

- 
开始圆形的 x 轴坐标。

- 
y0

- 
开始圆形的 y 轴坐标。

- 
r0

- 
开始圆形的半径。

- 
x1

- 
结束圆形的 x 轴坐标。

- 
y1

- 
结束圆形的 y 轴坐标。

- 
r1

- 
结束圆形的半径。

-

+- `x0`
+  - : 开始圆形的 x 轴坐标。
+- `y0`
+  - : 开始圆形的 y 轴坐标。
+- r0
+  - : 开始圆形的半径。
+- `x1`
+  - : 结束圆形的 x 轴坐标。
+- `y1`
+  - : 结束圆形的 y 轴坐标。
+- r1
+  - : 结束圆形的半径。
 
-
返回值

+### 返回值
 
-

- 
{{domxref("CanvasGradient")}}

- 
由两个指定的圆初始化的放射性 CanvasGradient 对象。

-

+- {{domxref("CanvasGradient")}}
+  - : 由两个指定的圆初始化的放射性 `CanvasGradient` 对象。
 
-
示例

+## 示例
 
-
使用 createRadialGradient 方法

+### 使用 `createRadialGradient` 方法
 
-
这是一段简单的代码片段，使用 createRadialGradient 方法创建一个指定了开始和结束圆的 {{domxref("CanvasGradient")}} 对象。 一旦创建，你可以使用 {{domxref("CanvasGradient.addColorStop()")}} 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}设置成此渐变，当使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果， 如示例所示。

+这是一段简单的代码片段，使用 `createRadialGradient` 方法创建一个指定了开始和结束圆的 {{domxref("CanvasGradient")}} 对象。 一旦创建，你可以使用 {{domxref("CanvasGradient.addColorStop()")}} 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}设置成此渐变，当使用{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时，会在 canvas 上绘制出效果， 如示例所示。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>
-

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 var gradient = ctx.createRadialGradient(100,100,100,100,100,0);
@@ -56,27 +55,26 @@ gradient.addColorStop(0,"white");
 gradient.addColorStop(1,"green");
 ctx.fillStyle = gradient;
 ctx.fillRect(0,0,200,200);
-

+```
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
+```
 
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

-
-
{{Compat("api.CanvasRenderingContext2D.createRadialGradient")}}

+## 浏览器兼容性
 
-

+{{Compat("api.CanvasRenderingContext2D.createRadialGradient")}}
 
-
Gecko-specific 注解

+### Gecko-specific 注解
 
-
    
- 
  • 从 Gecko 2.0 {{geckoRelease("2.0")}}开始， 指定非限制的值会抛出 NOT_SUPPORTED_ERR ，用来替代 SYNTAX_ERR。
    • 
- 
  • 从 Gecko 5.0 {{geckoRelease("5.0")}}开始，指定一个负的半径会抛出 INDEX_SIZE_ERR。
    • 
-

+- 从 Gecko 2.0 {{geckoRelease("2.0")}}开始， 指定非限制的值会抛出 `NOT_SUPPORTED_ERR` ，用来替代 `SYNTAX_ERR。`
+- 从 Gecko 5.0 {{geckoRelease("5.0")}}开始，指定一个负的半径会抛出 `INDEX_SIZE_ERR。`
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • 
- 
  • {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
index 8f6f22cb583025..57d26fda5b687c 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/direction/index.md
@@ -2,81 +2,79 @@
 title: CanvasRenderingContext2D.direction
 slug: Web/API/CanvasRenderingContext2D/direction
 ---
-
{{APIRef}} {{SeeCompatTable}}

+{{APIRef}} {{SeeCompatTable}}
 
-
CanvasRenderingContext2D.direction 是 Canvas 2D API 用来在绘制文本时，描述当前文本方向的属性。

+**`CanvasRenderingContext2D.direction`** 是 Canvas 2D API 用来在绘制文本时，描述当前文本方向的属性。
 
-
语法

+## 语法
 
-
ctx.direction = "ltr" || "rtl" || "inherit";
-

+```
+ctx.direction = "ltr" || "rtl" || "inherit";
+```
 
-
选项

+### 选项
 
-
有效值：

+有效值：
 
-

- 
ltr

- 
文本方向从左向右。

- 
rtl

- 
文本方向从右向左。

- 
inherit

- 
根据情况继承 {{HTMLElement("canvas")}} 元素或者 {{domxref("Document")}} 。

-

+- ltr
+  - : 文本方向从左向右。
+- rtl
+  - : 文本方向从右向左。
+- inherit
+  - : 根据情况继承 {{HTMLElement("canvas")}} 元素或者 {{domxref("Document")}} 。
 
-
默认值是inherit。

+默认值是`inherit。`
 
-
示例

+## 示例
 
-
使用direction 属性

+### 使用`direction` 属性
 
-
这是一段简单的代码片段，对文本设置不同的 direction 数值。

+这是一段简单的代码片段，对文本设置不同的 direction 数值。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas"></canvas>

+```html
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.font = '48px serif';
 ctx.fillText('Hi!', 150, 50);
 ctx.direction = 'rtl';
-ctx.fillText('Hi!', 150, 130);

+ctx.fillText('Hi!', 150, 130);
+```
 
+```html hidden
+
+```
 
-
-
+ctx.fillText('Hi!', 150, 130);
+```
 
-
结果

+#### 结果
 
-
{{ EmbedLiveSample('Playable_code', 700, 180) }}

+{{ EmbedLiveSample('Playable_code', 700, 180) }}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
-
{{Compat("api.CanvasRenderingContext2D.direction")}}

+{{Compat("api.CanvasRenderingContext2D.direction")}}
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
index 642c31b039a066..8f13c50aa3f4ad 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.md
@@ -2,41 +2,42 @@
 title: CanvasRenderingContext2D.drawFocusIfNeeded()
 slug: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
CanvasRenderingContext2D.drawFocusIfNeeded() 是 Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法，如果给定的元素获取了焦点。

+**`CanvasRenderingContext2D.drawFocusIfNeeded()`** 是 Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法，如果给定的元素获取了焦点。
 
-
语法

+## 语法
 
-
void ctx.drawFocusIfNeeded(element);
-void ctx.drawFocusIfNeeded(path, element);
-

+```
+void ctx.drawFocusIfNeeded(element);
+void ctx.drawFocusIfNeeded(path, element);
+```
 
-
参数

+### 参数
 
-

- 
element

- 
是否需要设置焦点的元素。

- 
path

- 
{{domxref("Path2D")}} 路径。

-

+- element
+  - : 是否需要设置焦点的元素。
+- `path`
+  - : {{domxref("Path2D")}} 路径。
 
-
示例

+## 示例
 
-
使用 drawFocusIfNeeded 方法

+### 使用 `drawFocusIfNeeded` 方法
 
-
这是一段使用 drawFocusIfNeeded 方法的简单的代码片段。

+这是一段使用 `drawFocusIfNeeded` 方法的简单的代码片段。
 
-
HTML

+#### HTML
 
-
<canvas id="canvas">
-  <input id="button" type="range" min="1" max="12">
-</canvas>
-

+```html
+
+  
+
+```
 
-
JavaScript

+#### JavaScript
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var button = document.getElementById("button");
 
@@ -45,27 +46,26 @@ button.focus();
 ctx.beginPath();
 ctx.rect(10, 10, 30, 30);
 ctx.drawFocusIfNeeded(button);
-

+```
 
-
修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化：
 
-
+```
 
-
{{EmbedLiveSample('Playable_code', 700, 360)}}

+{{EmbedLiveSample('Playable_code', 700, 360)}}
 
-
规范描述

+## 规范描述
 
 {{Specifications}}
 
-
浏览器兼容性

-
-
+## 浏览器兼容性
 
-
{{Compat("api.CanvasRenderingContext2D.drawFocusIfNeeded")}}

+{{Compat("api.CanvasRenderingContext2D.drawFocusIfNeeded")}}
 
-
兼容性注解

+### 兼容性注解
 
-
    
- 
  • [1] 在 Gecko 28 {{geckoRelease(28)}}中， 此方法通过 "drawSystemFocusRing" 实现， 但是在 Gecko 29 {{geckoRelease(29)}}中已经改名。
    • 
- 
  • [1] 在 Gecko 32 {{geckoRelease(32)}} 之前，此方法默认是无效的，受控于 flag "canvas.focusring.enabled"标识。
    • 
-

+- \[1] 在 Gecko 28 {{geckoRelease(28)}}中， 此方法通过 "`drawSystemFocusRing`" 实现， 但是在 Gecko 29 {{geckoRelease(29)}}中已经改名。
+- \[1] 在 Gecko 32 {{geckoRelease(32)}} 之前，此方法默认是无效的，受控于 flag "`canvas.focusring.enabled`"标识。
 
-
参见

+## 参见
 
-
    
- 
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • 
-

+- 接口定义， {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
index d9768bd6ddf4e2..6aebd256c7b957 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md
@@ -2,120 +2,111 @@
 title: CanvasRenderingContext2D.drawImage()
 slug: Web/API/CanvasRenderingContext2D/drawImage
 ---
-
{{APIRef}}

-
-
Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种方式在 Canvas 上绘制图像。

-
-
语法

-
-
void ctx.drawImage(image, dx, dy);
-void ctx.drawImage(image, dx, dy, dWidth, dHeight);
-void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-

-
-
drawImage

-
-
参数

-
-

- 
image

- 
绘制到上下文的元素。允许任何的 canvas 图像源 ({{domxref("CanvasImageSource")}})，例如：{{domxref("CSSImageValue")}}，{{domxref("HTMLImageElement")}}，{{domxref("SVGImageElement")}}，{{domxref("HTMLVideoElement")}}，{{domxref("HTMLCanvasElement")}}，{{domxref("ImageBitmap")}} 或者{{domxref("OffscreenCanvas")}}。

- 
sx{{optional_inline}}

- 
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。

- 
sy{{optional_inline}}

- 
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。

- 
sWidth{{optional_inline}}

- 
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。

- 
sHeight{{optional_inline}}

- 
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。

- 
dx

- 
image的左上角在目标 canvas 上 X 轴坐标。

- 
dy

- 
image的左上角在目标 canvas 上 Y 轴坐标。

- 
dWidth{{optional_inline}}

- 
image在目标 canvas 上绘制的宽度。允许对绘制的image进行缩放。如果不说明，在绘制时image宽度不会缩放。

- 
dHeight{{optional_inline}}

- 
image在目标 canvas 上绘制的高度。 允许对绘制的image进行缩放。如果不说明，在绘制时image高度不会缩放。

-

-
-
抛出异常

-
-

- 
INDEX_SIZE_ERR

- 
如果 canvas 或者图像矩形区域的宽度或高度为 0 。

- 
INVALID_STATE_ERR

- 
图像没有数据。

- 
TYPE_MISMATCH_ERR

- 
提供的原始元素不支持。

- 
NS_ERROR_NOT_AVAILABLE

- 
图像尚未加载。使用.complete === true和.onload确定何时准备就绪。

-

-
-
示例

-
-
使用 drawImage 方法

-
-
这是一段使用 drawImage 方法的简单的代码片段。

-
-
HTML

-
-
<canvas id="canvas"></canvas>
-  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
-       width="300" height="227">
-</div>
-

-
-
JavaScript

-
-
var canvas = document.getElementById("canvas");
+{{APIRef}}
+
+Canvas 2D API 中的 **`CanvasRenderingContext2D.drawImage()`** 方法提供了多种方式在 Canvas 上绘制图像。
+
+## 语法
+
+```
+void ctx.drawImage(image, dx, dy);
+void ctx.drawImage(image, dx, dy, dWidth, dHeight);
+void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+```
+
+![drawImage](canvas_drawimage.jpg)
+
+### 参数
+
+- `image`
+  - : 绘制到上下文的元素。允许任何的 canvas 图像源 ({{domxref("CanvasImageSource")}})，例如：{{domxref("CSSImageValue")}}，{{domxref("HTMLImageElement")}}，{{domxref("SVGImageElement")}}，{{domxref("HTMLVideoElement")}}，{{domxref("HTMLCanvasElement")}}，{{domxref("ImageBitmap")}} 或者{{domxref("OffscreenCanvas")}}。
+- `sx`{{optional_inline}}
+  - : 需要绘制到目标上下文中的，`image`的矩形（裁剪）选择框的左上角 X 轴坐标。
+- `sy`{{optional_inline}}
+  - : 需要绘制到目标上下文中的，`image`的矩形（裁剪）选择框的左上角 Y 轴坐标。
+- `sWidth`{{optional_inline}}
+  - : 需要绘制到目标上下文中的，`image`的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的`sx`和`sy`开始，到`image`的右下角结束。
+- `sHeight`{{optional_inline}}
+  - : 需要绘制到目标上下文中的，`image`的矩形（裁剪）选择框的高度。
+- `dx`
+  - : `image`的左上角在目标 canvas 上 X 轴坐标。
+- `dy`
+  - : `image`的左上角在目标 canvas 上 Y 轴坐标。
+- `dWidth`{{optional_inline}}
+  - : `image`在目标 canvas 上绘制的宽度。允许对绘制的`image`进行缩放。如果不说明，在绘制时`image`宽度不会缩放。
+- `dHeight`{{optional_inline}}
+  - : `image`在目标 canvas 上绘制的高度。 允许对绘制的`image`进行缩放。如果不说明，在绘制时`image`高度不会缩放。
+
+### 抛出异常
+
+- `INDEX_SIZE_ERR`
+  - : 如果 canvas 或者图像矩形区域的宽度或高度为 0 。
+- `INVALID_STATE_ERR`
+  - : 图像没有数据。
+- `TYPE_MISMATCH_ERR`
+  - : 提供的原始元素不支持。
+- `NS_ERROR_NOT_AVAILABLE`
+  - : 图像尚未加载。使用`.complete === true`和`.onload`确定何时准备就绪。
+
+## 示例
+
+### 使用 `drawImage` 方法
+
+这是一段使用 `drawImage` 方法的简单的代码片段。
+
+#### HTML
+
+```html
+
+  
+
+``` + +#### JavaScript + +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById('source'); ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); - - - +``` -
const canvas = document.getElementById('canvas');
+```js hidden
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 const image = document.getElementById('source');
 
-image.addEventListener('load', e => {
+image.addEventListener('load', e => {
   ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
 });
-
- +``` -

结果

+#### 结果 - +
+ + +
+ +``` -
var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var image = document.getElementById('source');
 var textarea = document.getElementById("code");
@@ -139,24 +130,26 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-
- +``` -

{{ EmbedLiveSample('Drawing_an_image_to_the_canvas', 700, 180) }}

+{{ EmbedLiveSample('Drawing_an_image_to_the_canvas', 700, 180) }} -

理解源元素大小

+### 理解源元素大小 -

drawImage()方法在绘制时使用源元素的 CSS 大小。

+`drawImage()`方法在绘制时使用源元素的 CSS 大小。 -

例如，如果加载图像并在其构造函数中指定可选的大小参数，则必须使用所创建实例的naturalWidth和naturalHeight属性来正确计算裁剪和缩放区域等内容，而不是element.width和element.height。如果元素是{{htmlelement("video")}} 元素，则videoWidth和videoHeight也是如此，依此类推。

+例如，如果加载图像并在其构造函数中指定可选的大小参数，则必须使用所创建实例的`naturalWidth`和`naturalHeight`属性来正确计算裁剪和缩放区域等内容，而不是`element.width`和`element.height`。如果元素是{{htmlelement("video")}} 元素，则`videoWidth`和`videoHeight`也是如此，依此类推。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
+```html + +``` -

JavaScript

+#### JavaScript -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 const image = new Image(60, 45); // Using optional size for image
@@ -178,20 +171,15 @@ function drawImageActualSize() {
   // using the element's width and height properties - lets draw one
   // on top in the corner:
   ctx.drawImage(this, 0, 0, this.width, this.height);
-}
-
- - +``` -

结果

+#### 结果 -

{{EmbedLiveSample('Understanding_source_element_size', 700, 260)}}

+{{EmbedLiveSample('Understanding_source_element_size', 700, 260)}} -

规范说明

+## 规范说明 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.drawImage")}}

+{{Compat("api.CanvasRenderingContext2D.drawImage")}} -

兼容性注解

+### 兼容性注解 -
    -
  • 在 Gecko 5.0 {{geckoRelease("5.0")}}中，支持通过给 sw 和 sh 赋负值，对图像进行翻转。
    • -
  • 从 {{geckoRelease("5.0")}} 开始，drawImage() 按照规范处理负参数，沿着合适的轴翻转矩形。
    • -
  • 从{{geckoRelease("5.0")}}开始，当 drawImage() 调用 null 或者 undefined 图像时，会抛出 TYPE_MISMATCH_ERR 异常。
    • -
  • 在 Gecko 7.0 {{ geckoRelease("7.0") }}之前， 如果坐标值是非规定值或者是 0，Firefox 会抛出一个异常。按照规范描述，这种情况不会再发生。
    • -
  • Gecko 9.0 {{ geckoRelease("9.0") }}现在完全支持 CORS 跨域绘制图像，不需要污染的 canvas.
    • -
  • Gecko 11.0 {{ geckoRelease("11.0") }} 现在允许 SVG 作为图像被绘制到 canvas，不需要 污染的 canvas.
    • -
+- 在 Gecko 5.0 {{geckoRelease("5.0")}}中，支持通过给 sw 和 sh 赋负值，对图像进行翻转。 +- 从 {{geckoRelease("5.0")}} 开始，`drawImage()` 按照规范处理负参数，沿着合适的轴翻转矩形。 +- 从{{geckoRelease("5.0")}}开始，当 drawImage() 调用 `null` 或者 `undefined` 图像时，会抛出 `TYPE_MISMATCH_ERR` 异常。 +- 在 Gecko 7.0 {{ geckoRelease("7.0") }}之前， 如果坐标值是非规定值或者是 0，Firefox 会抛出一个异常。按照规范描述，这种情况不会再发生。 +- Gecko 9.0 {{ geckoRelease("9.0") }}现在完全支持 CORS 跨域绘制图像，不需要[污染的 canvas](/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F). +- Gecko 11.0 {{ geckoRelease("11.0") }} 现在允许 SVG 作为图像被绘制到 canvas，不需要 [污染的 canvas](/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F). -

Notes

+## Notes -
    -
  • 当drawImage()需要在{{domxref("HTMLVideoElement")}}工作时，仅当{{domxref("HTMLMediaElement.readyState")}}大于 1 时drawImage()才能正常工作。
    • -
  • 在绘制，裁剪和/或缩放时，drawImage() 将始终使用 CSS 像素中源元素的固有尺寸。
    • -
  • drawImage()将忽略图像中的所有 EXIF 元数据，包括方向。此行为在 iOS 设备上尤其麻烦。您应该自己检测方向并使用rotate()使其正确。
    • -
+- 当`drawImage()`需要在{{domxref("HTMLVideoElement")}}工作时，仅当{{domxref("HTMLMediaElement.readyState")}}大于 1 时`drawImage()`才能正常工作。 +- 在绘制，裁剪和/或缩放时，`drawImage()` 将始终使用 CSS 像素中源元素的固有尺寸。 +- `drawImage()`将忽略图像中的所有 EXIF 元数据，包括方向。此行为在 iOS 设备上尤其麻烦。您应该自己检测方向并使用`rotate()`使其正确。 -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.md index 28246031695deb..651ae4f19b405f 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.md @@ -2,103 +2,74 @@ title: CanvasRenderingContext2D.drawWindow() slug: Web/API/CanvasRenderingContext2D/drawWindow --- -
{{APIRef}} {{deprecated_header}}
- -

CanvasRenderingContext2D.drawWindow() 是 Canvas 2D API 在 canvas 内部画布上渲染一个窗体区域的已弃用的非标准接口。 用来渲染窗口可视区的内容，忽略窗口的剪切和滚动。

- -

这个 API 不能在 Web 内容中应用。它是一个同步的 API，并且由于它不能对裂变的跨域 iframe （译者注：我也不知道这裂变是个啥），如果你的浏览器扩展中使用这一 API 的话，建议你改用 {{WebExtAPIRef('tabs.captureTab')}} 。如果你的代码是针对 chrome 的话，用来自父进程的 WindowGlobalParent.drawSnapshot 接口可能会更合适。

- -

语法

- -
void ctx.drawWindow(window, x, y, w, h, bgColor[, flags]);
- -

参数

- -
-
window
-
需要渲染的{{domxref("Window")}} 。
-
x
-
窗体的 X 坐标。
-
y
-
窗体的 Y 坐标。
-
w
-
窗体的宽度。
-
h
-
窗体的高度。
-
bgColor
-
{{domxref("DOMString")}}，描述当窗体渲染到 canvas 之前，进行填充的颜色。 颜色可以是透明/半透明。它被赋值为 CSS 颜色字符串（例如： rgb() 或者 rgba()）。
- 注意： -
    -
  • 如果"rgba(0,0,0,0)"用来当背景色，图像透明的地方窗体也是透明的。
    • -
  • 顶级的预览文档通常不会是透明的，因为用户的背景色偏好设置会被应用。但是{{HTMLElement("iframe", "iframes")}} 是透明的，如果页面没有设置背景。
    • -
  • 如果不透明的颜色做为背景色，渲染速度会更快，因为我们不需要计算窗体的透明度。
    • -
-
-
flags {{optional_inline}}
-
用来更好的控制 drawWindow 。Flags 可以使用或运算符进行连接。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
常量值描述
DRAWWINDOW_DRAW_CARET0x01绘制时，如果被占用，显示插入符。
DRAWWINDOW_DO_NOT_FLUSH0x02不要清空待定的布局通知，否则会被批量挂起。
DRAWWINDOW_DRAW_VIEW0x04绘制滚动条，并滚动当前的视口。
DRAWWINDOW_USE_WIDGET_LAYERS0x08使用小部件层进行有效的管理。这意味着可以使用硬件加速，但是实际上会变慢，并且降低品质。不管怎样，它都会更准确地反映已经渲染到屏幕上的像素。
DRAWWINDOW_ASYNC_DECODE_IMAGES0x10不需要同步解码图像 - 绘制我们已经有的。
-
-
- -

示例

- -

这个方法在 canvas 中绘制了一个 DOM 窗口的内容快照。例子：

- -
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
-
- -

以像素为单位，相对可视区左上角的矩形框内，使用白色作为背景色，在 canvas 中绘制当前窗口的内容。如果指定"rgba(255,255,255,0)" 作为颜色，则内容的背景色是透明的（造成绘制速度变慢）。

- -

使用纯白色"rgb(255,255,255)"或者透明颜色之外的任何背景，都不是一个好的主意。就像所有浏览器要做的，多数网站期望他们界面透明的部分绘制到白色背景上。

- -

使用这个方法，可以使用任意内容填充隐藏的 IFRAME（例如：CSS-styled HTML text 或者 SVG）并绘制到 canvas 中。为了适应当前的变形，它会缩放、旋转。

- -

Ted Mielczarek 的 标签预览 扩展使用这种技术，在 chrome 中提供网页的缩略图。源代码可以作为参考。

- -

规范描述

- -

目前的规范或者草案不包含此章节。这是一个不标准的、仅供内部使用的 API。

- -

浏览器兼容性

- -

{{Compat("api.CanvasRenderingContext2D.drawWindow")}}
- 参见

- -
- -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
+{{APIRef}} {{deprecated_header}} + +**`CanvasRenderingContext2D.drawWindow()`** 是 Canvas 2D API 在 `canvas `内部画布上渲染一个窗体区域的已弃用的非标准接口。 用来渲染窗口可视区的内容，忽略窗口的剪切和滚动。 + +这个 API 不能在 Web 内容中应用。它是一个同步的 API，并且由于它不能对裂变的跨域 `iframe` （译者注：我也不知道这裂变是个啥），如果你的浏览器扩展中使用这一 API 的话，建议你改用 {{WebExtAPIRef('tabs.captureTab')}} 。如果你的代码是针对 chrome 的话，用来自父进程的 [WindowGlobalParent.drawSnapshot](https://searchfox.org/mozilla-central/rev/9b282b34b5/dom/chrome-webidl/WindowGlobalActors.webidl#81-98) 接口可能会更合适。 + +## 语法 + +``` +void ctx.drawWindow(window, x, y, w, h, bgColor[, flags]); +``` + +### 参数 + +- `window` + - : 需要渲染的{{domxref("Window")}} 。 +- x + - : 窗体的 X 坐标。 +- y + - : 窗体的 Y 坐标。 +- w + - : 窗体的宽度。 +- h + - : 窗体的高度。 +- `bgColor` + + - : {{domxref("DOMString")}}，描述当窗体渲染到 canvas 之前，进行填充的颜色。 颜色可以是透明/半透明。它被赋值为 CSS 颜色字符串（例如： `rgb()` 或者 `rgba()）。` + 注意： + + - 如果"`rgba(0,0,0,0)`"用来当背景色，图像透明的地方窗体也是透明的。 + - 顶级的预览文档通常不会是透明的，因为用户的背景色偏好设置会被应用。但是{{HTMLElement("iframe", "iframes")}} 是透明的，如果页面没有设置背景。 + - 如果不透明的颜色做为背景色，渲染速度会更快，因为我们不需要计算窗体的透明度。 + +- flags {{optional_inline}} + + - : 用来更好的控制 `drawWindow` 。Flags 可以使用或运算符进行连接。 + + | 常量 | 值 | 描述 | + | -------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ | + | `DRAWWINDOW_DRAW_CARET` | `0x01` | 绘制时，如果被占用，显示插入符。 | + | `DRAWWINDOW_DO_NOT_FLUSH` | `0x02` | 不要清空待定的布局通知，否则会被批量挂起。 | + | `DRAWWINDOW_DRAW_VIEW` | `0x04` | 绘制滚动条，并滚动当前的视口。 | + | `DRAWWINDOW_USE_WIDGET_LAYERS` | `0x08` | 使用小部件层进行有效的管理。这意味着可以使用硬件加速，但是实际上会变慢，并且降低品质。不管怎样，它都会更准确地反映已经渲染到屏幕上的像素。 | + | `DRAWWINDOW_ASYNC_DECODE_IMAGES` | `0x10` | 不需要同步解码图像 - 绘制我们已经有的。 | + +## 示例 + +这个方法在 canvas 中绘制了一个 DOM 窗口的内容快照。例子： + +```js +ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); +``` + +以像素为单位，相对可视区左上角的矩形框内，使用白色作为背景色，在 canvas 中绘制当前窗口的内容。如果指定"`rgba(255,255,255,0)`" 作为颜色，则内容的背景色是透明的（造成绘制速度变慢）。 + +使用纯白色"`rgb(255,255,255)`"或者透明颜色之外的任何背景，都不是一个好的主意。就像所有浏览器要做的，多数网站期望他们界面透明的部分绘制到白色背景上。 + +使用这个方法，可以使用任意内容填充隐藏的 IFRAME（例如：CSS-styled HTML text 或者 SVG）并绘制到 canvas 中。为了适应当前的变形，它会缩放、旋转。 + +Ted Mielczarek 的 [标签预览](http://ted.mielczarek.org/code/mozilla/tabpreview/) 扩展使用这种技术，在 chrome 中提供网页的缩略图。源代码可以作为参考。 + +## 规范描述 + +目前的规范或者草案不包含此章节。这是一个不标准的、仅供内部使用的 API。 + +## 浏览器兼容性 + +{{Compat("api.CanvasRenderingContext2D.drawWindow")}} +参见 + +- 接口定义， {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md index 3c4e792f919991..ec59ffc6cb3069 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -2,50 +2,51 @@ title: CanvasRenderingContext2D.ellipse() slug: Web/API/CanvasRenderingContext2D/ellipse --- -
{{APIRef}} {{SeeCompatTable}}
+{{APIRef}} {{SeeCompatTable}} -

CanvasRenderingContext2D.ellipse() 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY ，按照anticlockwise（默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。

+**`CanvasRenderingContext2D.ellipse()`** 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是*radiusX* 和 _radiusY_ ，按照*anticlockwise*（默认顺时针）指定的方向，从 _startAngle_ 开始绘制，到 _endAngle_ 结束。 -

语法

+## 语法 -
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
-
+``` +void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); +``` -

参数

+### 参数 -
-
x
-
椭圆圆心的 x 轴坐标。
-
y
-
椭圆圆心的 y 轴坐标。
-
radiusX
-
椭圆长轴的半径。
-
radiusY
-
椭圆短轴的半径。
-
rotation
-
椭圆的旋转角度，以弧度表示 (非角度度数)。
-
startAngle
-
将要绘制的起始点角度，从 x 轴测量，以弧度表示 (非角度度数)。
-
endAngle
-
椭圆将要绘制的结束点角度，以弧度表示 (非角度度数)。
-
anticlockwise {{optional_inline}}
-
{{jsxref("Boolean")}} 选项，如果为 true，逆时针方向绘制椭圆（逆时针），反之顺时针方向绘制。
-
+- `x` + - : 椭圆圆心的 x 轴坐标。 +- `y` + - : 椭圆圆心的 y 轴坐标。 +- `radius`X + - : 椭圆长轴的半径。 +- `radius`Y + - : 椭圆短轴的半径。 +- `rotation` + - : 椭圆的旋转角度，以弧度表示 (**非角度度数**)。 +- `startAngle` + - : 将要绘制的起始点角度，从 x 轴测量，以弧度表示 (**非角度度数**)。 +- `endAngle` + - : 椭圆将要绘制的结束点角度，以弧度表示 (**非角度度数**)。 +- `anticlockwise` {{optional_inline}} + - : {{jsxref("Boolean")}} 选项，如果为 `true`，逆时针方向绘制椭圆（逆时针），反之顺时针方向绘制。 -

示例

+## 示例 -

使用 ellipse 方法

+### 使用 `ellipse` 方法 -

这是一段绘制椭圆的简单的代码片段。

+这是一段绘制椭圆的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById('canvas');
+```
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.setLineDash([]);
 ctx.beginPath();
@@ -54,19 +55,18 @@ ctx.stroke();
 ctx.setLineDash([5]);
 ctx.moveTo(0,200);
 ctx.lineTo(200,0);
-ctx.stroke();
- -

修改下面的代码并在线查看 canvas 的变化（如果椭圆没有绘制，请在兼容性列表中检查你的浏览器是否支持）：

+ctx.stroke(); +``` - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.ellipse")}}

+{{Compat("api.CanvasRenderingContext2D.ellipse")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.md index cf65ac1f2e6e24..506d72d1577848 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.md @@ -2,67 +2,67 @@ title: CanvasRenderingContext2D.fill() slug: Web/API/CanvasRenderingContext2D/fill --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.fill() 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。

+**`CanvasRenderingContext2D.fill()`** 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。 -

语法

+## 语法 -
void ctx.fill();
-void ctx.fill(fillRule);
-void ctx.fill(path, fillRule);
-
+``` +void ctx.fill(); +void ctx.fill(fillRule); +void ctx.fill(path, fillRule); +``` -

参数

+### 参数 -
-
fillRule
-
一种算法，决定点是在路径内还是在路径外。
- 允许的值： - -
-
path
-
需要填充的{{domxref("Path2D")}} 路径。
-
+- `fillRule` -

示例

+ - : 一种算法，决定点是在路径内还是在路径外。 + 允许的值： -

使用 fill 方法

+ - **`"nonzero`**": [非零环绕规则](http://en.wikipedia.org/wiki/Nonzero-rule)， 默认的规则。 + - **`"evenodd"`**: [奇偶环绕规则](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule)。 -

这是一段简单的代码片段，使用 fill 方法填充路径。

+- `path` + - : 需要填充的{{domxref("Path2D")}} 路径。 -

HTML

+## 示例 -
<canvas id="canvas"></canvas>
-
+### 使用 `fill` 方法 -

JavaScript

+这是一段简单的代码片段，使用 `fill` 方法填充路径。 -
var canvas = document.getElementById("canvas");
+#### HTML
+
+```html
+
+```
+
+#### JavaScript
+
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 ctx.rect(10, 10, 100, 100);
 ctx.fill();
-
+``` -

修改下面的代码并在线查看 canvas 变化：

+修改下面的代码并在线查看 canvas 变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.fill")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.md index 4cbcc35e141c70..fd7cae9efdfccc 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -2,68 +2,69 @@ title: CanvasRenderingContext2D.fillRect() slug: Web/API/CanvasRenderingContext2D/fillRect --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.fillRect() 是 Canvas 2D API 绘制填充矩形的方法。当前渲染上下文中的fillStyle 属性决定了对这个矩形对的填充样式。
-
- 这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 或者{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}方法并不会对这个方法有什么影响。

+**`CanvasRenderingContext2D.fillRect()`** 是 Canvas 2D API 绘制填充矩形的方法。当前渲染上下文中的`fillStyle` 属性决定了对这个矩形对的填充样式。 -

语法

+这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 或者{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}方法并不会对这个方法有什么影响。 -
void ctx.fillRect(x, y, width, height);
-
+## 语法 -

fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在(x, y) ，它的宽度和高度分别由width 和 height 确定，填充样式由当前的fillStyle 决定。

+``` +void ctx.fillRect(x, y, width, height); +``` -

参数

+`fillRect()`方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在`(x, y)` ，它的宽度和高度分别由`width` 和 `height` 确定，填充样式由当前的`fillStyle` 决定。 -
-
x
-
矩形起始点的 x 轴坐标。
-
y
-
矩形起始点的 y 轴坐标。
-
width
-
矩形的宽度。
-
height
-
矩形的高度。
-
+### 参数 -

示例

+- `x` + - : 矩形起始点的 x 轴坐标。 +- `y` + - : 矩形起始点的 y 轴坐标。 +- `width` + - : 矩形的宽度。 +- `height` + - : 矩形的高度。 -

一个填充矩形的例子

+## 示例 -

这个例子使用fillRect()方法绘制了一个用绿色填充的矩形。

+### 一个填充矩形的例子 -

HTML

+这个例子使用`fillRect()`方法绘制了一个用绿色填充的矩形。 -
<canvas id="canvas"></canvas>
-
+#### HTML -

JavaScript

+```html + +``` -

下面绘制的矩形左上顶点在 (20, 10)，宽高分别是 150 和 100 像素。

+#### JavaScript -
const canvas = document.getElementById('canvas');
+下面绘制的矩形左上顶点在 (20, 10)，宽高分别是 150 和 100 像素。
+
+```
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 ctx.fillStyle = 'green';
-ctx.fillRect(20, 10, 150, 100);
- -

结果

+ctx.fillRect(20, 10, 150, 100); +``` - +``` -

{{ EmbedLiveSample('A_simple_filled_rectangle', 700, 180) }}

+{{ EmbedLiveSample('A_simple_filled_rectangle', 700, 180) }} -

填充整个画布

+### 填充整个画布 -

下面这个代码片段使用本方法填充了整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果，需要让填充的范围和画布的范围相同，需要访问{{HtmlElement("canvas")}}元素的width 和 height 属性。

+下面这个代码片段使用本方法填充了整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果，需要让填充的范围和画布的范围相同，需要访问{{HtmlElement("canvas")}}元素的`width` 和 `height` 属性。 -
const canvas = document.getElementById('canvas');
+```
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
-ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillRect(0, 0, canvas.width, canvas.height); +``` -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.fillRect")}} -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.fillStyle")}}
    • -
  • {{domxref("CanvasRenderingContext2D.clearRect()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.strokeRect()")}}
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillStyle")}} +- {{domxref("CanvasRenderingContext2D.clearRect()")}} +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md index c42f9561649acb..7b7edf50b26480 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -2,66 +2,66 @@ title: CanvasRenderingContext2D.fillStyle slug: Web/API/CanvasRenderingContext2D/fillStyle --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.fillStyle 是 Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000 （黑色）。

+**`CanvasRenderingContext2D.fillStyle`** 是 Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 `#000` （黑色）。 -

参见 Canvas Tutorial 的 Applying styles and color 章节。

+参见 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 的 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 章节。 -

语法

+## 语法 -
ctx.fillStyle = color;
-ctx.fillStyle = gradient;
-ctx.fillStyle = pattern;
-
+``` +ctx.fillStyle = color; +ctx.fillStyle = gradient; +ctx.fillStyle = pattern; +``` -

选项

+### 选项 -
-
color
-
{{domxref("DOMString")}} 字符串，被转换成 CSS {{cssxref("<color>")}} 颜色值。
-
gradient
-
{{domxref("CanvasGradient")}} 对象（线性渐变或者放射性渐变）.
-
pattern
-
{{domxref("CanvasPattern")}} 对象（可重复图像）。
-
+- `color` + - : {{domxref("DOMString")}} 字符串，被转换成 CSS {{cssxref("<color>")}} 颜色值。 +- `gradient` + - : {{domxref("CanvasGradient")}} 对象（线性渐变或者放射性渐变）. +- `pattern` + - : {{domxref("CanvasPattern")}} 对象（可重复图像）。 -

示例

+## 示例 -

使用 fillStyle 属性设置不同的颜色

+### 使用 `fillStyle` 属性设置不同的颜色 -

这是一段简单的代码片段，使用 fillStyle 属性设置不同的颜色。

+这是一段简单的代码片段，使用 `fillStyle` 属性设置不同的颜色。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.fillStyle = "blue";
 ctx.fillRect(10, 10, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

fillStyle 使用 for 循环的例子

+### `fillStyle` 使用 `for` 循环的例子 -

在这个例子中， 我们使用两个 for 循环绘制一个矩形表格，每个单元格都有不同的颜色。 最终的结果图像看起来像屏幕截图，其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的 RGB 颜色，并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道，你能生成各种各样的调色板。通过逐步地增加，你能实现类似 Photoshop 的调色板。

+在这个例子中， 我们使用两个 `for` 循环绘制一个矩形表格，每个单元格都有不同的颜色。 最终的结果图像看起来像屏幕截图，其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的 RGB 颜色，并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道，你能生成各种各样的调色板。通过逐步地增加，你能实现类似 Photoshop 的调色板。 - +```html hidden + +``` -
var ctx = document.getElementById('canvas').getContext('2d');
-for (var i=0;i<6;i++){
-  for (var j=0;j<6;j++){
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i<6;i++){
+  for (var j=0;j<6;j++){
     ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                      Math.floor(255-42.5*j) + ',0)';
     ctx.fillRect(j*25,i*25,25,25);
   }
 }
-
+``` -

结果看起来像是这样的：

+结果看起来像是这样的： -

{{EmbedLiveSample("fillStyle_使用_for_循环的例子", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+{{EmbedLiveSample("fillStyle_使用_for_循环的例子", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}} -

规格描述

+## 规格描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

+{{Compat("api.CanvasRenderingContext2D.fillStyle")}} -
+### WebKit/Blink-specific 注解 - +- 支持 WebKit- 和 Blink-based 的浏览器中， 有一个不标准的、被反对的方法 `ctx.setFillColor()` 已经实现。 -
    -
  • 支持 WebKit- 和 Blink-based 的浏览器中， 有一个不标准的、被反对的方法 ctx.setFillColor() 已经实现。 + ```js + setFillColor(color, optional alpha); + setFillColor(grayLevel, optional alpha); + setFillColor(r, g, b, a); + setFillColor(c, m, y, k, a); + ``` - 
    setFillColor(color, optional alpha);
-setFillColor(grayLevel, optional alpha);
-setFillColor(r, g, b, a);
-setFillColor(c, m, y, k, a);
-
    -
    • -
+## 参见 -

参见

+- [Canvas API](/zh-CN/docs/Web/API/Canvas_API) +- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- 此属性使用的值： -
    -
  • Canvas API
    • -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • 此属性使用的值： -
      -
    • {{cssxref("<color>")}} CSS 数据类型
      • -
    • {{domxref("CanvasGradient")}} 对象
      • -
    • {{domxref("CanvasPattern")}} 对象
      • -
    -
    • -
+ - {{cssxref("<color>")}} CSS 数据类型 + - {{domxref("CanvasGradient")}} 对象 + - {{domxref("CanvasPattern")}} 对象 diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md index 13f9fcb91df1fb..87a2393a8c48c9 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.md @@ -2,69 +2,66 @@ title: CanvasRenderingContext2D.fillText() slug: Web/API/CanvasRenderingContext2D/fillText --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.fillText() 是 Canvas 2D API 在 (x, y)位置填充文本的方法。如果选项的第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度。

+**`CanvasRenderingContext2D.fillText()`** 是 Canvas 2D API 在 *(x, y)* 位置填充文本的方法。如果选项的第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度。 -

参见 {{domxref("CanvasRenderingContext2D.strokeText()")}} 方法对文本进行描边。

+参见 {{domxref("CanvasRenderingContext2D.strokeText()")}} 方法对文本进行描边。 -

语法

+## 语法 -
void ctx.fillText(text, x, y, [maxWidth]);
-
+```js +void ctx.fillText(text, x, y, [maxWidth]); +``` -

参数

+### 参数 -
-
text
-
使用当前的 {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} 和 {{domxref("CanvasRenderingContext2D.direction","direction")}} 值对文本进行渲染。
-
+- `text` + - : 使用当前的 {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} 和 {{domxref("CanvasRenderingContext2D.direction","direction")}} 值对文本进行渲染。 +- `x` + - : 文本起点的 x 轴坐标。 +- `y` + - : 文本起点的 y 轴坐标。 +- `maxWidth` {{optional_inline}} + - : 绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。 -
-
x
-
文本起点的 x 轴坐标。
-
y
-
文本起点的 y 轴坐标。
-
maxWidth {{optional_inline}}
-
绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。
-
+## 示例 -

示例

+### 使用 `fillText` 方法 -

使用 fillText 方法

+这是一段使用 `fillText` 方法的简单的代码片段。 -

这是一段使用 fillText 方法的简单的代码片段。

+#### HTML -

HTML

+```html + +``` -
<canvas id="canvas"></canvas>
-
+#### JavaScript -

JavaScript

- -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.font = "48px serif";
 ctx.fillText("Hello world", 50, 100);
-
- -

修改下面的代码并在线查看 canvas 的变化：

+``` - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.fillText")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.strokeText()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.strokeText()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.md index 1823895529f24e..ff8f3231904be2 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.md @@ -2,62 +2,58 @@ title: CanvasRenderingContext2D.font slug: Web/API/CanvasRenderingContext2D/font --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.font 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。使用和 CSS font 规范相同的字符串值。

+**`CanvasRenderingContext2D.font`** 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。使用和 [CSS font](/zh-CN/docs/Web/CSS/font) 规范相同的字符串值。 -

语法

+## 语法 -
ctx.font = value;
-
+``` +ctx.font = value; +``` -

选项

+### 选项 -
-
value
-
符合 CSS {{cssxref("font")}} 语法的{{domxref("DOMString")}} 字符串。默认字体是 10px sans-serif。
-
+- `value` + - : 符合 CSS {{cssxref("font")}} 语法的{{domxref("DOMString")}} 字符串。默认字体是 10px sans-serif。 -

示例

+## 示例 -

使用自定义字体

+### 使用自定义字体 -

这个例子使用 font 属性设置了不同的字体大小和字体种类。

+这个例子使用 `font` 属性设置了不同的字体大小和字体种类。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.font = "bold 48px serif";
 ctx.strokeText("Hello world", 50, 100);
-
+``` -

结果

+#### 结果 - +``` -

{{EmbedLiveSample('Playable_code', 700, 360)}}

+{{EmbedLiveSample('Playable_code', 700, 360)}} -

+## -

使用 CSS 字体加载 API 加载字体

+### 使用 CSS 字体加载 API 加载字体 -

借助{{domxref("FontFace")}} API 的帮助，您可以在画布中使用字体之前显式加载字体。

+借助{{domxref("FontFace")}} API 的帮助，您可以在画布中使用字体之前显式加载字体。 -
let f = new FontFace('test', 'url(x)');
+```
+let f = new FontFace('test', 'url(x)');
 
 f.load().then(function() {
   // Ready to use the font in a canvas context
-});
+}); +``` -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.font")}}

+{{Compat("api.CanvasRenderingContext2D.font")}} -

Gecko-specific 注解

+### Gecko-specific 注解 -
    -
  • 基于 Gecko 的浏览器，例如 Firefox， 实现了一个非标准的并且不赞成使用的属性 ctx.mozTextStyle 。不要使用此属性。
    • -
  • 在 Gecko 中，当将系统字体设置为 canvas 2D 上下文的{{domxref("CanvasRenderingContext2D.font", "font")}}（例如菜单）的值时，获取用于无法返回期望字体的字体值（不返回任何内容）。这已在 Firefox 57（{{bug(1374885)}}）中发布的 Firefox 的Quantum/Stylo并行 CSS 引擎中修复。
    • -
+- 基于 Gecko 的浏览器，例如 Firefox， 实现了一个非标准的并且不赞成使用的属性 `ctx.mozTextStyle` 。不要使用此属性。 +- 在 Gecko 中，当将系统字体设置为 canvas 2D 上下文的{{domxref("CanvasRenderingContext2D.font", "font")}}（例如菜单）的值时，获取用于无法返回期望字体的字体值（不返回任何内容）。这已在 Firefox 57（{{bug(1374885)}}）中发布的 Firefox 的[Quantum/Stylo](https://wiki.mozilla.org/Quantum/Stylo)并行 CSS 引擎中修复。 -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.md index e01bd0c8424cf2..8c2b1c3d0412b3 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.md @@ -2,33 +2,36 @@ title: CanvasRenderingContext2D.getLineDash() slug: Web/API/CanvasRenderingContext2D/getLineDash --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.getLineDash() 是 Canvas 2D API 获取当前线段样式的方法。

+**`CanvasRenderingContext2D.getLineDash()`** 是 Canvas 2D API 获取当前线段样式的方法。 -

语法

+## 语法 -
ctx.getLineDash();
-
+``` +ctx.getLineDash(); +``` -

返回值

+### 返回值 -

一个 {{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。 例如，设置线段为 [5, 15, 25] 将会得到以下返回值 [5, 15, 25, 5, 15, 25]。

+一个 {{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。 例如，设置线段为 `[5, 15, 25]` 将会得到以下返回值 `[5, 15, 25, 5, 15, 25]。` -

示例

+## 示例 -

使用 getLineDash 方法

+### 使用 `getLineDash` 方法 -

这是一段使用 getLineDash 方法的简单的代码片段。

+这是一段使用 `getLineDash` 方法的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.setLineDash([5, 15]);
@@ -38,27 +41,26 @@ ctx.beginPath();
 ctx.moveTo(0,100);
 ctx.lineTo(400, 100);
 ctx.stroke();
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.getLineDash")}}

+{{Compat("api.CanvasRenderingContext2D.getLineDash")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.setLineDash()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineDashOffset")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.setLineDash()")}} +- {{domxref("CanvasRenderingContext2D.lineDashOffset")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md index 64a3449850e873..4adf99a68f1e5e 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/gettransform/index.md @@ -2,50 +2,53 @@ title: CanvasRenderingContext2D.getTransform() slug: Web/API/CanvasRenderingContext2D/getTransform --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.getTransform() 方法获取当前被应用到上下文的转换矩阵

+**`CanvasRenderingContext2D.getTransform()`** 方法获取当前被应用到上下文的转换矩阵 -

语法

+## 语法 -
let storedTransform = ctx.getTransform();
-
+``` +let storedTransform = ctx.getTransform(); +``` -

参数

+### 参数 -

无。

+无。 -

返回值

+### 返回值 -

一个 {{domxref("DOMMatrix")}} 对象

+一个 {{domxref("DOMMatrix")}} 对象 -

转换矩阵被这样描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

+转换矩阵被这样描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] -
-

注意: 返回的对象不是实时的，所以更新它不会影响当前的转换矩阵，同时更新当前的转换矩阵不会影响已经返回的 DOMMatrix.

-
+> **备注：** 返回的对象不是实时的，所以更新它不会影响当前的转换矩阵，同时更新当前的转换矩阵不会影响已经返回的 `DOMMatrix`. -

示例

+## 示例 -

在以下例子，我们有两个 {{htmlelement("canvas")}} 元素。我们使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 设置一个转换到第一个画布，并在上面画一个矩形，然后通过 getTransform() 获取矩阵。

+在以下例子，我们有两个 {{htmlelement("canvas")}} 元素。我们使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 设置一个转换到第一个画布，并在上面画一个矩形，然后通过 `getTransform()` 获取矩阵。 -

然后我们将获取到的矩阵作为 DOMMatrix 参数传给 setTransform() 设置到第二个画布，并在上面画一个圆。

+然后我们将获取到的矩阵作为 `DOMMatrix` 参数传给 `setTransform()` 设置到第二个画布，并在上面画一个圆。 -

HTML

+#### HTML -
<canvas width="240"></canvas>
-<canvas width="240"></canvas>
-
+```html + + +``` -

CSS

+#### CSS -
canvas {
+```css
+canvas {
   border: 1px solid black;
-}
+} +``` -

JavaScript

+#### JavaScript -
const canvases = document.querySelectorAll('canvas');
+```js
+const canvases = document.querySelectorAll('canvas');
 const ctx1 = canvases[0].getContext('2d');
 const ctx2 = canvases[1].getContext('2d');
 
@@ -58,25 +61,22 @@ console.log(storedTransform);
 ctx2.setTransform(storedTransform);
 ctx2.beginPath();
 ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
-ctx2.fill();
+ctx2.fill(); +``` -

结果

+#### 结果 -

{{ EmbedLiveSample('Examples', "100%", 180) }}

+{{ EmbedLiveSample('Examples', "100%", 180) }} -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 +{{Compat("api.CanvasRenderingContext2D.getTransform")}} +## 参见 -

{{Compat("api.CanvasRenderingContext2D.getTransform")}}

- -

参见

- -
    -
  • The interface defining this method: {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.transform()")}}
    • -
+- The interface defining this method: {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.transform()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md index 8937d644b70d55..00459b77eab1e1 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -2,38 +2,39 @@ title: CanvasRenderingContext2D.globalAlpha slug: Web/API/CanvasRenderingContext2D/globalAlpha --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.globalAlpha 是 Canvas 2D API 用来描述在 canvas 上绘图之前，设置图形和图片透明度的属性。 数值的范围从 0.0（完全透明）到 1.0（完全不透明）。

+**`CanvasRenderingContext2D.globalAlpha`** 是 Canvas 2D API 用来描述在 canvas 上绘图之前，设置图形和图片透明度的属性。 数值的范围从 0.0（完全透明）到 1.0（完全不透明）。 -

在 Canvas Tutorial 中参见 Applying styles and color 章节。

+在 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中参见 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 章节。 -

语法

+## 语法 -
ctx.globalAlpha = value;
-
+``` +ctx.globalAlpha = value; +``` -

选项

+### 选项 -
-
value
-
数字在 0.0 （完全透明）和 1.0（完全不透明）之间。 默认值是 1.0。如果数值不在范围内，包括{{jsxref("Infinity")}} 和{{jsxref("NaN")}} ，无法赋值，并且 globalAlpha 会保持原有的数值。
-
+- `value` + - : 数字在 0.0 （完全透明）和 1.0（完全不透明）之间。 默认值是 1.0。如果数值不在范围内，包括{{jsxref("Infinity")}} 和{{jsxref("NaN")}} ，无法赋值，并且 `globalAlpha` 会保持原有的数值。 -

示例

+## 示例 -

使用 globalAlpha 属性

+### 使用 `globalAlpha` 属性 -

这是一段使用 globalAlpha 属性的简单代码片段，绘制了 2 个半透明的矩形。

+这是一段使用 `globalAlpha` 属性的简单代码片段，绘制了 2 个半透明的矩形。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.globalAlpha = 0.5;
@@ -43,29 +44,28 @@ ctx.fillRect(10, 10, 100, 100);
 
 ctx.fillStyle = "red";
 ctx.fillRect(50, 50, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+{{ EmbedLiveSample('Playable_code', 700, 380) }} -

globalAlpha 例子

+### `globalAlpha` 例子 -

此例中，绘制了 4 个不同背景色的正方形。在他们上面，绘制半透明的圆形。将那个点绘制的所有图形的 globalAlpha 属性值都设置为 0.2。通过 for 循环绘制半径逐渐增大的圆形。 最终形成的结果是放射性渐变。通过不停地叠加圆形， 使得先前绘制的圆形的透明度越来越暗。通过增加循环数量绘制更多的圆形，图片中心的背景将会变成完全不透明。

+此例中，绘制了 4 个不同背景色的正方形。在他们上面，绘制半透明的圆形。将那个点绘制的所有图形的 `globalAlpha` 属性值都设置为 0.2。通过 for 循环绘制半径逐渐增大的圆形。 最终形成的结果是放射性渐变。通过不停地叠加圆形， 使得先前绘制的圆形的透明度越来越暗。通过增加循环数量绘制更多的圆形，图片中心的背景将会变成完全不透明。 -
var ctx = document.getElementById('canvas').getContext('2d');
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
 
 // draw background
 ctx.fillStyle = '#FD0';
@@ -114,30 +114,28 @@ ctx.fillStyle = '#FFF';
 ctx.globalAlpha = 0.2;
 
 // Draw semi transparent circles
-for (i=0;i<7;i++){
+for (i=0;i<7;i++){
   ctx.beginPath();
   ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
   ctx.fill();
 }
-
+``` - +```html hidden + +``` -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.globalAlpha")}} -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index 5737fc80e69e18..ecc9de1834edd3 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -2,34 +2,38 @@ title: CanvasRenderingContext2D.globalCompositeOperation slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation --- -
{{APIRef}}
+{{APIRef}} -

Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 属性设置要在绘制新形状时应用的合成操作的类型，其中 type 是用于标识要使用的合成或混合模式操作的字符串。

+Canvas 2D API 的 **`CanvasRenderingContext2D.globalCompositeOperation`** 属性设置要在绘制新形状时应用的合成操作的类型，其中 type 是用于标识要使用的合成或混合模式操作的字符串。 -

在 Canvas Tutorial 中查看 Compositing 章节。

+在 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中查看 [Compositing](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing) 章节。 -

语法

+## 语法 -
ctx.globalCompositeOperation = type;
+``` +ctx.globalCompositeOperation = type; +``` -

类型

+### 类型 -

{{EmbedLiveSample("合成示例", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+{{EmbedLiveSample("合成示例", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}} -

示例

+## 示例 -

使用 globalCompositeOperation 属性

+### 使用 `globalCompositeOperation` 属性 -

这是一段使用 globalCompositeOperation 属性的简单的代码片段，绘制了 2 个矩形在重叠时相互排斥的情况。

+这是一段使用 `globalCompositeOperation` 属性的简单的代码片段，绘制了 2 个矩形在重叠时相互排斥的情况。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.globalCompositeOperation = "xor";
@@ -39,29 +43,28 @@ ctx.fillRect(10, 10, 100, 100);
 
 ctx.fillStyle = "red";
 ctx.fillRect(50, 50, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+{{ EmbedLiveSample('Playable_code', 700, 380) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}

+{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}} - +### WebKit/Blink-specific 注解 -
    -
  • 在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 ctx.setCompositeOperation()。
    • -
+- 在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 `ctx.setCompositeOperation()`。 -

Gecko-specific 注解

+### Gecko-specific 注解 -
    -
  • 早起的规范草案指定了 "darker"值。然而，Firefox 在第 4 个版本 ({{bug(571532)}}) 移除了对 "darker"的支持。参见这篇文章建议如何使用不同的值实现和"darker"类似的效果。
    • -
+- 早起的规范草案指定了 "darker"值。然而，Firefox 在第 4 个版本 ({{bug(571532)}}) 移除了对 "darker"的支持。参见[这篇文章](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker)建议如何使用不同的值实现和"darker"类似的效果。 -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.globalAlpha")}}
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.globalAlpha")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 7da99d02597d60..94758adc9e3461 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -2,40 +2,41 @@ title: CanvasRenderingContext2D.imageSmoothingEnabled slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.imageSmoothingEnabled 是 Canvas 2D API 用来设置图片是否平滑的属性，true 表示图片平滑（默认值），false 表示图片不平滑。当我们获取 imageSmoothingEnabled 属性值时， 它会返回最新设置的值。

+**`CanvasRenderingContext2D.imageSmoothingEnabled`** 是 Canvas 2D API 用来设置图片是否平滑的属性，true 表示图片平滑（默认值），false 表示图片不平滑。当我们获取 `imageSmoothingEnabled` 属性值时， 它会返回最新设置的值。 -

以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。如果那样的话，设置属性值为 false。 参见 CSS {{cssxref("image-rendering")}} 属性。

+以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。如果那样的话，设置属性值为 false。 参见 CSS {{cssxref("image-rendering")}} 属性。 -
-

注意：您可以使用{{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}}属性来调整平滑质量。

-
+> **备注：** 您可以使用{{domxref("CanvasRenderingContext2D.imageSmoothingQuality", "imageSmoothingQuality")}}属性来调整平滑质量。 -

语法

+## 语法 -
ctx.imageSmoothingEnabled = value;
+``` +ctx.imageSmoothingEnabled = value; +``` -

选项

+### 选项 -
-
value
-
一个{{jsxref("Boolean")}} 类型的值，表示图片是否平滑。
-
+- `value` + - : 一个{{jsxref("Boolean")}} 类型的值，表示图片是否平滑。 -

示例

+## 示例 -

使用 imageSmoothingEnabled 属性

+### 使用 `imageSmoothingEnabled` 属性 -

本示例比较了三个图像。第一个图像以其自然大小绘制，第二个图像缩放为 3 倍并启用了图像平滑，而第三个图像缩放为 3 倍但禁用了图像平滑。

+本示例比较了三个图像。第一个图像以其自然大小绘制，第二个图像缩放为 3 倍并启用了图像平滑，而第三个图像缩放为 3 倍但禁用了图像平滑。 -

HTML

+#### HTML -
<canvas id="canvas" width="460" height="210"></canvas>
+```html + +``` -

JavaScript

+#### JavaScript -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 
 const ctx = canvas.getContext('2d');
 ctx.font = '16px sans-serif';
@@ -51,27 +52,21 @@ img.onload = function() {
   ctx.drawImage(img, 0, 24, w, h);
 
   ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
-  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingEnabled = true;
   ctx.drawImage(img, w, 24, w * 3, h * 3);
 
   ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
-  ctx.imageSmoothingEnabled = false;
+  ctx.imageSmoothingEnabled = false;
   ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
 };
-
+``` - +#### 结果 -

结果

+{{ EmbedLiveSample('Disabling_image_smoothing', 700, 240) }} -

{{ EmbedLiveSample('Disabling_image_smoothing', 700, 240) }}

- -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

- -

{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}

+## 浏览器兼容性 -
+{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{cssxref("image-rendering")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{cssxref("image-rendering")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md index 1cf4f2fa61c49e..e84d4845e3825c 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md @@ -2,36 +2,38 @@ title: CanvasRenderingContext2D.imageSmoothingQuality slug: Web/API/CanvasRenderingContext2D/imageSmoothingQuality --- -
{{APIRef}} {{SeeCompatTable}}
+{{APIRef}} {{SeeCompatTable}} -

CanvasRenderingContext2D.imageSmoothingQuality 是 Canvas 2D API，用于设置图像平滑度的属性。

+**CanvasRenderingContext2D.imageSmoothingQuality** 是 Canvas 2D API，用于设置图像平滑度的属性。 -

语法

+## 语法 -
ctx.imageSmoothingQuality = value
-value = ctx.imageSmoothingQuality
+``` +ctx.imageSmoothingQuality = value +value = ctx.imageSmoothingQuality +``` -

选项

+### 选项 -
-
value
-
"low","medium","high"
-
+- `value` + - : "low","medium","high" -

示例

+## 示例 -

使用 imageSmoothingQuality 属性

+### 使用 imageSmoothingQuality 属性 -

这是一段简单的代码片段，对缩放的图片使用 imageSmoothingQuality 属性。

+这是一段简单的代码片段，对缩放的图片使用 `imageSmoothingQuality `属性。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 var img = new Image();
@@ -43,19 +45,18 @@ img.onload = function() {
  ctx.msImageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0, 0, 400, 200);
-};
+}; +``` -

编辑下面代码，在线查看 Canvas 的变化：

+编辑下面代码，在线查看 Canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 400) }}

+{{ EmbedLiveSample('Playable_code', 700, 400) }} -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.imageSmoothingQuality")}} -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}
    • -
  • {{cssxref("image-rendering")}}
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}} +- {{cssxref("image-rendering")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.md index 5340fc9f6765b8..fb49d66a5b7134 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.md @@ -2,83 +2,81 @@ title: CanvasRenderingContext2D.isPointInPath() slug: Web/API/CanvasRenderingContext2D/isPointInPath --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.isPointInPath()是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。

+**`CanvasRenderingContext2D.isPointInPath()`** 是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。 -

语法

+## 语法 -
boolean ctx.isPointInPath(x, y);
-boolean ctx.isPointInPath(x, y, fillRule);
+```
+boolean ctx.isPointInPath(x, y);
+boolean ctx.isPointInPath(x, y, fillRule);
 
-boolean ctx.isPointInPath(path, x, y);
-boolean ctx.isPointInPath(path, x, y, fillRule);
-
+boolean ctx.isPointInPath(path, x, y); +boolean ctx.isPointInPath(path, x, y, fillRule); +``` -

参数

+### 参数 -
-
x
-
检测点的 X 坐标
-
y
-
检测点的 Y 坐标
-
fillRule
-
用来决定点在路径内还是在路径外的算法。
- 允许的值： - -
-
path
-
{{domxref("Path2D")}}应用的路径。
-
+- x + - : 检测点的 X 坐标 +- y + - : 检测点的 Y 坐标 +- `fillRule` -

返回值

+ - : 用来决定点在路径内还是在路径外的算法。 + 允许的值： -
-
{{jsxref("Boolean")}}
-
一个 Boolean 值，当检测点包含在当前或指定的路径内，返回 true；否则返回 false。
-
+ - **`"nonzero`**": [非零环绕规则 ](http://en.wikipedia.org/wiki/Nonzero-rule)，默认的规则。 + - **`"evenodd"`**: [奇偶环绕原则 ](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule)。 -

示例

+- `path` + - : {{domxref("Path2D")}}应用的路径。 -

使用 isPointInPath 方法

+### 返回值 -

这是一段简单的代码片段，使用 isPointInPath 方法检查某点是否在当前的路径内。

+- {{jsxref("Boolean")}} + - : 一个 Boolean 值，当检测点包含在当前或指定的路径内，返回 true；否则返回 false。 -

HTML

+## 示例 -
<canvas id="canvas"></canvas>
-
+### 使用 `isPointInPath` 方法 -

JavaScript

+这是一段简单的代码片段，使用 `isPointInPath` 方法检查某点是否在当前的路径内。 -
var canvas = document.getElementById("canvas");
+#### HTML
+
+```html
+
+```
+
+#### JavaScript
+
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.rect(10, 10, 100, 100);
 ctx.stroke();
 console.log(ctx.isPointInPath(10, 10)); // true
-
+``` -

修改下面的代码，在线查看 canvas 的变化并在你的 控制台 中观察日志信息：

+修改下面的代码，在线查看 canvas 的变化并在你的 [控制台](/zh-CN/docs/Tools/Browser_Console) 中观察日志信息： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.isPointInPath")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.md index b44a1c8a67f61c..2a09fc63bd76b1 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.md @@ -2,72 +2,70 @@ title: CanvasRenderingContext2D.isPointInStroke() slug: Web/API/CanvasRenderingContext2D/isPointInStroke --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.isPointInStroke()是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。

+**`CanvasRenderingContext2D.isPointInStroke()`** 是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。 -

语法

+## 语法 -
boolean ctx.isPointInStroke(x, y);
-boolean ctx.isPointInStroke(path, x, y);
-
+``` +boolean ctx.isPointInStroke(x, y); +boolean ctx.isPointInStroke(path, x, y); +``` -

参数

+### 参数 -
-
x
-
检测点的 X 坐标。
-
y
-
检测点的 Y 坐标。
-
path
-
{{domxref("Path2D")}} 路径。
-
+- x + - : 检测点的 X 坐标。 +- y + - : 检测点的 Y 坐标。 +- `path` + - : {{domxref("Path2D")}} 路径。 -

返回值

+### 返回值 -
-
{{jsxref("Boolean")}}
-
一个布尔值，当这个点在路径的描边线上，则返回 true，否则返回 false。
-
+- {{jsxref("Boolean")}} + - : 一个布尔值，当这个点在路径的描边线上，则返回 true，否则返回 false。 -

示例

+## 示例 -

使用 isPointInStroke 方法

+### 使用 `isPointInStroke` 方法 -

这只是一个使用 isPointInStroke 方法的简单的代码片段，用于检测一个点是否在路径的描边线上。

+这只是一个使用 **isPointInStroke** 方法的简单的代码片段，用于检测一个点是否在路径的描边线上`。` -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.rect(10, 10, 100, 100);
 ctx.stroke();
 console.log(ctx.isPointInStroke(10, 10)); // true
-
+``` -

修改线面的代码，在线查看 canvas 的变化，并在你的控制台查看日至信息：

+修改线面的代码，在线查看 canvas 的变化，并在你的[控制台](/zh-CN/docs/Tools/Browser_Console)查看日至信息： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.isPointInStroke")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.md index 4adf9d2bbe4bc4..540f1c7647c196 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.md @@ -2,43 +2,45 @@ title: CanvasRenderingContext2D.lineCap slug: Web/API/CanvasRenderingContext2D/lineCap --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有 3 个可能的值，分别是：butt, round and square。默认值是 butt。

+**`CanvasRenderingContext2D.lineCap`** 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有 3 个可能的值，分别是：`butt`, `round` and `square`。默认值是 `butt`。 -

参见 Canvas Tutorial 中的 Applying styles and color 章节。

+参见 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中的 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 章节。 -

语法

+## 语法 -
ctx.lineCap = "butt";
-ctx.lineCap = "round";
-ctx.lineCap = "square";
+``` +ctx.lineCap = "butt"; +ctx.lineCap = "round"; +ctx.lineCap = "square"; +``` -

选项

+### 选项 -
-
butt
-
线段末端以方形结束。
-
round
-
线段末端以圆形结束。
-
square
-
线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
-
+- `butt` + - : 线段末端以方形结束。 +- `round` + - : 线段末端以圆形结束。 +- `square` + - : 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。 -

示例

+## 示例 -

使用 lineCap 属性

+### 使用 `lineCap` 属性 -

这是一段简单的代码片段，使用 lineCap 属性绘制以圆形结尾的线段。

+这是一段简单的代码片段，使用 `lineCap` 属性绘制以圆形结尾的线段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
@@ -47,28 +49,27 @@ ctx.lineWidth = 15;
 ctx.lineCap = "round";
 ctx.lineTo(100, 100);
 ctx.stroke();
-
- -

修改下面的代码并在线查看 canvas 的变化：

+``` - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

lineCap 例子

+### `lineCap` 例子 -

在这个例子中绘制了 3 条线段，每条线段都设置了不同的 lineCap 属性值。通过 2 条导航线能够精确地看到 3 条已绘制线段之间的不同。每条线段的顶端和末端都能在导航线上准确的反映出来。

+在这个例子中绘制了 3 条线段，每条线段都设置了不同的 `lineCap` 属性值。通过 2 条导航线能够精确地看到 3 条已绘制线段之间的不同。每条线段的顶端和末端都能在导航线上准确的反映出来。 -

左侧的线段使用了默认值 butt ， 和导航线是完全平齐的。第二条线段使用了 round 选项，在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 square 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

+左侧的线段使用了默认值 `butt` ， 和导航线是完全平齐的。第二条线段使用了 `round` 选项，在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 `square` 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。 -
var ctx = document.getElementById('canvas').getContext('2d');
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
 var lineCap = ['butt','round','square'];
 
 // Draw guides
@@ -116,7 +117,7 @@ ctx.stroke();
 
 // Draw lines
 ctx.strokeStyle = 'black';
-for (var i = 0; i < lineCap.length; i++) {
+for (var i = 0; i < lineCap.length; i++) {
   ctx.lineWidth = 15;
   ctx.lineCap = lineCap[i];
   ctx.beginPath();
@@ -124,26 +125,24 @@ for (var i = 0; i < lineCap.length; i++) {
   ctx.lineTo(25+i*50,140);
   ctx.stroke();
 }
-
+``` - +```html hidden + +``` -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.lineCap")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineWidth")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineJoin")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineWidth")}} +- {{domxref("CanvasRenderingContext2D.lineJoin")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md index 5a199705c4cfee..43e34f39e13cea 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.md @@ -2,34 +2,35 @@ title: CanvasRenderingContext2D.lineDashOffset slug: Web/API/CanvasRenderingContext2D/lineDashOffset --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现“蚂蚁线“ 的效果。

+**`CanvasRenderingContext2D.lineDashOffset`** 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现“[蚂蚁线](http://en.wikipedia.org/wiki/Marching_ants)“ 的效果。 -

语法

+## 语法 -
ctx.lineDashOffset = value;
-
+``` +ctx.lineDashOffset = value; +``` -
-
value
-
偏移量是 float 精度的数字。初始值为 0.0。
-
+- `value` + - : 偏移量是 float 精度的数字。初始值为 `0.0。` -

示例

+## 示例 -

使用 lineDashOffset 属性

+### 使用 `lineDashOffset` 属性 -

这是一段简单的代码片段，使用 lineDashOffset 属性绘制虚线。

+这是一段简单的代码片段，使用 `lineDashOffset` 属性绘制虚线。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.setLineDash([4, 16]);
@@ -39,29 +40,28 @@ ctx.beginPath();
 ctx.moveTo(0,100);
 ctx.lineTo(400, 100);
 ctx.stroke();
-
+``` -

修改下面的代码并在线查看 canvas 变化：

+修改下面的代码并在线查看 canvas 变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+{{ EmbedLiveSample('Playable_code', 700, 380) }} -

“蚂蚁线”

+### “蚂蚁线” -

”蚂蚁线“效果是一种动画技巧，经常出现在计算机绘图程序的套索工具中。 它能帮助用户根据图片背景动态变化的边界来区分选择的边界。

+”蚂蚁线“效果是一种动画技巧，经常出现在计算机绘图程序的套索工具中。 它能帮助用户根据图片背景动态变化的边界来区分选择的边界。 - +```html hidden + +``` -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var offset = 0;
 
@@ -112,30 +110,29 @@ function draw() {
 
 function march() {
   offset++;
-  if (offset > 16) {
+  if (offset > 16) {
     offset = 0;
   }
   draw();
   setTimeout(march, 20);
 }
 
-march();
+march(); +``` -

{{ EmbedLiveSample('Marching_ants', 700, 200) }}

+{{ EmbedLiveSample('Marching_ants', 700, 200) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}

+{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.getLineDash()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.setLineDash()")}}
    • -
  • Applying styles and color
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.getLineDash()")}} +- {{domxref("CanvasRenderingContext2D.setLineDash()")}} +- [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.md index 305f2c62eb5f62..e14ce2d1e23100 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -2,47 +2,49 @@ title: CanvasRenderingContext2D.lineJoin slug: Web/API/CanvasRenderingContext2D/lineJoin --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.lineJoin 是 Canvas 2D API 用来设置 2 个长度不为 0 的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。

+**`CanvasRenderingContext2D.lineJoin`** 是 Canvas 2D API 用来设置 2 个长度不为 0 的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。 -

参见 Canvas Tutorial 中的 Applying styles and color 章节。

+参见 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中的 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 章节。 -

语法

+## 语法 -
ctx.lineJoin = "bevel";
-ctx.lineJoin = "round";
-ctx.lineJoin = "miter";
+``` +ctx.lineJoin = "bevel"; +ctx.lineJoin = "round"; +ctx.lineJoin = "miter"; +``` -

选项

+### 选项 -

此属性有 3 个值： round, bevel and miter。默认值是 miter。注意：如果 2 个相连部分在同一方向，那么 lineJoin 不会产生任何效果，因为在那种情况下不会出现连接区域。

+此属性有 3 个值： `round`, `bevel` and `miter`。默认值是 `miter。注意：如果 2 个相连部分在同一方向，那么 lineJoin 不会产生任何效果`，因为在那种情况下不会出现连接区域。 -

+![](canvas_linejoin.png) -
-
round
-
通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。
-
bevel
-
在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
-
miter
-
通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}} 属性看到效果。
-
+- `round` + - : 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。 +- `bevel` + - : 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。 +- `miter` + - : 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}} 属性看到效果。 -

示例

+## 示例 -

使用 lineJoin 属性

+### 使用 `lineJoin` 属性 -

这是一段使用 lineJoin 属性的简单的代码片段。

+这是一段使用 `lineJoin` 属性的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.lineWidth = 10;
@@ -52,29 +54,28 @@ ctx.moveTo(0,0);
 ctx.lineTo(200, 100);
 ctx.lineTo(300,0);
 ctx.stroke();
-
- -

修改下面的代码并在线查看 canvas 的变化：

+``` - +``` -

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+{{ EmbedLiveSample('Playable_code', 700, 380) }} -

lineJoin 例子

+### `lineJoin` 例子 -

下面的例子绘制了 3 条不同的路径，演示 lineJoin 属性 3 种不同的设置。

+下面的例子绘制了 3 条不同的路径，演示 `lineJoin` 属性 3 种不同的设置。 -
var ctx = document.getElementById('canvas').getContext('2d');
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
 var lineJoin = ['round','bevel','miter'];
 ctx.lineWidth = 10;
 
-for (var i = 0; i < lineJoin.length; i++) {
+for (var i = 0; i < lineJoin.length; i++) {
   ctx.lineJoin = lineJoin[i];
   ctx.beginPath();
   ctx.moveTo(-5,5+i*40);
@@ -120,26 +121,24 @@ for (var i = 0; i < lineJoin.length; i++) {
   ctx.lineTo(155,5+i*40);
   ctx.stroke();
 }
-
+``` - +```html hidden + +``` -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.lineJoin")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineCap")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineWidth")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineCap")}} +- {{domxref("CanvasRenderingContext2D.lineWidth")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.md index ea945fb87d7411..61236b4f1fb6f0 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.md @@ -2,64 +2,64 @@ title: CanvasRenderingContext2D.lineTo() slug: Web/API/CanvasRenderingContext2D/lineTo --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.lineTo() 是 Canvas 2D API 使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）。

+**`CanvasRenderingContext2D.lineTo()`** 是 Canvas 2D API 使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）。 -

语法

+## 语法 -
void ctx.lineTo(x, y);
-
+``` +void ctx.lineTo(x, y); +``` -

参数

+### 参数 -
-
x
-
直线终点的 x 轴坐标。
-
y
-
直线终点的 y 轴坐标。
-
+- `x` + - : 直线终点的 x 轴坐标。 +- `y` + - : 直线终点的 y 轴坐标。 -

示例

+## 示例 -

使用 lineTo 方法

+### 使用 `lineTo` 方法 -

这是一段使用 lineTo 方法的简单的代码片段。 使用 {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 绘制路径的起始点，使用 {{domxref("CanvasRenderingContext.moveTo", "moveTo()")}}移动画笔，使用 {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} 方法真正地画线。

+这是一段使用 `lineTo` 方法的简单的代码片段。 使用 {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} 绘制路径的起始点，使用 {{domxref("CanvasRenderingContext.moveTo", "moveTo()")}}移动画笔，使用 {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} 方法真正地画线。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.moveTo(0,0);
 ctx.lineTo(100, 100);
 ctx.stroke();
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.lineTo")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.moveTo()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.stroke()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.moveTo()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md index d2b170cc63cfc9..6b5d06727fdb93 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linewidth/index.md @@ -2,39 +2,39 @@ title: CanvasRenderingContext2D.lineWidth slug: Web/API/CanvasRenderingContext2D/lineWidth --- -
{{APIRef}}
+{{APIRef}} -

The CanvasRenderingContext2D.lineWidth 是 Canvas 2D API 设置线段厚度的属性（即线段的宽度）。

+The **`CanvasRenderingContext2D.lineWidth`** 是 Canvas 2D API 设置线段厚度的属性（即线段的宽度）。 -
-

Note：线可以通过{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, 和{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} 方法绘制。

-
+> **备注：** 线可以通过{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, 和{{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} 方法绘制。 -

语法

+## 语法 -
ctx.lineWidth = value;
+``` +ctx.lineWidth = value; +``` -

选项

+### 选项 -
-
value
-
描述线段宽度的数字。0、 负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 会被忽略。
-
+- `value` + - : 描述线段宽度的数字。0、 负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 会被忽略。 -

示例

+## 示例 -

改变线宽

+### 改变线宽 -

此示例使用 15 个单位的线宽绘制直线和矩形。

+此示例使用 15 个单位的线宽绘制直线和矩形。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 ctx.lineWidth = 15;
@@ -44,41 +44,35 @@ ctx.moveTo(20, 20);
 ctx.lineTo(130, 130);
 ctx.rect(40, 40, 70, 70);
 ctx.stroke();
-
+``` -

结果

+#### 结果 -

{{ EmbedLiveSample('改变线宽', 700, 180) }}

+{{ EmbedLiveSample('改变线宽', 700, 180) }} -

更多示例

+### 更多示例 -

有关此属性的更多示例和说明，请参阅在“画布教程”中的使用样式和颜色。

+有关此属性的更多示例和说明，请参阅在“画布教程”中的[使用样式和颜色](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)。 -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.lineWidth")}}

+{{Compat("api.CanvasRenderingContext2D.lineWidth")}} - +### WebKit/Blink-specific 注解 -
    -
  • 在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，实现了一个不标准的并且不赞成使用的方法 ctx.setLineWidth() 。
    • -
+- 在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，实现了一个不标准的并且不赞成使用的方法 `ctx.setLineWidth()` 。 -

Gecko-specific 注解

+### Gecko-specific 注解 -
    -
  • 从 Gecko 2.0 {{geckoRelease("2.0")}}版本开始， 设置lineWidth 为负数不再抛出异常，所有非正数值都会被忽略。
    • -
+- 从 Gecko 2.0 {{geckoRelease("2.0")}}版本开始， 设置`lineWidth` 为负数不再抛出异常，所有非正数值都会被忽略。 -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineCap")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineJoin")}}
    • -
  • 使用样式和颜色
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineCap")}} +- {{domxref("CanvasRenderingContext2D.lineJoin")}} +- [使用样式和颜色](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md index b1a3b86b5a6d2b..895831719e6ce1 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.md @@ -2,52 +2,53 @@ title: CanvasRenderingContext2D.miterLimit slug: Web/API/CanvasRenderingContext2D/miterLimit --- -
{{APIRef}}
+{{APIRef}} -

The CanvasRenderingContext2D.miterLimit 是 Canvas 2D API 设置斜接面限制比例的属性。当获取属性值时，会返回当前的值（默认值是10.0 ）。当给属性赋值时，0、负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略；除此之外都会被赋予一个新值。

+The **`CanvasRenderingContext2D.miterLimit`** 是 Canvas 2D API 设置斜接面限制比例的属性。当获取属性值时，会返回当前的值（默认值是`10.0` ）。当给属性赋值时，0、负数、 {{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略；除此之外都会被赋予一个新值。 -

参见 Canvas Tutorial 中的 Applying styles and color 章节。

+参见 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中的 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 章节。 -

语法

+## 语法 -
ctx.miterLimit = value;
+``` +ctx.miterLimit = value; +``` -

选项

+### 选项 -
-
value
-
斜接面限制比例的的数字。0、负数、{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略。
-
+- `value` + - : 斜接面限制比例的的数字。0、负数、{{jsxref("Infinity")}} 和 {{jsxref("NaN")}} 都会被忽略。 -

简释

+## 简释 -
ctx.lineJoin = "miter"  // "miter" >   "round" )   "bevel" ]
+``` +ctx.lineJoin = "miter" // "miter" > "round" ) "bevel" ] +``` -

只有当 lineJoin 显示为 ">" 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 " ] " 类型来显示

+只有当 lineJoin 显示为 ">" 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 " ] " 类型来显示 -

示例

+## 示例 -

使用 miterLimit 属性

+### 使用 `miterLimit` 属性 -

查看 Canvas Tutorial 中的 Applying styles and color 章节，获取更多信息。

+查看 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中的 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#A_demo_of_the_miterLimit_property) 章节，获取更多信息。 - +``` -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}

+{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.miterLimit")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineCap")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineJoin")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineCap")}} +- {{domxref("CanvasRenderingContext2D.lineJoin")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.md index 38fb4c6bc4f966..d21a8ba4902beb 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.md @@ -2,64 +2,64 @@ title: CanvasRenderingContext2D.moveTo() slug: Web/API/CanvasRenderingContext2D/moveTo --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.moveTo() 是 Canvas 2D API 将一个新的子路径的起始点移动到 (x，y) 坐标的方法。

+**`CanvasRenderingContext2D.moveTo()`** 是 Canvas 2D API 将一个新的子路径的起始点移动到 (x，y) 坐标的方法。 -

语法

+## 语法 -
void ctx.moveTo(x, y);
-
+``` +void ctx.moveTo(x, y); +``` -

参数

+### 参数 -
-
x
-
点的 x 轴。
-
y
-
点的 y 轴。
-
+- `x` + - : 点的 x 轴。 +- `y` + - : 点的 y 轴。 -

示例

+## 示例 -

使用 moveTo 方法

+### 使用 `moveTo` 方法 -

这是一段使用 moveTo 方法的简单的代码片段，移动画笔到起始点绘制一条线。

+这是一段使用 `moveTo` 方法的简单的代码片段，移动画笔到起始点绘制一条线。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.moveTo(50,50);
 ctx.lineTo(200, 50);
 ctx.stroke();
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.moveTo")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineTo()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.stroke()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineTo()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md index aeea604f51c25d..d1e8f1b87f30a6 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.md @@ -2,60 +2,59 @@ title: CanvasRenderingContext2D.putImageData() slug: Web/API/CanvasRenderingContext2D/putImageData --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.putImageData() 是 Canvas 2D API 将数据从已有的 {{domxref("ImageData")}} 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。

+**`CanvasRenderingContext2D.putImageData()`** 是 Canvas 2D API 将数据从已有的 {{domxref("ImageData")}} 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。 -

语法

+## 语法 -
void ctx.putImageData(imagedata, dx, dy);
-void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
-
+``` +void ctx.putImageData(imagedata, dx, dy); +void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight); +``` -

参数

+### 参数 -

imageData

+**imageData** -

{{domxref("ImageData")}} ，包含像素值的数组对象。

+{{domxref("ImageData")}} ，包含像素值的数组对象。 -
-
dx
-
源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。
-
dy
-
源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。
-
dirtyX {{optional_inline}}
-
在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。
-
dirtyY {{optional_inline}}
-
在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。
-
dirtyWidth {{optional_inline}}
-
在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。
-
dirtyHeight {{optional_inline}}
-
在源图像数据中，矩形区域的高度。默认是图像数据的高度。
-
+- `dx` + - : 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。 +- `dy` + - : 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。 +- `dirtyX` {{optional_inline}} + - : 在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。 +- `dirtyY` {{optional_inline}} + - : 在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。 +- `dirtyWidth` {{optional_inline}} + - : 在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。 +- `dirtyHeight` {{optional_inline}} + - : 在源图像数据中，矩形区域的高度。默认是图像数据的高度。 -

抛出错误

+### 抛出错误 -
-
NotSupportedError
-
如果任何一个变量被设置成无穷大，则会抛出此错误。
-
InvalidStateError
-
如果过图像数据对象的数据被分离，会抛出此错误。
-
+- `NotSupportedError` + - : 如果任何一个变量被设置成无穷大，则会抛出此错误。 +- `InvalidStateError` + - : 如果过图像数据对象的数据被分离，会抛出此错误。 -

示例

+## 示例 -

理解putImageData

+### 理解`putImageData` -

通过{{domxref("CanvasRenderingContext2D.fillRect()")}}方法实现，更好地理解 putImageData 的执行算法。获取更多信息，参见 使用 Canvas 控制像素 和 {{domxref("ImageData")}} 对象。

+通过{{domxref("CanvasRenderingContext2D.fillRect()")}}方法实现，更好地理解 putImageData 的执行算法。获取更多信息，参见 [使用 Canvas 控制像素](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) 和 {{domxref("ImageData")}} 对象。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 function putImageData(ctx, imageData, dx, dy,
@@ -69,8 +68,8 @@ function putImageData(ctx, imageData, dx, dy,
   dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
   var limitBottom = dirtyY + dirtyHeight;
   var limitRight = dirtyX + dirtyWidth;
-  for (var y = dirtyY; y < limitBottom; y++) {
-    for (var x = dirtyX; x < limitRight; x++) {
+  for (var y = dirtyY; y < limitBottom; y++) {
+    for (var x = dirtyX; x < limitRight; x++) {
       var pos = y * width + x;
       ctx.fillStyle = 'rgba(' + data[pos*4+0]
                         + ',' + data[pos*4+1]
@@ -87,25 +86,24 @@ ctx.fillRect(0,0,100,100);
 var imagedata = ctx.getImageData(0,0,100,100);
 // use the putImageData function that illustrates how putImageData works
 putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.putImageData")}} -

参见

+## 参见 - +- 接口定义， {{domxref("CanvasRenderingContext2D")}}. +- {{domxref("ImageData")}} +- [Pixel manipulation with canvas](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index 230049ad856c56..7ac00a7b0b7247 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -2,42 +2,43 @@ title: CanvasRenderingContext2D.quadraticCurveTo() slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.quadraticCurveTo() 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要 2 个点。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 moveTo() 方法进行改变。

+**`CanvasRenderingContext2D.quadraticCurveTo()`** 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要 2 个点。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 `moveTo()` 方法进行改变。 -

语法

+## 语法 -
void ctx.quadraticCurveTo(cpx, cpy, x, y);
-
+``` +void ctx.quadraticCurveTo(cpx, cpy, x, y); +``` -

参数

+### 参数 -
-
cpx
-
控制点的 x 轴坐标。
-
cpy
-
控制点的 y 轴坐标。
-
x
-
终点的 x 轴坐标。
-
y
-
终点的 y 轴坐标。
-
+- `cpx` + - : 控制点的 x 轴坐标。 +- `cpy` + - : 控制点的 y 轴坐标。 +- `x` + - : 终点的 x 轴坐标。 +- `y` + - : 终点的 y 轴坐标。 -

示例

+## 示例 -

quadraticCurveTo 如何工作

+### `quadraticCurveTo` 如何工作 -

这是一段绘制二次贝赛尔曲线的简单的代码片段。控制点是红色，起点和终点是蓝色。

+这是一段绘制二次贝赛尔曲线的简单的代码片段。控制点是红色，起点和终点是蓝色。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 // Quadratic Bézier curve
@@ -57,19 +58,15 @@ ctx.fill();
 ctx.fillStyle = 'red';
 ctx.beginPath();
 ctx.arc(230, 30, 5, 0, 2 * Math.PI);
-ctx.fill();
- - +ctx.fill(); +``` -

{{ EmbedLiveSample('Using_the_quadraticCurveTo_method', 315, 165) }}

+{{ EmbedLiveSample('Using_the_quadraticCurveTo_method', 315, 165) }} -

简单的二次曲线

+### 简单的二次曲线 -

此示例使用quadraticCurveTo()绘制了简单的二次 Bézier 曲线。

+此示例使用`quadraticCurveTo()`绘制了简单的二次 Bézier 曲线。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -

曲线从moveTo()指定的点开始：(20, 110)。控制点位于 (230, 150)。曲线在 (250, 20) 处结束。

+曲线从`moveTo()`指定的点开始：(20, 110)。控制点位于 (230, 150)。曲线在 (250, 20) 处结束。 -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 ctx.beginPath();
 ctx.moveTo(20, 110);
 ctx.quadraticCurveTo(230, 150, 250, 20);
 ctx.stroke();
-
+``` -

结果

+#### 结果 - +``` - +``` -

{{ EmbedLiveSample('Trying_the_quadraticCurveTo_parameters', 700, 360) }}

+{{ EmbedLiveSample('Trying_the_quadraticCurveTo_parameters', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}

+{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}} - +- 接口定义，{{domxref("CanvasRenderingContext2D")}} +- [WikiPedia article on Bézier curves](http://en.wikipedia.org/wiki/B%C3%A9zier_curve). diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.md index c8f131f6c09310..3bcbf7c8895541 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.md @@ -2,63 +2,63 @@ title: CanvasRenderingContext2D.rect() slug: Web/API/CanvasRenderingContext2D/rect --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.rect() 是 Canvas 2D API 创建矩形路径的方法，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。矩形的 4 个点通过直线连接，子路径做为闭合的标记，所以你可以填充或者描边矩形。

+**`CanvasRenderingContext2D.rect()`** 是 Canvas 2D API 创建矩形路径的方法，矩形的起点位置是 _(x, y)_ ，尺寸为 _width_ 和 _height_。矩形的 4 个点通过直线连接，子路径做为闭合的标记，所以你可以填充或者描边矩形。 -

语法

+## 语法 -
void ctx.rect(x, y, width, height);
-
+``` +void ctx.rect(x, y, width, height); +``` -

参数

+### 参数 -
-
x
-
矩形起点的 x 轴坐标。
-
y
-
矩形起点的 y 轴坐标。
-
width
-
矩形的宽度。
-
height
-
矩形的高度。
-
+- `x` + - : 矩形起点的 x 轴坐标。 +- `y` + - : 矩形起点的 y 轴坐标。 +- `width` + - : 矩形的宽度。 +- `height` + - : 矩形的高度。 -

示例

+## 示例 -

使用 rect 方法

+### 使用 `rect` 方法 -

这是一段简单的代码片段，使用 rect 方法创建一条路径。 实际上，在 canvas 中绘制矩形路径， 你可以使用 {{domxref("CanvasRenderingContext2D.fill", "fill()")}} 或者 {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} 方法。 参见 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 和{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} 方法， 只需一步即可绘制。

+这是一段简单的代码片段，使用 `rect `方法创建一条路径。 实际上，在 canvas 中绘制矩形路径， 你可以使用 {{domxref("CanvasRenderingContext2D.fill", "fill()")}} 或者 {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} 方法。 参见 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 和{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} 方法， 只需一步即可绘制。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 ctx.rect(10, 10, 100, 100);
 ctx.fill();
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.rect")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.fillRect")}}
    • -
  • {{domxref("CanvasRenderingContext2D.strokeRect()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.fill()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.stroke()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillRect")}} +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} +- {{domxref("CanvasRenderingContext2D.fill()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.md index 936c48cc93a637..1e7b135dcf6141 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.md @@ -2,29 +2,32 @@ title: CanvasRenderingContext2D.resetTransform() slug: Web/API/CanvasRenderingContext2D/resetTransform --- -
{{APIRef}} {{SeeCompatTable}}
+{{APIRef}} {{SeeCompatTable}} -

CanvasRenderingContext2D.resetTransform() 是 Canvas 2D API 使用单位矩阵重新设置当前变形的方法。

+**`CanvasRenderingContext2D.resetTransform()`** 是 Canvas 2D API 使用单位矩阵重新设置当前变形的方法。 -

语法

+## 语法 -
void ctx.resetTransform();
-
+``` +void ctx.resetTransform(); +``` -

示例

+## 示例 -

使用 resetTransform 方法

+### 使用 `resetTransform` 方法 -

这是一段使用 resetTransform 方法的简单的代码片段。

+这是一段使用 `resetTransform` 方法的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.rotate(45 * Math.PI / 180);
@@ -32,25 +35,24 @@ ctx.fillRect(70,0,100,30);
 
 // reset current transformation matrix to the identity matrix
 ctx.resetTransform();
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

综合设置

+## 综合设置 -

你可以使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 方法重新设置当前变形为单位矩阵，如下：

+你可以使用 {{domxref("CanvasRenderingContext2D.setTransform()")}} 方法重新设置当前变形为单位矩阵，如下： -
ctx.setTransform(1, 0, 0, 1, 0, 0);
+```js +ctx.setTransform(1, 0, 0, 1, 0, 0); +``` -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.resetTransform")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.md index d3de4a5af427bc..c9c265db1a2f3b 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.md @@ -2,30 +2,34 @@ title: CanvasRenderingContext2D.restore() slug: Web/API/CanvasRenderingContext2D/restore --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。如果没有保存状态，此方法不做任何改变。

+**`CanvasRenderingContext2D.restore()`** 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。如果没有保存状态，此方法不做任何改变。 -

语法

+## 语法 -
void ctx.restore();
+``` +void ctx.restore(); +``` -

更多关于 drawing state 的信息，请看 {{domxref("CanvasRenderingContext2D.save()")}}。

+更多关于 [drawing state](/zh-CN/docs/Web/API/CanvasRenderingContext2D.save#Drawing_state) 的信息，请看 {{domxref("CanvasRenderingContext2D.save()")}}。 -

示例

+## 示例 -

使用 restore 方法

+### 使用 `restore` 方法 -

这是一段简单的代码片段，使用 save() 方法保存默认的状态，使用 restore() 进行恢复。所以，稍后你可以使用默认的状态绘制一个矩形。

+这是一段简单的代码片段，使用 `save()` 方法保存默认的状态，使用 `restore()` 进行恢复。所以，稍后你可以使用默认的状态绘制一个矩形。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.save(); // save the default state
@@ -35,27 +39,26 @@ ctx.fillRect(10, 10, 100, 100);
 
 ctx.restore(); // restore to the default state
 ctx.fillRect(150, 75, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.restore")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
  • {{domxref("CanvasRenderingContext2D.save()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. +- {{domxref("CanvasRenderingContext2D.save()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.md index 059934fc6980fd..b09bb9c9dcb9aa 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.md @@ -2,40 +2,41 @@ title: CanvasRenderingContext2D.rotate() slug: Web/API/CanvasRenderingContext2D/rotate --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。

+**`CanvasRenderingContext2D.rotate()`** 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。 -

语法

+## 语法 -
void ctx.rotate(angle);
-
+``` +void ctx.rotate(angle); +``` -

+![](canvas_grid_rotate.png) -

参数

+### 参数 -
-
angle
-
顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
-
+- `angle` + - : 顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： `degree * Math.PI / 180` 。 -

旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 {{domxref("CanvasRenderingContext2D.translate", "translate()")}} 方法移动 canvas。

+旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 {{domxref("CanvasRenderingContext2D.translate", "translate()")}} 方法移动 canvas。 -

示例

+## 示例 -

使用 rotate 方法

+### 使用 `rotate` 方法 -

这是一段使用 rotate 方法的简单的代码片段。

+这是一段使用 `rotate` 方法的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.rotate(45 * Math.PI / 180);
@@ -43,25 +44,24 @@ ctx.fillRect(70,0,100,30);
 
 // reset current transformation matrix to the identity matrix
 ctx.setTransform(1, 0, 0, 1, 0, 0);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.rotate")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.md index 3c464ac9f69b28..50e4cb2aa7d389 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.md @@ -2,39 +2,41 @@ title: CanvasRenderingContext2D.save() slug: Web/API/CanvasRenderingContext2D/save --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法。

+**`CanvasRenderingContext2D.save()`** 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法。 -

语法

+## 语法 -
void ctx.save();
+``` +void ctx.save(); +``` -

绘制状态

+## 绘制状态 -

保存到栈中的绘制状态有下面部分组成：

+保存到栈中的绘制状态有下面部分组成： -
    -
  • 当前的变换矩阵。
    • -
  • 当前的剪切区域。
    • -
  • 当前的虚线列表。
    • -
  • 以下属性当前的值： {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.
    • -
+- 当前的变换矩阵。 +- 当前的剪切区域。 +- 当前的虚线列表。 +- 以下属性当前的值： {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}. -

示例

+## 示例 -

使用 save 方法

+### 使用 `save` 方法 -

这是一段简单的代码片段，使用 save 方法保存默认的状态，这样，稍后你就可以使用默认的设置绘制一个矩形。

+这是一段简单的代码片段，使用 `save` 方法保存默认的状态，这样，稍后你就可以使用默认的设置绘制一个矩形。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.save(); // 保存默认的状态
@@ -44,27 +46,26 @@ ctx.fillRect(10, 10, 100, 100);
 
 ctx.restore(); // 还原到上次保存的默认状态
 ctx.fillRect(150, 75, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.save")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
  • {{domxref("CanvasRenderingContext2D.restore()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. +- {{domxref("CanvasRenderingContext2D.restore()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.md index 42bf98be098d05..50ee5444aee289 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.md @@ -2,63 +2,63 @@ title: CanvasRenderingContext2D.scrollPathIntoView() slug: Web/API/CanvasRenderingContext2D/scrollPathIntoView --- -
{{APIRef}} {{SeeCompatTable}}
+{{APIRef}} {{SeeCompatTable}} -

CanvasRenderingContext2D.scrollPathIntoView() 是 Canvas 2D API 将当前或给定的路径滚动到窗口的方法。类似于 {{domxref("Element.scrollIntoView()")}}。

+**`CanvasRenderingContext2D.scrollPathIntoView()`** 是 Canvas 2D API 将当前或给定的路径滚动到窗口的方法。类似于 {{domxref("Element.scrollIntoView()")}}。 -

语法

+## 语法 -
void ctx.scrollPathIntoView();
-void ctx.scrollPathIntoView(path);
-
+``` +void ctx.scrollPathIntoView(); +void ctx.scrollPathIntoView(path); +``` -

参数

+### 参数 -
-
path
-
使用的{{domxref("Path2D")}} 路径。
-
+- `path` + - : 使用的{{domxref("Path2D")}} 路径。 -

示例

+## 示例 -

使用 scrollPathIntoView 方法

+### 使用 scrollPathIntoView 方法 -

这是一段使用 scrollPathIntoView 方法的简单的代码片段。

+这是一段使用 `scrollPathIntoView` 方法的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.fillRect(10, 10, 30, 30);
 ctx.scrollPathIntoView();
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.scrollPathIntoView")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
  • {{domxref("Element.scrollIntoView()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. +- {{domxref("Element.scrollIntoView()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md index cdd631d8e7d86d..084f9e3f65e4d7 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -2,44 +2,41 @@ title: CanvasRenderingContext2D.setLineDash() slug: Web/API/CanvasRenderingContext2D/setLineDash --- -
{{APIRef}}
+{{APIRef}} -

Canvas 2D API 的{{domxref("CanvasRenderingContext2D")}}接口的setLineDash()方法在填充线时使用虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。

+Canvas 2D API 的{{domxref("CanvasRenderingContext2D")}}接口的**`setLineDash()`**方法在填充线时使用虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。 -
-

提示：如果要切换回至实线模式，将 dash list 设置为一个空数组即可。

-
+> **备注：** 如果要切换回至实线模式，将 dash list 设置为一个空数组即可。 -

语法

+## 语法 -
void ctx.setLineDash(segments);
-
+``` +void ctx.setLineDash(segments); +``` -

参数

+### 参数 -
-
segments
-
一个{{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
-
-

返回值

-
-
{{jsxref("undefined")}}
-
+- `segments` + - : 一个{{jsxref("Array")}}数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， `[5, 15, 25]` 会变成 `[5, 15, 25, 5, 15, 25]。` +- ### 返回值 + - : {{jsxref("undefined")}} -

示例

+## 示例 -

基本示例

+### 基本示例 -

这是一段简单的代码片段，使用 setLineDash 方法绘制一条线段。

+这是一段简单的代码片段，使用 `setLineDash` 方法绘制一条线段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 // Dashed line
@@ -55,27 +52,26 @@ ctx.setLineDash([]);
 ctx.moveTo(0, 100);
 ctx.lineTo(300, 100);
 ctx.stroke();
-
- -

结果

+``` - +``` -

{{ EmbedLiveSample('基本示例', 700, 360) }}

+{{ EmbedLiveSample('基本示例', 700, 360) }} -

一些常见的模式

+### 一些常见的模式 -

此示例说明了各种常见的线划线模式。

+此示例说明了各种常见的线划线模式。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
+```html + +``` -

JavaScript

+#### JavaScript -

下面创建的drawDashedLine() 函数使得多个虚线的绘制变得简单。它接收模式数组作为其唯一参数。

+下面创建的`drawDashedLine()` 函数使得多个虚线的绘制变得简单。它接收模式数组作为其唯一参数。 -
function drawDashedLine(pattern) {
+```js
+function drawDashedLine(pattern) {
   ctx.beginPath();
   ctx.setLineDash(pattern);
   ctx.moveTo(0, y);
@@ -134,24 +132,23 @@ drawDashedLine([10, 10]);
 drawDashedLine([20, 5]);
 drawDashedLine([15, 3, 3, 3]);
 drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
-drawDashedLine([12, 3, 3]);  // Equals [12, 3, 3, 12, 3, 3]
+drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3] +``` -

Result

+#### Result -

{{ EmbedLiveSample('一些常见的模式', 700, 180) }}

+{{ EmbedLiveSample('一些常见的模式', 700, 180) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.setLineDash")}}

+{{Compat("api.CanvasRenderingContext2D.setLineDash")}} -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.getLineDash()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.lineDashOffset")}}
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.getLineDash()")}} +- {{domxref("CanvasRenderingContext2D.lineDashOffset")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.md index dffdd5ba7666a4..4b0ceef77c04b7 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.md @@ -2,74 +2,74 @@ title: CanvasRenderingContext2D.setTransform() slug: Web/API/CanvasRenderingContext2D/setTransform --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.setTransform() 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。

+**`CanvasRenderingContext2D.setTransform()`** 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。 -

参见 {{domxref("CanvasRenderingContext2D.transform()", "transform()")}} 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。

+参见 {{domxref("CanvasRenderingContext2D.transform()", "transform()")}} 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。 -

语法

+## 语法 -
void ctx.setTransform(a, b, c, d, e, f);
-
+``` +void ctx.setTransform(a, b, c, d, e, f); +``` -

变换矩阵的描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

+变换矩阵的描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] -

参数

+### 参数 -
-
a (m11)
-
水平缩放。
-
b (m12)
-
垂直倾斜。
-
c (m21)
-
水平倾斜。
-
d (m22)
-
垂直缩放。
-
e (dx)
-
水平移动。
-
f (dy)
-
垂直移动。
-
+- `a (m11)` + - : 水平缩放。 +- _`b (m12)`_ + - : 垂直倾斜。 +- `c (m21)` + - : 水平倾斜。 +- `d (m22)` + - : 垂直缩放。 +- `e (dx)` + - : 水平移动。 +- `f (dy)` + - : 垂直移动。 -

较新的类型由单个参数矩阵组成，该参数表示要设置的 2D 转换矩阵（从技术上讲，是 DOMMatrixInit 对象；任何对象只要包含上述作为属性的组件，就可以执行操作）。

+较新的类型由单个参数矩阵组成，该参数表示要设置的 2D 转换矩阵（从技术上讲，是 DOMMatrixInit 对象；任何对象只要包含上述作为属性的组件，就可以执行操作）。 -

示例

+## 示例 -

使用 setTransform 方法

+### 使用 `setTransform` 方法 -

这是一段使用 setTransform 方法的简单的代码片段。

+这是一段使用 `setTransform` 方法的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.setTransform(1,1,0,1,0,0);
 ctx.fillRect(0,0,100,100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.setTransform")}}

+{{Compat("api.CanvasRenderingContext2D.setTransform")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.transform()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.transform()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md index 27777c81fbf0e5..87383068dfa6b8 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.md @@ -2,34 +2,35 @@ title: CanvasRenderingContext2D.shadowBlur slug: Web/API/CanvasRenderingContext2D/shadowBlur --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.shadowBlur 是 Canvas 2D API 描述模糊效果程度的属性； 它既不对应像素值也不受当前转换矩阵的影响。 默认值是 0。

+**`CanvasRenderingContext2D.shadowBlur`** 是 Canvas 2D API 描述模糊效果程度的属性； 它既不对应像素值也不受当前转换矩阵的影响。 默认值是 0。 -

语法

+## 语法 -
ctx.shadowBlur = level;
-
+``` +ctx.shadowBlur = level; +``` -
-
level
-
描述模糊效果程度的，float 类型的值。默认值是 0。 负数、 {{jsxref("Infinity")}} 或者 {{jsxref("NaN")}} 都会被忽略。
-
+- `level` + - : 描述模糊效果程度的，float 类型的值。默认值是 0。 负数、 {{jsxref("Infinity")}} 或者 {{jsxref("NaN")}} 都会被忽略。 -

示例

+## 示例 -

使用 shadowBlur 属性

+### 使用 `shadowBlur` 属性 -

这是一段简单的代码片段，使用 shadowblur 属性设置模糊阴影。 注意：只有设置 shadowColor 属性值为不透明，阴影才会被绘制。

+这是一段简单的代码片段，使用 `shadowblur 属性设置模糊阴影。` 注意：只有设置 shadowColor 属性值为不透明，阴影才会被绘制。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.shadowColor = "black";
@@ -37,26 +38,25 @@ ctx.shadowBlur = 10;
 
 ctx.fillStyle = "white";
 ctx.fillRect(10, 10, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.shadowBlur")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md index 7dd0a6b30352c2..11eb8d7031c7df 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.md @@ -2,34 +2,35 @@ title: CanvasRenderingContext2D.shadowColor slug: Web/API/CanvasRenderingContext2D/shadowColor --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.shadowColor 是 Canvas 2D API 描述阴影颜色的属性。

+**`CanvasRenderingContext2D.shadowColor`** 是 Canvas 2D API 描述阴影颜色的属性。 -

语法

+## 语法 -
ctx.shadowColor = color;
-
+``` +ctx.shadowColor = color; +``` -
-
color
-
可以转换成 CSS {{cssxref("<color>")}} 值的{{domxref("DOMString")}} 字符串。 默认值是 fully-transparent black.
-
+- `color` + - : 可以转换成 CSS {{cssxref("<color>")}} 值的{{domxref("DOMString")}} 字符串。 默认值是 fully-transparent black. -

示例

+## 示例 -

使用 shadowColor 属性

+### 使用 `shadowColor` 属性 -

这是一段简单的代码片段，使用 shadowColor 属性设置阴影的颜色。注意：shadowColor 属性设置成不透明的，并且 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、 {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或者 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性不为 0，阴影才会被绘制。

+这是一段简单的代码片段，使用 `shadowColor` 属性设置阴影的颜色。注意：shadowColor 属性设置成不透明的，并且 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、 {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或者 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性不为 0，阴影才会被绘制。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.shadowColor = "black";
@@ -38,27 +39,26 @@ ctx.shadowOffsetX = 10;
 
 ctx.fillStyle = "green"
 ctx.fillRect(10, 10, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.shadowColor")}} -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md index f91541e5efd48a..c891396a99cd37 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.md @@ -2,34 +2,35 @@ title: CanvasRenderingContext2D.shadowOffsetX slug: Web/API/CanvasRenderingContext2D/shadowOffsetX --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.shadowOffsetX 是 Canvas 2D API 描述阴影水平偏移距离的属性。

+**`CanvasRenderingContext2D.shadowOffsetX`** 是 Canvas 2D API 描述阴影水平偏移距离的属性。 -

Syntax

+## Syntax -
ctx.shadowOffsetX = offset;
-
+``` +ctx.shadowOffsetX = offset; +``` -
-
offset
-
阴影水平偏移距离的 float 类型的值。默认值是 0。 {{jsxref("Infinity")}} 或者{{jsxref("NaN")}}都会被忽略。
-
+- `offset` + - : 阴影水平偏移距离的 float 类型的值。默认值是 0。 {{jsxref("Infinity")}} 或者{{jsxref("NaN")}}都会被忽略。 -

示例

+## 示例 -

使用 shadowOffsetX 属性

+### 使用 `shadowOffsetX` 属性 -

这是一段简单的代码片段，使用 shadowOffsetX 属性设置阴影的水平偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。

+这是一段简单的代码片段，使用 `shadowOffsetX` 属性设置阴影的水平偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.shadowColor = "black";
@@ -38,27 +39,26 @@ ctx.shadowBlur = 10;
 
 ctx.fillStyle = "green";
 ctx.fillRect(10, 10, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.shadowOffsetX")}} -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}.
    • -
  • {{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
    • -
  • {{domxref("CanvasRenderingContext2D.shadowColor")}}
    • -
  • {{domxref("CanvasRenderingContext2D.shadowBlur")}}
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}}. +- {{domxref("CanvasRenderingContext2D.shadowOffsetY")}} +- {{domxref("CanvasRenderingContext2D.shadowColor")}} +- {{domxref("CanvasRenderingContext2D.shadowBlur")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md index 3eab5ed9740001..53b51374be8e76 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.md @@ -2,34 +2,35 @@ title: CanvasRenderingContext2D.shadowOffsetY slug: Web/API/CanvasRenderingContext2D/shadowOffsetY --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.shadowOffsetY 是 Canvas 2D API 描述阴影垂直偏移距离的属性。

+**`CanvasRenderingContext2D.shadowOffsetY`** 是 Canvas 2D API 描述阴影垂直偏移距离的属性。 -

语法

+## 语法 -
ctx.shadowOffsetY = offset;
-
+``` +ctx.shadowOffsetY = offset; +``` -
-
offset
-
阴影垂直偏移距离的 float 类型的值。默认值是 0。 {{jsxref("Infinity")}} 或者{{jsxref("NaN")}} 都会被忽略。
-
+- `offset` + - : 阴影垂直偏移距离的 float 类型的值。默认值是 0。 {{jsxref("Infinity")}} 或者{{jsxref("NaN")}} 都会被忽略。 -

示例

+## 示例 -

使用 shadowOffsetY 属性

+### 使用 `shadowOffsetY` 属性 -

这是一段简单的代码片段，使用 shadowOffsetY 属性绘制阴影垂直偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。

+这是一段简单的代码片段，使用 `shadowOffsetY` 属性绘制阴影垂直偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.shadowColor = "black";
@@ -38,27 +39,26 @@ ctx.shadowBlur = 10;
 
 ctx.fillStyle = "green";
 ctx.fillRect(10, 10, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.shadowOffsetY")}} -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}.
    • -
  • {{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
    • -
  • {{domxref("CanvasRenderingContext2D.shadowColor")}}
    • -
  • {{domxref("CanvasRenderingContext2D.shadowBlur")}}
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}}. +- {{domxref("CanvasRenderingContext2D.shadowOffsetX")}} +- {{domxref("CanvasRenderingContext2D.shadowColor")}} +- {{domxref("CanvasRenderingContext2D.shadowBlur")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.md index 555c873715f1c6..de44d572827f35 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.md @@ -2,58 +2,58 @@ title: CanvasRenderingContext2D.stroke() slug: Web/API/CanvasRenderingContext2D/stroke --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.stroke() 是 Canvas 2D API 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。

+**`CanvasRenderingContext2D.stroke()`** 是 Canvas 2D API 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。 -

语法

+## 语法 -
void ctx.stroke();
-void ctx.stroke(path);
-
+``` +void ctx.stroke(); +void ctx.stroke(path); +``` -

Parameters

+### Parameters -
-
path
-
绘制的路径{{domxref("Path2D")}} 。
-
+- `path` + - : 绘制的路径{{domxref("Path2D")}} 。 -

示例

+## 示例 -

使用 stroke 方法

+### 使用 `stroke` 方法 -

这是一段简单的代码片段，使用 stroke 方法绘制一条路径。

+这是一段简单的代码片段，使用 `stroke` 方法绘制一条路径。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 ctx.rect(10, 10, 100, 100);
 ctx.stroke();
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.stroke")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md index 967b05555e7431..87813a16c7621c 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -2,66 +2,66 @@ title: CanvasRenderingContext2D.strokeStyle slug: Web/API/CanvasRenderingContext2D/strokeStyle --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.strokeStyle 是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性。默认值是 #000 (black)。

+**`CanvasRenderingContext2D.strokeStyle`** 是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性。默认值是 `#000` (black)。 -

参见 Canvas Tutorial 中的 Applying styles and color 章节。

+参见 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中的 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 章节。 -

语法

+## 语法 -
ctx.strokeStyle = color;
-ctx.strokeStyle = gradient;
-ctx.strokeStyle = pattern;
-
+``` +ctx.strokeStyle = color; +ctx.strokeStyle = gradient; +ctx.strokeStyle = pattern; +``` -

选项

+### 选项 -
-
color
-
{{domxref("DOMString")}} 字符串，可以转换成 CSS {{cssxref("<color>")}} 值。
-
gradient
-
{{domxref("CanvasGradient")}} 对象（线性渐变或放射性渐变）。
-
pattern
-
{{domxref("CanvasPattern")}} 对象（可重复的图片）。
-
+- `color` + - : {{domxref("DOMString")}} 字符串，可以转换成 CSS {{cssxref("<color>")}} 值。 +- `gradient` + - : {{domxref("CanvasGradient")}} 对象（线性渐变或放射性渐变）。 +- `pattern` + - : {{domxref("CanvasPattern")}} 对象（可重复的图片）。 -

示例

+## 示例 -

使用 strokeStyle 属性设置不同的颜色

+### 使用 `strokeStyle` 属性设置不同的颜色 -

这是一段简单的代码片段，使用 strokeStyle 属性设置不同的颜色。

+这是一段简单的代码片段，使用 `strokeStyle` 属性设置不同的颜色。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.strokeStyle = "blue";
 ctx.strokeRect(10, 10, 100, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

strokeStyle 例子

+### `strokeStyle` 例子 -

这个例子使用 strokeStyle 属性改变图形轮廓线的颜色。我们使用 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 绘制圆形来代替正方形。

+这个例子使用 `strokeStyle 属性改变图形轮廓线的颜色。`我们使用 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 绘制圆形来代替正方形。 -
var ctx = document.getElementById('canvas').getContext('2d');
-for (var i=0;i<6;i++){
-  for (var j=0;j<6;j++){
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i<6;i++){
+  for (var j=0;j<6;j++){
     ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ')';
     ctx.beginPath();
@@ -103,43 +103,37 @@ for (var i=0;i<6;i++){
     ctx.stroke();
   }
 }
-
+``` - +```html hidden + +``` -

结果如下显示：

+结果如下显示： -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

- -

{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}

+## 浏览器兼容性 -
+{{Compat("api.CanvasRenderingContext2D.strokeStyle")}} - +### WebKit/Blink-specific 注解 -
    -
  • 在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 ctx.setStrokeColor() 。 +- 在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 `ctx.setStrokeColor()` 。 - 
    setStrokeColor(color, optional alpha);
-setStrokeColor(grayLevel, optional alpha);
-setStrokeColor(r, g, b, a);
-setStrokeColor(c, m, y, k, a);
-
    -
    • -
+ ```js + setStrokeColor(color, optional alpha); + setStrokeColor(grayLevel, optional alpha); + setStrokeColor(r, g, b, a); + setStrokeColor(c, m, y, k, a); + ``` -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasGradient")}}
    • -
  • {{domxref("CanvasPattern")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasPattern")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.md index 7c28f048874ff7..4838602330b1e7 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -2,69 +2,66 @@ title: CanvasRenderingContext2D.strokeText() slug: Web/API/CanvasRenderingContext2D/strokeText --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.strokeText() 是 Canvas 2D API 在给定的 (x, y) 位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。

+**`CanvasRenderingContext2D.strokeText()`** 是 Canvas 2D API 在给定的 _(x, y)_ 位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。 -

参见 {{domxref("CanvasRenderingContext2D.fillText()")}} 方法填充文本。

+参见 {{domxref("CanvasRenderingContext2D.fillText()")}} 方法填充文本。 -

语法

+## 语法 -
void ctx.strokeText(text, x, y [, maxWidth]);
-
+``` +void ctx.strokeText(text, x, y [, maxWidth]); +``` -

参数

+### 参数 -
-
text
-
使用当前 {{domxref("CanvasRenderingContext2D.font","font")}}，{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}，{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}和{{domxref("CanvasRenderingContext2D.direction","direction")}} 的值对文本进行渲染。
-
+- `text` + - : 使用当前 {{domxref("CanvasRenderingContext2D.font","font")}}，{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}，{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}和{{domxref("CanvasRenderingContext2D.direction","direction")}} 的值对文本进行渲染。 +- `x` + - : 文本起始点的 x 轴坐标。 +- `y` + - : 文本起始点的 y 轴坐标。 +- `maxWidth` {{optional_inline}} + - : 需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。 -
-
x
-
文本起始点的 x 轴坐标。
-
y
-
文本起始点的 y 轴坐标。
-
maxWidth {{optional_inline}}
-
需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。
-
+## 示例 -

示例

+### 使用 `strokeText` 方法 -

使用 strokeText 方法

+这是一个使用 `strokeText` 方法的简单的代码片段。 -

这是一个使用 strokeText 方法的简单的代码片段。

+#### HTML -

HTML

+```html + +``` -
<canvas id="canvas"></canvas>
-
+#### JavaScript -

JavaScript

- -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.font = "48px serif";
 ctx.strokeText("Hello world", 50, 100);
-
- -

修改下面的代码并在线查看 canvas 的变化：

+``` - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.strokeText")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.fillText()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillText()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.md index de1f009358430f..d9a783fe0a902c 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.md @@ -2,80 +2,76 @@ title: CanvasRenderingContext2D.textAlign slug: Web/API/CanvasRenderingContext2D/textAlign --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.textAlign 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。注意，该对齐是基于 CanvasRenderingContext2D.fillText 方法的 x 的值。所以如果 textAlign="center"，那么该文本将画在 x-50%*width。

+**`CanvasRenderingContext2D.textAlign`** 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。注意，该对齐是基于 CanvasRenderingContext2D.fillText 方法的 x 的值。所以如果 textAlign="center"，那么该文本将画在 x-50%\*width。 -
-

译者注：这里的 textAlign="center"比较特殊。textAlign 的值为 center 时候文本的居中是基于你在 fillText 的时候所给的 x 的值，也就是说文本一半在 x 的左边，一半在 x 的右边（可以理解为计算 x 的位置时从默认文字的左端，改为文字的中心，因此你只需要考虑 x 的位置即可）。所以，如果你想让文本在整个 canvas 居中，就需要将 fillText 的 x 值设置成 canvas 的宽度的一半。

-
+> 译者注：这里的 textAlign="center"比较特殊。textAlign 的值为 center 时候文本的居中是基于你在 fillText 的时候所给的 x 的值，也就是说文本一半在 x 的左边，一半在 x 的右边（可以理解为计算 x 的位置时从默认文字的左端，改为文字的中心，因此你只需要考虑 x 的位置即可）。所以，如果你想让文本在整个 canvas 居中，就需要将 fillText 的 x 值设置成 canvas 的宽度的一半。 -

语法

+## 语法 -
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
-
+``` +ctx.textAlign = "left" || "right" || "center" || "start" || "end"; +``` -

选项

+### 选项 -

有效值：

+有效值： -
-
left
-
文本左对齐。
-
right
-
文本右对齐。
-
center
-
文本居中对齐。
-
start
-
文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）。
-
end
-
文本对齐界线结束的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。
-
+- left + - : 文本左对齐。 +- right + - : 文本右对齐。 +- center + - : 文本居中对齐。 +- start + - : 文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）。 +- end + - : 文本对齐界线结束的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。 -

默认值是 start。

+默认值是 `start。` -
-

译者注：direction 属性会对此属性产生影响。如果 direction 属性设置为 ltr，则 left 和 start 的效果相同，right 和 end 的效果相同；如果 direction 属性设置为 rtl，则 left 和 end 的效果相同，right 和 start 的效果相同。

-
+> `译者注：direction 属性会对此属性产生影响。如果 direction 属性设置为 ltr，则 left 和 start 的效果相同，right 和 end 的效果相同；如果 direction 属性设置为 rtl，则 left 和 end 的效果相同，right 和 start 的效果相同。` -

示例

+## 示例 -

使用 textAlign 属性

+### 使用 `textAlign` 属性 -

这是一段简单的代码片段，使用 textAlign 属性设置文本的不同对齐方式。

+这是一段简单的代码片段，使用 `textAlign` 属性设置文本的不同对齐方式。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.font = "48px serif";
 ctx.textAlign = "left";
 ctx.strokeText("Hello world", 0, 100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.textAlign")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.md index 5e8d5530e2f425..cdacd5b88f5f6c 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -2,53 +2,53 @@ title: CanvasRenderingContext2D.textBaseline slug: Web/API/CanvasRenderingContext2D/textBaseline --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。

+**`CanvasRenderingContext2D.textBaseline`** 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。 -
-

译者注：决定文字垂直方向的对齐方式。

-
+> 译者注：决定文字垂直方向的对齐方式。 -

语法

+## 语法 -
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
-
+``` +ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; +``` -

选项

+### 选项 -

有效值：

+有效值： -
-
top
-
文本基线在文本块的顶部。
-
hanging
-
文本基线是悬挂基线。
-
middle
-
文本基线在文本块的中间。
-
alphabetic
-
文本基线是标准的字母基线。
-
ideographic
-
文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。
-
bottom
-
文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
-
+- top + - : 文本基线在文本块的顶部。 +- hanging + - : 文本基线是悬挂基线。 +- middle + - : 文本基线在文本块的中间。 +- alphabetic + - : 文本基线是标准的字母基线。 +- ideographic + - : 文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。 +- bottom + - : 文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。 -

默认值是 alphabetic。

+默认值是 `alphabetic。` -

示例

+## 示例 -

使用 textBaseline 属性

+### 使用 `textBaseline` 属性 -

这是一段简单的代码片段，使用 textBaseline 属性设置不同的文本基线。

+这是一段简单的代码片段，使用 `textBaseline` 属性设置不同的文本基线。 -

HTML

+#### HTML -
<canvas id="canvas" width="550" height="500"></canvas>
+```html + +``` -

JavaScript

+#### JavaScript -
const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
@@ -63,16 +63,15 @@ baselines.forEach(function (baseline, index) {
   ctx.lineTo(550, y + 0.5);
   ctx.stroke();
   ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
-});
+}); +``` +```html hidden + +``` - - +}); +``` -

结果

+#### 结果 -

{{ EmbedLiveSample('Playable_code', 700, 550) }}

+{{ EmbedLiveSample('Playable_code', 700, 550) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

+{{Compat("api.CanvasRenderingContext2D.textBaseline")}} -

参见

+## 参见 -
    -
  • 接口定义，{{domxref("CanvasRenderingContext2D")}}.
    • -
+- 接口定义，{{domxref("CanvasRenderingContext2D")}}. diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.md index 09da639b3e7b27..d4d769a055b49d 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.md @@ -2,74 +2,74 @@ title: CanvasRenderingContext2D.transform() slug: Web/API/CanvasRenderingContext2D/transform --- -
{{APIRef}}
+{{APIRef}} -

CanvasRenderingContext2D.transform() 是 Canvas 2D API 使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。

+**`CanvasRenderingContext2D.transform()`** 是 Canvas 2D API 使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。 -

参见 {{domxref("CanvasRenderingContext2D.setTransform()", "setTransform()")}} 方法，这个方法使用单位矩阵重新设置当前的变换并且会调用 transform()。

+参见 {{domxref("CanvasRenderingContext2D.setTransform()", "setTransform()")}} 方法，这个方法使用单位矩阵重新设置当前的变换并且会调用 `transform()。` -

语法

+## 语法 -
void ctx.transform(a, b, c, d, e, f);
-
+``` +void ctx.transform(a, b, c, d, e, f); +``` -

变换矩阵的描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

+变换矩阵的描述： [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] -

参数

+### 参数 -
-
a (m11)
-
水平缩放。
-
b (m12)
-
垂直倾斜。
-
c (m21)
-
水平倾斜。
-
d (m22)
-
垂直缩放。
-
e (dx)
-
水平移动。
-
f (dy)
-
垂直移动。
-
+- `a (m11)` + - : 水平缩放。 +- _`b (m12)`_ + - : 垂直倾斜。 +- `c (m21)` + - : 水平倾斜。 +- `d (m22)` + - : 垂直缩放。 +- `e (dx)` + - : 水平移动。 +- `f (dy)` + - : 垂直移动。 -

示例

+## 示例 -

使用 transform 方法

+### 使用 `transform` 方法 -

这是一段使用 transform 方法的简单的代码片段。

+这是一段使用 `transform` 方法的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.transform(1,1,0,1,0,0);
 ctx.fillRect(0,0,100,100);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.transform")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.setTransform()")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.setTransform()")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.md index 762f5b348269f3..47012003be9dc1 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.md @@ -2,42 +2,43 @@ title: CanvasRenderingContext2D.translate() slug: Web/API/CanvasRenderingContext2D/translate --- -
{{APIRef}}
+{{APIRef}} -

Canvas 2D API 的 CanvasRenderingContext2D.translate() 方法对当前网格添加平移变换的方法。

+Canvas 2D API 的 **`CanvasRenderingContext2D.translate()`** 方法对当前网格添加平移变换的方法。 -

语法

+## 语法 -
void ctx.translate(x, y);
-
+``` +void ctx.translate(x, y); +``` -

translate() 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行平移变换

+`translate()` 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行**平移变换** -

+![](canvas_grid_translate.png) -

参数

+### 参数 -
-
x
-
水平方向的移动距离。
-
y
-
垂直方向的移动距离。
-
+- `x` + - : 水平方向的移动距离。 +- y + - : 垂直方向的移动距离。 -

示例

+## 示例 -

使用 translate 方法

+### 使用 `translate` 方法 -

这是一段使用 translate 方法的简单的代码片段。

+这是一段使用 `translate` 方法的简单的代码片段。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.translate(50, 50);
@@ -45,25 +46,24 @@ ctx.fillRect(0,0,100,100);
 
 // reset current transformation matrix to the identity matrix
 ctx.setTransform(1, 0, 0, 1, 0, 0);
-
+``` -

修改下面的代码并在线查看 canvas 的变化：

+修改下面的代码并在线查看 canvas 的变化： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+{{ EmbedLiveSample('Playable_code', 700, 360) }} -

规范描述

+## 规范描述 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CanvasRenderingContext2D.translate")}} -

参见

+## 参见 -
    -
  • 接口定义， {{domxref("CanvasRenderingContext2D")}}
    • -
+- 接口定义， {{domxref("CanvasRenderingContext2D")}} diff --git a/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md index e80ed9478980f4..82a8b5f9da0f76 100644 --- a/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md +++ b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.md @@ -2,39 +2,38 @@ title: 使用 channel messaging slug: Web/API/Channel_Messaging_API/Using_channel_messaging --- -

{{DefaultAPISidebar("Channel Messaging API")}}

+{{DefaultAPISidebar("Channel Messaging API")}} -

Channel Messaging API 可以让运行在不同浏览器上下文中的独立脚本，连接到同一份文档（比如：两个 IFrame, 或者主文档和一个 IFrame, 或者使用同一个 {{domxref("SharedWorker")}} 的两份文档），并直接通信，通过每端一个 port 的双向频道（或管道）在两者之间传递消息。

+[Channel Messaging API](/zh-CN/docs/Web/API/Channel_Messaging_API) 可以让运行在不同浏览器上下文中的独立脚本，连接到同一份文档（比如：两个 IFrame, 或者主文档和一个 IFrame, 或者使用同一个 {{domxref("SharedWorker")}} 的两份文档），并直接通信，通过每端一个 port 的双向频道（或管道）在两者之间传递消息。 -

在文本中，我们将探索这项技术的基本用法。

+在文本中，我们将探索这项技术的基本用法。 -

{{AvailableInWorkers}}

+{{AvailableInWorkers}} -

用例

+## 用例 -

Channel messaging 在这样的场景中特别有用：假如你有一个社交站点，它在主界面中通过 IFrame 内嵌了来自其他站点的内容，比如游戏，通讯录或者一个音乐播放器，有着个性化的音乐选择。当这些内容作为独立的单元时，一切都是 OK 的，但是当你想在主站点和 IFrame, 或者在不同的 IFrame 中交互时，困难就出现了。举例来说，假如你想从主站点向通讯录里添加一个联系人；或者想从游戏里，把最高分加入到个人资料；又或者，希望从音频播放器里，添加新的背景音乐到游戏中？因为浏览器使用的安全模型，使用传统的 web 技术来做这些事并不容易。你必须去考虑不同的源之间彼此是否信任，以及如何传递消息。

+Channel messaging 在这样的场景中特别有用：假如你有一个社交站点，它在主界面中通过 IFrame 内嵌了来自其他站点的内容，比如游戏，通讯录或者一个音乐播放器，有着个性化的音乐选择。当这些内容作为独立的单元时，一切都是 OK 的，但是当你想在主站点和 IFrame, 或者在不同的 IFrame 中交互时，困难就出现了。举例来说，假如你想从主站点向通讯录里添加一个联系人；或者想从游戏里，把最高分加入到个人资料；又或者，希望从音频播放器里，添加新的背景音乐到游戏中？因为浏览器使用的安全模型，使用传统的 web 技术来做这些事并不容易。你必须去考虑不同的源之间彼此是否信任，以及如何传递消息。 -

换个角度说，Message Channels 可以提供一个安全的通道让你在不同的浏览器上下文间传递数据。

+换个角度说，Message Channels 可以提供一个安全的通道让你在不同的浏览器上下文间传递数据。 -
-

提示: 要了解更多信息和思考，规范的 Ports 作为 Web 上一个对象兼容模型的基础 章节值得一读。

-
+> **备注：** 要了解更多信息和思考，规范的 [Ports 作为 Web 上一个对象兼容模型的基础](https://html.spec.whatwg.org/multipage/comms.html#ports-as-the-basis-of-an-object-capability-model-on-the-web) 章节值得一读。 -

简单的例子

+## 简单的例子 -

为了帮助你开始，我们在 Github 上传了一些 demo. 一开始可以先看我们的 channel messaging 基本示例 (也可以在线运行)，它展示了一个非常简单的消息传递，发生在页面和内嵌 {{htmlelement("iframe")}} 之间。

+为了帮助你开始，我们在 Github 上传了一些 demo. 一开始可以先看我们的 [channel messaging 基本示例](https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic) ([也可以在线运行](https://mdn.github.io/dom-examples/channel-messaging-basic/))，它展示了一个非常简单的消息传递，发生在页面和内嵌 {{htmlelement("iframe")}} 之间。 -

然后，看看我们的 multimessaging demo (在线运行)，它展示了一个稍微复杂一点的例子，可以在主页面和 IFrame 之间发送多条消息。

+然后，看看我们的 [multimessaging demo](https://github.com/mdn/dom-examples/tree/master/channel-messaging-multimessage) ([在线运行](https://mdn.github.io/dom-examples/channel-messaging-multimessage/))，它展示了一个稍微复杂一点的例子，可以在主页面和 IFrame 之间发送多条消息。 -

本文中，我们重点说后面的这个例子。它看起来像是这样：

+本文中，我们重点说后面的这个例子。它看起来像是这样： -

+![](channel-messaging-demo.png) -

创建 channel

+## 创建 channel -

在例子的主页面，我们有一个简单的表单，内含一个文本输入框，用来输入要发送到 {{htmlelement("iframe")}} 的消息。我们还有一个段落，我们在稍后将会用它来显示 {{htmlelement("iframe")}} 回传回来的确认消息。

+在例子的主页面，我们有一个简单的表单，内含一个文本输入框，用来输入要发送到 {{htmlelement("iframe")}} 的消息。我们还有一个段落，我们在稍后将会用它来显示 {{htmlelement("iframe")}} 回传回来的确认消息。 -
var input = document.getElementById('message-input');
+```js
+var input = document.getElementById('message-input');
 var output = document.getElementById('message-output');
 var button = document.querySelector('button');
 var iframe = document.querySelector('iframe');
@@ -66,27 +65,27 @@ function onClick(e) {
 function onMessage(e) {
   output.innerHTML = e.data;
   input.value = '';
-}
+} +``` -

我们从使用 {{domxref( "MessageChannel.MessageChannel","MessageChannel()")}} 构造函数创建了一个 message channel 开始。

+我们从使用 {{domxref( "MessageChannel.MessageChannel","MessageChannel()")}} 构造函数创建了一个 message channel 开始。 -

当 IFrame 加载完成，我们在按钮上注册了onclick 事件处理函数，在 {{domxref("MessageChannel.port1")}} 注册了 onmessage 事件处理函数。最后，我们使用 {{domxref("window.postMessage")}} 方法把 {{domxref("MessageChannel.port2")}} 传给 IFrame.

+当 IFrame 加载完成，我们在按钮上注册了`onclick` 事件处理函数，在 {{domxref("MessageChannel.port1")}} 注册了 `onmessage` 事件处理函数。最后，我们使用 {{domxref("window.postMessage")}} 方法把 {{domxref("MessageChannel.port2")}} 传给 IFrame. -

让我们来了解一下 iframe.contentWindow.postMessage 更多的工作细节。它接受三个参数：

+让我们来了解一下 `iframe.contentWindow.postMessage` 更多的工作细节。它接受三个参数： -
    -
  1. 被发送的消息。对于一开始的 port 传递，这个消息可以是个空字符串，但是在例子里，我们传了 'init'.
    2. -
  2. 消息将被发送到的源（origin）。 * 意思是 "任何源".
    3. -
  3. 一个对象，它的所有权会被传给接受的浏览器上下文。在本例中，我们把 {{domxref("MessageChannel.port2")}} 传给了 IFrame, 然后它就可以用于与主页面通信了。
    4. -
+1. 被发送的消息。对于一开始的 port 传递，这个消息可以是个空字符串，但是在例子里，我们传了 `'init'`. +2. 消息将被发送到的源（origin）。 `*` 意思是 "任何源". +3. 一个对象，它的所有权会被传给接受的浏览器上下文。在本例中，我们把 {{domxref("MessageChannel.port2")}} 传给了 IFrame, 然后它就可以用于与主页面通信了。 -

当我们的按钮被点击时，我们阻止了默认的表单提交，然后把输入到输入框里的内容通过 {{domxref("MessageChannel")}} 发送给 IFrame.

+当我们的按钮被点击时，我们阻止了默认的表单提交，然后把输入到输入框里的内容通过 {{domxref("MessageChannel")}} 发送给 IFrame. -

在 IFrame 里接收 port 和消息

+## 在 IFrame 里接收 port 和消息 -

在 IFrame 里，我们有下面的 JavaScript:

+在 IFrame 里，我们有下面的 JavaScript: -
var list = document.querySelector('ul');
+```js
+var list = document.querySelector('ul');
 var port2;
 
 // 监听初始的 port 传递消息
@@ -105,44 +104,44 @@ function onMessage(e) {
   list.appendChild(listItem);
   port2.postMessage('Message received by IFrame: "' + e.data + '"');
 }
-
+``` -

当收到从主页面通过 {{domxref("window.postMessage")}} 方法传来的初始化消息时，我们运行 initPort 函数。它会保存传来的 port, 并且注册了一个 onmessage 事件处理器，每当有消息通过我们的 {{domxref("MessageChannel")}} 传来时，它都会被调用。

+当收到从主页面通过 {{domxref("window.postMessage")}} 方法传来的初始化消息时，我们运行 `initPort` 函数。它会保存传来的 port, 并且注册了一个 onmessage 事件处理器，每当有消息通过我们的 {{domxref("MessageChannel")}} 传来时，它都会被调用。 -

当收到从主页面发来的消息时，我们创建一个列表项，并把它插入到这个无序列表中，然后把这个列表项的 {{domxref("Node.textContent","textContent")}} 设置为事件的 data 属性（里面包含真正的消息）。

+当收到从主页面发来的消息时，我们创建一个列表项，并把它插入到这个无序列表中，然后把这个列表项的 {{domxref("Node.textContent","textContent")}} 设置为事件的 `data` 属性（里面包含真正的消息）。 -

然后，我们通过在初始化时传到 IFrame 的 {{domxref("MessageChannel.port2")}} 上调用 {{domxref("MessagePort.postMessage")}} 来使用 message channel 发送一个确认消息给主页面。

+然后，我们通过在初始化时传到 IFrame 的 {{domxref("MessageChannel.port2")}} 上调用 {{domxref("MessagePort.postMessage")}} 来使用 message channel 发送一个确认消息给主页面。 -

在主页面中接收确认消息

+## 在主页面中接收确认消息 -

回到主页面，我们来一起看看 onmessage 事件处理函数。

+回到主页面，我们来一起看看 onmessage 事件处理函数。 -
// 处理 port1 上收到的消息
+```js
+// 处理 port1 上收到的消息
 function onMessage(e) {
   output.innerHTML = e.data;
   input.value = '';
-}
+} +``` -

当收到从 IFrame 发来的确认消息，说明原始消息被成功接收时，它把确认消息输出到段落中，并清空输入框，为输入下一个要被发送的消息做准备。

+当收到从 IFrame 发来的确认消息，说明原始消息被成功接收时，它把确认消息输出到段落中，并清空输入框，为输入下一个要被发送的消息做准备。 -

规范

+## 规范 {{Specifications("api.MessageChannel")}} -

浏览器兼容性

+## 浏览器兼容性 -

MessageChannel

+### `MessageChannel` -

{{Compat("api.MessageChannel", 0)}}

+{{Compat("api.MessageChannel", 0)}} -

MessagePort

+### `MessagePort` -

{{Compat("api.MessagePort", 0)}}

+{{Compat("api.MessagePort", 0)}} -

参见

+## 参见 - +- [Channel Messaging API](/zh-CN/docs/Web/API/Channel_Messaging_API) +- [Web Workers API](/zh-CN/docs/Web/API/Web_Workers_API) +- [Broadcast Channel API](/zh-CN/docs/Web/API/Broadcast_Channel_API) diff --git a/files/zh-cn/web/api/channelmergernode/index.md b/files/zh-cn/web/api/channelmergernode/index.md index f23d4a1636cb60..a7af644ac5781c 100644 --- a/files/zh-cn/web/api/channelmergernode/index.md +++ b/files/zh-cn/web/api/channelmergernode/index.md @@ -2,74 +2,66 @@ title: ChannelMergerNode slug: Web/API/ChannelMergerNode --- -

{{APIRef("Web Audio API")}}

+{{APIRef("Web Audio API")}} -

ChannelMergerNode 接口，经常与其对应的 {{domxref("ChannelSplitterNode")}} 接口一起使用，将不同的单声道输入重新组合成单个输出。每个输入用于填充输出的一个通道。这对于分别访问每个通道非常有用，例如，执行通道混合时，必须在每个信道上单独控制增益。

+`ChannelMergerNode` 接口，经常与其对应的 {{domxref("ChannelSplitterNode")}} 接口一起使用，将不同的单声道输入重新组合成单个输出。每个输入用于填充输出的一个通道。这对于分别访问每个通道非常有用，例如，执行通道混合时，必须在每个信道上单独控制增益。 -

+![](webaudiomerger.png) -

如果 ChannelMergerNode 用于一个单一输出，但输入数量与用于合并的信道数量相同；输入的数量被定义为其构造函数的参数及对 {{domxref("AudioContext.createChannelMerger")}} 的调用。 如果没有给出值，则为默认值 6。

+如果 `ChannelMergerNode` 用于一个单一输出，但输入数量与用于合并的信道数量相同；输入的数量被定义为其构造函数的参数及对 {{domxref("AudioContext.createChannelMerger")}} 的调用。 如果没有给出值，则为默认值 `6`。 -

使用 ChannelMergerNode，可以创建比渲染硬件能处理的更多的通道输出。在这种情况下，当信号发送至 {{domxref("AudioContext.listener")}} 对象时，额外的信道将被忽略。

+使用 `ChannelMergerNode`，可以创建比渲染硬件能处理的更多的通道输出。在这种情况下，当信号发送至 {{domxref("AudioContext.listener")}} 对象时，额外的信道将被忽略。 - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
输入数量变量; 默认为 6.
输出数量1
通道计数模式"max"
通道数量2 (不在默认计数模式下使用)
频道解释"speakers"
输入数量变量; 默认为 6.
输出数量1
通道计数模式"max"
通道数量2 (不在默认计数模式下使用)
频道解释"speakers"
-

构造函数

+## 构造函数 -
-
{{domxref("ChannelMergerNode.ChannelMergerNode()", "ChannelMergerNode()")}}
-
生成一个新的 ChannelMergerNode 对象实例。
-
+- {{domxref("ChannelMergerNode.ChannelMergerNode()", "ChannelMergerNode()")}} + - : 生成一个新的 `ChannelMergerNode` 对象实例。 -

属性

+## 属性 -

没有具体属性；从其父级继承属性， {{domxref("AudioNode")}}。

+_没有具体属性；从其父级继承属性，_ _{{domxref("AudioNode")}}。_ -

方法

+## 方法 -

没具体方法; 从其父级继承方法, {{domxref("AudioNode")}}。

+_没具体方法; 从其父级继承方法,_ _{{domxref("AudioNode")}}。_ -

例子

+## 例子 -

{{page("/zh-CN/docs/Web/API/AudioContext/createChannelMerger","（举个）栗（例）子")}}

+{{page("/zh-CN/docs/Web/API/AudioContext/createChannelMerger","（举个）栗（例）子")}} -

规格

+## 规格 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -
+{{Compat("api.ChannelMergerNode")}} +## 参见 -

{{Compat("api.ChannelMergerNode")}}

-
- -

参见

- - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/characterdata/index.md b/files/zh-cn/web/api/characterdata/index.md index 8039b0c47dcbc1..4c3359039067c8 100644 --- a/files/zh-cn/web/api/characterdata/index.md +++ b/files/zh-cn/web/api/characterdata/index.md @@ -2,54 +2,48 @@ title: CharacterData slug: Web/API/CharacterData --- -

{{APIRef("DOM")}}

- -

CharacterData 抽象接口（abstract interface）代表 {{domxref("Node")}} 对象包含的字符。这是一个抽象接口，意味着没有 CharacterData 类型的对象。 它是在其他接口中被实现的，如 {{domxref("Text")}}、{{domxref("Comment")}} 或 {{domxref("ProcessingInstruction")}} 这些非抽象接口。

- -

属性

- -

从其父级 {{domxref("Node")}} 继承属性，并且实现了 {{domxref("ChildNode")}} 和 {{domxref("NonDocumentTypeChildNode")}} 接口。

- -
-
{{domxref("CharacterData.data")}}
-
一个 {{domxref("DOMString")}}，表示该对象中包含的文本数据。
-
{{domxref("CharacterData.length")}} {{readonlyInline}}
-
返回一个 unsigned long 的表示 CharacterData.data 包含的字符串的大小。
-
{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
-
返回其父节点所在的子节点列表（children list）中紧跟着的元素节点 {{domxref("Element")}}，或者 null。
-
{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
-
返回其父节点所在的子节点列表（children list）中前一个元素节点 {{domxref("Element")}}，或者 null。
-
- -

方法

- -

从其父级 {{domxref("Node")}} 继承方法，并且实现了 {{domxref("ChildNode")}} 和{{domxref("NonDocumentTypeChildNode")}} 接口。

- -
-
{{domxref("CharacterData.appendData()")}}
-
为 CharacterData.data 字符串追加指定的 {{domxref("DOMString")}} ；当方法返回时，data 包含的是已合并的 {{domxref("DOMString")}}.
-
{{domxref("CharacterData.deleteData()")}}
-
在 CharacterData.data 字符串中，从指定位置开始，删除指定数量的字符；当方法返回时，data 包含的是缩短了的 {{domxref("DOMString")}}.
-
{{domxref("CharacterData.insertData()")}}
-
在 CharacterData.data 字符串中，在指定的位置，插入指定的字符；当方法返回时，data 包含的是已修改的 {{domxref("DOMString")}}.
-
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
-
把对象从其父节点的children list中删除。
-
{{domxref("CharacterData.replaceData()")}}
-
在 CharacterData.data 字符串中，从指定位置开始，把指定数量的字符替换为指定的 {{domxref("DOMString")}}; 当方法返回时, data 包含的是已修改的 {{domxref("DOMString")}}.
-
{{domxref("CharacterData.substringData()")}}
-
返回一个包含了从 CharacterData.data 中的指定位置开始，指定长度的 {{domxref("DOMString")}} 。
-
- -

规范

+{{APIRef("DOM")}} + +**`CharacterData`** 抽象接口（abstract interface）代表 {{domxref("Node")}} 对象包含的字符。这是一个抽象接口，意味着没有 `CharacterData` 类型的对象。 它是在其他接口中被实现的，如 {{domxref("Text")}}、{{domxref("Comment")}} 或 {{domxref("ProcessingInstruction")}} 这些非抽象接口。 + +## 属性 + +_从其父级 {{domxref("Node")}} 继承属性，并且实现了 {{domxref("ChildNode")}} 和 {{domxref("NonDocumentTypeChildNode")}} 接口。_ + +- {{domxref("CharacterData.data")}} + - : 一个 {{domxref("DOMString")}}，表示该对象中包含的文本数据。 +- {{domxref("CharacterData.length")}} {{readonlyInline}} + - : 返回一个 `unsigned long` 的表示 `CharacterData.data` 包含的字符串的大小。 +- {{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}} + - : 返回其父节点所在的子节点列表（children list）中紧跟着的元素节点 {{domxref("Element")}}，或者 `null`。 +- {{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}} + - : 返回其父节点所在的子节点列表（children list）中前一个元素节点 {{domxref("Element")}}，或者 `null`。 + +## 方法 + +_从其父级 {{domxref("Node")}} 继承方法，并且实现了 {{domxref("ChildNode")}} 和_{{domxref("NonDocumentTypeChildNode")}} 接口。 + +- {{domxref("CharacterData.appendData()")}} + - : 为 `CharacterData.data `字符串追加指定的 {{domxref("DOMString")}} ；当方法返回时，`data` 包含的是已合并的 {{domxref("DOMString")}}. +- {{domxref("CharacterData.deleteData()")}} + - : 在 `CharacterData.data `字符串中，从指定位置开始，删除指定数量的字符；当方法返回时，`data `包含的是缩短了的 {{domxref("DOMString")}}. +- {{domxref("CharacterData.insertData()")}} + - : 在 `CharacterData.data `字符串中，在指定的位置，插入指定的字符；当方法返回时，`data` 包含的是已修改的 {{domxref("DOMString")}}. +- {{domxref("ChildNode.remove()")}} {{experimental_inline}} + - : 把对象从其父节点的 children list 中删除。 +- {{domxref("CharacterData.replaceData()")}} + - : 在 `CharacterData.data `字符串中，从指定位置开始，把指定数量的字符替换为指定的 {{domxref("DOMString")}}; 当方法返回时, `data` 包含的是已修改的 {{domxref("DOMString")}}. +- {{domxref("CharacterData.substringData()")}} + - : 返回一个包含了从` CharacterData.data `中的指定位置开始，指定长度的` `{{domxref("DOMString")}} 。 + +## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.CharacterData")}} -

相关链接

+## 相关链接 - +- [The DOM interfaces index](/zh-CN/docs/DOM/DOM_Reference). diff --git a/files/zh-cn/web/api/clipboard/write/index.md b/files/zh-cn/web/api/clipboard/write/index.md index a9b92067b2d27f..901fbd48f00db3 100644 --- a/files/zh-cn/web/api/clipboard/write/index.md +++ b/files/zh-cn/web/api/clipboard/write/index.md @@ -2,42 +2,35 @@ title: Clipboard.write() slug: Web/API/Clipboard/write --- -

{{APIRef("Clipboard API")}}

+{{APIRef("Clipboard API")}} -
+{{domxref("Clipboard")}} 的方法 **`write()`** 写入图片等任意的数据到剪贴板。 这个方法可以用于实现剪切和复制的功能。 -

+但是你要提前获取 "[Permissions API](/zh-CN/docs/Web/API/Permissions_API)" 的 `"clipboard-write"` 权限才能将数据写入到剪贴板。 -
+> **备注：** 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查 [浏览器兼容性](#浏览器兼容性) 和 {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} 以获得更多的兼容性信息。 -

{{domxref("Clipboard")}} 的方法 write() 写入图片等任意的数据到剪贴板。 这个方法可以用于实现剪切和复制的功能。

+## 语法 -

但是你要提前获取 "Permissions API" 的 "clipboard-write" 权限才能将数据写入到剪贴板。

+``` +var promise = navigator.clipboard.write(dataTransfer) +``` -
-

注意： 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查 浏览器兼容性 和 {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} 以获得更多的兼容性信息。

-
+### 参数 -

语法

+- `dataTransfer` + - : {{domxref("DataTransfer")}} 对象包含了要写入剪贴板的数据。 -
var promise = navigator.clipboard.write(dataTransfer)
+### 返回值 -

参数

+当数据被写入到剪贴板的时候，{{jsxref("Promise")}} resolve 回调被执行。如果剪贴板不能完成剪贴操作，{{jsxref("Promise")}} reject 回调被执行。 -
-
dataTransfer
-
{{domxref("DataTransfer")}} 对象包含了要写入剪贴板的数据。
-
+## 示例 -

返回值

+这个例子展示了如何将当前剪贴板的内容替换为给定的内容。 -

当数据被写入到剪贴板的时候，{{jsxref("Promise")}} resolve 回调被执行。如果剪贴板不能完成剪贴操作，{{jsxref("Promise")}} reject 回调被执行。

- -

示例

- -

这个例子展示了如何将当前剪贴板的内容替换为给定的内容。

- -
function setClipboard(text) {
+```js
+function setClipboard(text) {
   let data = new DataTransfer();
 
   data.items.add("text/plain", text);
@@ -47,16 +40,14 @@ slug: Web/API/Clipboard/write
     /* failure */
   });
 }
-
+``` -

代码创建了一个 {{domxref("DataTransfer")}} 对象，要替换的内容存储在这里。执行 {{domxref("DataTransferItemList.add()")}} 将数据写入进去，然后执行 write() 方法，指定执行成功或错误的结果。

+代码创建了一个 {{domxref("DataTransfer")}} 对象，要替换的内容存储在这里。执行 {{domxref("DataTransferItemList.add()")}} 将数据写入进去，然后执行 `write()` 方法，指定执行成功或错误的结果。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.Clipboard.write")}}

+{{Compat("api.Clipboard.write")}} diff --git a/files/zh-cn/web/api/clipboardevent/clipboarddata/index.md b/files/zh-cn/web/api/clipboardevent/clipboarddata/index.md index ff249a7efddd87..dc99f7e89ab669 100644 --- a/files/zh-cn/web/api/clipboardevent/clipboarddata/index.md +++ b/files/zh-cn/web/api/clipboardevent/clipboarddata/index.md @@ -2,34 +2,30 @@ title: ClipboardEvent.clipboardData slug: Web/API/ClipboardEvent/clipboardData --- -

{{ apiref("Clipboard API") }} {{SeeCompatTable}}

+{{ apiref("Clipboard API") }} {{SeeCompatTable}} -

ClipboardEvent.clipboardData 属性保存了一个 {{domxref("DataTransfer")}} 对象，这个对象可用于：

+**`ClipboardEvent.clipboardData`** 属性保存了一个 {{domxref("DataTransfer")}} 对象，这个对象可用于： -
    -
  • 描述哪些数据可以由 {{event("cut")}} 和 {{event("copy")}} 事件处理器放入剪切板，通常通过调用 {{domxref("DataTransfer.setData", "setData(format, data)")}} 方法；
    • -
  • 获取由 {{event("paste")}} 事件处理器拷贝进剪切板的数据，通常通过调用 {{domxref("DataTransfer.getData", "getData(format)")}} 方法
    • -
+- 描述哪些数据可以由 {{event("cut")}} 和 {{event("copy")}} 事件处理器放入剪切板，通常通过调用 {{domxref("DataTransfer.setData", "setData(format, data)")}} 方法； +- 获取由 {{event("paste")}} 事件处理器拷贝进剪切板的数据，通常通过调用 {{domxref("DataTransfer.getData", "getData(format)")}} 方法 -

参见 {{event("cut")}} 、{{event("copy")}} 和 {{event("paste")}} 事件的文档以获取更多信息。

+参见 {{event("cut")}} 、{{event("copy")}} 和 {{event("paste")}} 事件的文档以获取更多信息。 -

语法

+## 语法 -
data = ClipboardEvent.clipboardData
+``` +data = ClipboardEvent.clipboardData +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.ClipboardEvent.clipboardData")}}

+{{Compat("api.ClipboardEvent.clipboardData")}} -

相关链接

+## 相关链接 -
- -
    -
  • 与复制相关的事件：{{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • -
  • 本对象所属的{{domxref("ClipboardEvent")}}接口。
    • -
+- 与复制相关的事件：{{event("copy")}}, {{event("cut")}}, {{event("paste")}} +- 本对象所属的{{domxref("ClipboardEvent")}}接口。 diff --git a/files/zh-cn/web/api/clipboardevent/clipboardevent/index.md b/files/zh-cn/web/api/clipboardevent/clipboardevent/index.md index 3c2f42b680647e..efb80d168d2c8c 100644 --- a/files/zh-cn/web/api/clipboardevent/clipboardevent/index.md +++ b/files/zh-cn/web/api/clipboardevent/clipboardevent/index.md @@ -2,44 +2,39 @@ title: ClipboardEvent() slug: Web/API/ClipboardEvent/ClipboardEvent --- -

{{APIRef("Clipboard API")}}{{SeeCompatTable}}

+{{APIRef("Clipboard API")}}{{SeeCompatTable}} -

ClipboardEvent() 构造函数返回一个新建的 {{domxref("ClipboardEvent")}} 对象，这个对象表示与修改剪切板相关的事件，这些事件包括 {{event("cut")}} 、 {{event("copy")}} 和 {{event("paste")}} 事件。

+**`ClipboardEvent()`** 构造函数返回一个新建的 {{domxref("ClipboardEvent")}} 对象，这个对象表示与修改剪切板相关的事件，这些事件包括 {{event("cut")}} 、 {{event("copy")}} 和 {{event("paste")}} 事件。 -

语法

+## 语法 -
var clipboardEvent = new ClipboardEvent(type[, options]);
+``` +var clipboardEvent = new ClipboardEvent(type[, options]); +``` -

参数

+### 参数 -

ClipboardEvent() 构造函数也从 {{domxref("Event.Event", "Event()")}} 继承参数。

+_`ClipboardEvent()` 构造函数也从_ _{{domxref("Event.Event", "Event()")}}_ _继承参数。_ -
-
type
-
一个 {{domxref("DOMString")}} 字符串，描述了 ClipboardEvent 事件类型的名字，大小写敏感，可以是：'copy'、 'cut'或者 'paste'。
-
options {{optional_inline}}
-
选项如下： -
    -
  • clipboardData: 一个 {{domxref("DataTransfer")}} containing the data concerned by the clipboard event.
    • -
  • dataType{{non-standard_inline}}: A {{domxref("DOMString")}} containing the MIME-type of the data contained in the data argument.
    • -
  • data{{non-standard_inline}}: A {{domxref("DOMString")}} containing the data concerned by the clipboard event.
    • -
-
-
+- _type_ + - : 一个 {{domxref("DOMString")}} 字符串，描述了 `ClipboardEvent` 事件类型的名字，大小写敏感，可以是：`'copy'`、 `'cut'`或者 `'paste'`。 +- _options_ **{{optional_inline}}** -

规范

+ - : 选项如下： -{{Specifications}} + - `clipboardData`: 一个 {{domxref("DataTransfer")}} containing the data concerned by the clipboard event. + - `dataType`{{non-standard_inline}}: A {{domxref("DOMString")}} containing the MIME-type of the data contained in the `data` argument. + - `data`{{non-standard_inline}}: A {{domxref("DOMString")}} containing the data concerned by the clipboard event. + +## 规范 -

浏览器兼容性

+{{Specifications}} -

{{Compat("api.ClipboardEvent.ClipboardEvent")}}

+## 浏览器兼容性 -

相关链接

+{{Compat("api.ClipboardEvent.ClipboardEvent")}} -
+## 相关链接 -
    -
  • 与复制相关的事件：{{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • -
  • 所属的 {{domxref("ClipboardEvent")}} 接口。
    • -
+- 与复制相关的事件：{{event("copy")}}, {{event("cut")}}, {{event("paste")}} +- 所属的 {{domxref("ClipboardEvent")}} 接口。 diff --git a/files/zh-cn/web/api/clipboarditem/index.md b/files/zh-cn/web/api/clipboarditem/index.md index 23957f7001ea0f..f0af5d2b7fbf07 100644 --- a/files/zh-cn/web/api/clipboarditem/index.md +++ b/files/zh-cn/web/api/clipboarditem/index.md @@ -2,54 +2,45 @@ title: ClipboardItem slug: Web/API/ClipboardItem --- -
{{DefaultAPISidebar("Clipboard API")}}
+{{DefaultAPISidebar("Clipboard API")}} -

The ClipboardItem interface of the {{domxref('Clipboard API')}} represents a single item format, used when reading or writing data via the {{domxref('Clipboard API')}}. That is {{domxref("clipboard.read()")}} and {{domxref("clipboard.write()")}} respectively.

+The **`ClipboardItem`** interface of the {{domxref('Clipboard API')}} represents a single item format, used when reading or writing data via the {{domxref('Clipboard API')}}. That is {{domxref("clipboard.read()")}} and {{domxref("clipboard.write()")}} respectively. -

The benefit of having the ClipboardItem interface to represent data, is that it enables developers to cope with the varying scope of file types and data easily.

+The benefit of having the **`ClipboardItem`** interface to represent data, is that it enables developers to cope with the varying scope of file types and data easily. -

Access to the contents of the clipboard is gated behind the Permissions API: The clipboard-write permission is granted automatically to pages when they are in the active tab. The clipboard-read permission must be requested, which you can do by trying to read data from the clipboard.

+Access to the contents of the clipboard is gated behind the [Permissions API](/zh-CN/docs/Web/API/Permissions_API): The `clipboard-write` permission is granted automatically to pages when they are in the active tab. The `clipboard-read` permission must be requested, which you can do by trying to read data from the clipboard. -
-

Note: To work with text see the {{domxref("Clipboard.readText()")}} and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}} interface.

-
+> **备注：** To work with text see the {{domxref("Clipboard.readText()")}} and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}} interface. -
-

Note: You can only pass in one clipboard item at a time.

-
+> **备注：** You can only pass in one clipboard item at a time. -

Constructor

+## Constructor -
-
{{domxref("ClipboardItem.ClipboardItem()")}}
-
Creates a new ClipboardItem object, with the {{Glossary("MIME type")}} as the key and {{domxref("Blob")}} as the value
-
+- {{domxref("ClipboardItem.ClipboardItem()")}} + - : Creates a new **`ClipboardItem`** object, with the {{Glossary("MIME type")}} as the key and {{domxref("Blob")}} as the value -

Properties

+## Properties -

This interface provides the following properties.

+_This interface provides the following properties._ -
-
{{domxref("ClipboardItem.types", "types")}} {{ReadOnlyInline}}
-
Returns an {{jsxref("Array")}} of MIME types available within the ClipboardItem.
-
+- {{domxref("ClipboardItem.types", "types")}} {{ReadOnlyInline}} + - : Returns an {{jsxref("Array")}} of MIME types available within the **`ClipboardItem`**. -

Methods

+## Methods -

This interface defines the following methods.

+_This interface defines the following methods._ -
-
{{domxref("ClipboardItem.getType", "getType()")}}
-
Returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested {{Glossary("MIME type")}}, or an error if the MIME type is not found.
-
+- {{domxref("ClipboardItem.getType", "getType()")}} + - : Returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested {{Glossary("MIME type")}}, or an error if the MIME type is not found. -

Examples

+## Examples -

Writing To Clipboard

+### Writing To Clipboard -

Here we're writing a new {{domxref("ClipboardItem.ClipboardItem()")}} to the {{domxref("Clipboard API", "clipboard")}} by requesting a png image using the {{domxref("Fetch API")}}, and in turn, the {{domxref("Body.blob()", "responses' blob()")}} method, to create the new {{domxref("ClipboardItem")}}.

+Here we're writing a new {{domxref("ClipboardItem.ClipboardItem()")}} to the {{domxref("Clipboard API", "clipboard")}} by requesting a png image using the {{domxref("Fetch API")}}, and in turn, the {{domxref("Body.blob()", "responses' blob()")}} method, to create the new {{domxref("ClipboardItem")}}. -
async function writeClipImg() {
+```js
+async function writeClipImg() {
   try {
     const imgURL = '/myimage.png';
     const data = await fetch(imgURL);
@@ -65,13 +56,14 @@ slug: Web/API/ClipboardItem
     console.error(err.name, err.message);
   }
 }
-
+``` -

Reading From The Clipboard

+### Reading From The Clipboard -

Here we're returning all items on the clipboard via the {{domxref("clipboard.read()")}} method. Then utilizing the {{domxref("ClipboardItem.types")}} property to set the {{domxref("ClipboardItem.getType", "getType()")}} argument and return the corresponding blob object.

+Here we're returning all items on the clipboard via the {{domxref("clipboard.read()")}} method. Then utilizing the {{domxref("ClipboardItem.types")}} property to set the {{domxref("ClipboardItem.getType", "getType()")}} argument and return the corresponding blob object. -
async function getClipboardContents() {
+```js
+async function getClipboardContents() {
   try {
     const clipboardItems = await navigator.clipboard.read();
 
@@ -88,26 +80,20 @@ slug: Web/API/ClipboardItem
     console.error(err.name, err.message);
   }
 }
-
+``` -

Specifications

+## Specifications {{Specifications}} -

Browser compatibility

+## Browser compatibility +{{Compat("api.ClipboardItem")}} +> **备注：** Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface. -

{{Compat("api.ClipboardItem")}}

+## See also -
-

Note: Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface.

-
- -

See also

- - +- [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API) +- [Async Clipboard API demo on Glitch](https://async-clipboard-api.glitch.me/) +- [Image support for Async Clipboard article](https://web.dev/image-support-for-async-clipboard/) diff --git a/files/zh-cn/web/api/closeevent/index.md b/files/zh-cn/web/api/closeevent/index.md index a75f4f0315f2ce..b79974e01f9c1e 100644 --- a/files/zh-cn/web/api/closeevent/index.md +++ b/files/zh-cn/web/api/closeevent/index.md @@ -2,160 +2,63 @@ title: CloseEvent slug: Web/API/CloseEvent --- -

{{APIRef("Websockets API")}}

- -

CloseEvent 会在连接关闭时发送给使用 {{Glossary("WebSockets")}} 的客户端。它在 WebSocket 对象的 onclose 事件监听器中使用。

- -

构造器

- -
-
{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
-
创建一个 CloseEvent.
-
- -

属性

- -

该接口也继承了其父类 {{domxref("Event")}} 的属性。

- -
-
{{domxref("CloseEvent.code")}} {{readOnlyInline}}
-
返回一个 unsigned short 类型的数字，表示服务端发送的关闭码，以下为已分配的状态码。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
状态码?名称?描述
0–999保留段，未使用。
1000CLOSE_NORMAL正常关闭; 无论为何目的而创建，该链接都已成功完成任务。
1001CLOSE_GOING_AWAY终端离开，可能因为服务端错误，也可能因为浏览器正从打开连接的页面跳转离开。
1002CLOSE_PROTOCOL_ERROR由于协议错误而中断连接。
1003CLOSE_UNSUPPORTED由于接收到不允许的数据类型而断开连接 (如仅接收文本数据的终端接收到了二进制数据).
1004保留。 其意义可能会在未来定义。
1005CLOSE_NO_STATUS保留。 表示没有收到预期的状态码。
1006CLOSE_ABNORMAL保留。 用于期望收到状态码时连接非正常关闭 (也就是说，没有发送关闭帧).
1007Unsupported Data由于收到了格式不符的数据而断开连接 (如文本消息中包含了非 UTF-8 数据).
1008Policy Violation由于收到不符合约定的数据而断开连接。这是一个通用状态码，用于不适合使用 1003 和 1009 状态码的场景。
1009CLOSE_TOO_LARGE由于收到过大的数据帧而断开连接。
1010Missing Extension客户端期望服务器商定一个或多个拓展，但服务器没有处理，因此客户端断开连接。
1011Internal Error客户端由于遇到没有预料的情况阻止其完成请求，因此服务端断开连接。
1012Service Restart服务器由于重启而断开连接。[Ref]
1013Try Again Later服务器由于临时原因断开连接，如服务器过载因此断开一部分客户端连接。[Ref]
1014由 WebSocket 标准保留以便未来使用。
1015TLS Handshake保留。 表示连接由于无法完成 TLS 握手而关闭 (例如无法验证服务器证书).
1016–1999由 WebSocket 标准保留以便未来使用。
2000–2999由 WebSocket 拓展保留使用。
3000–3999?可以由库或框架使用.? 不应由应用使用。可以在 IANA 注册，先到先得。
4000–4999可以由应用使用。
-
-
{{domxref("CloseEvent.reason")}} {{readOnlyInline}}
-
返回一个 {{domxref("DOMString")}} 用以表示服务器关闭连接的原因。这是由服务器和子协议决定的。
-
{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
-
返回一个 {{jsxref("Boolean")}} 用以表示连接是否完全关闭。
-
- -

Methods

- -

该接口也继承了其父类 {{domxref("Event")}} 的属性。

- -
-
{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Deprecated_Inline}}
-
初始化创建的 CloseEvent 的值。如果该事件已经被处理，这个方法什么也不做。不要直接使用这个方法，使用 {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} ?构造器来代替。
-
- -

浏览器兼容性

+{{APIRef("Websockets API")}} + +`CloseEvent` 会在连接关闭时发送给使用 {{Glossary("WebSockets")}} 的客户端。它在 `WebSocket` `对象的` `onclose` 事件监听器中使用。 + +## 构造器 + +- {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} + - : 创建一个 `CloseEvent`. + +## 属性 + +_该接口也继承了其父类 {{domxref("Event")}} 的属性。_ + +- {{domxref("CloseEvent.code")}} {{readOnlyInline}} + + - : 返回一个 unsigned short 类型的数字，表示服务端发送的关闭码，以下为已分配的状态码。 + + | 状态码 | ?名称 | ?描述 | + | ------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | + | `0`–`999` | | **保留段，未使用。** | + | `1000` | `CLOSE_NORMAL` | 正常关闭; 无论为何目的而创建，该链接都已成功完成任务。 | + | `1001` | `CLOSE_GOING_AWAY` | 终端离开，可能因为服务端错误，也可能因为浏览器正从打开连接的页面跳转离开。 | + | `1002` | `CLOSE_PROTOCOL_ERROR` | 由于协议错误而中断连接。 | + | `1003` | `CLOSE_UNSUPPORTED` | 由于接收到不允许的数据类型而断开连接 (如仅接收文本数据的终端接收到了二进制数据). | + | `1004` | | **保留。** 其意义可能会在未来定义。 | + | `1005` | `CLOSE_NO_STATUS` | **保留。** 表示没有收到预期的状态码。 | + | `1006` | `CLOSE_ABNORMAL` | **保留。** 用于期望收到状态码时连接非正常关闭 (也就是说，没有发送关闭帧). | + | `1007` | Unsupported Data | 由于收到了格式不符的数据而断开连接 (如文本消息中包含了非 UTF-8 数据). | + | `1008` | Policy Violation | 由于收到不符合约定的数据而断开连接。这是一个通用状态码，用于不适合使用 1003 和 1009 状态码的场景。 | + | `1009` | `CLOSE_TOO_LARGE` | 由于收到过大的数据帧而断开连接。 | + | `1010` | Missing Extension | 客户端期望服务器商定一个或多个拓展，但服务器没有处理，因此客户端断开连接。 | + | `1011` | Internal Error | 客户端由于遇到没有预料的情况阻止其完成请求，因此服务端断开连接。 | + | `1012` | Service Restart | 服务器由于重启而断开连接。\[[Ref](https://www.ietf.org/mail-archive/web/hybi/current/msg09670.html)] | + | `1013` | Try Again Later | 服务器由于临时原因断开连接，如服务器过载因此断开一部分客户端连接。\[[Ref](https://www.ietf.org/mail-archive/web/hybi/current/msg09670.html)] | + | `1014` | | **由 WebSocket 标准保留以便未来使用。** | + | `1015` | TLS Handshake | **保留。** 表示连接由于无法完成 TLS 握手而关闭 (例如无法验证服务器证书). | + | `1016`–`1999` | | **由 WebSocket 标准保留以便未来使用。** | + | `2000`–`2999` | | **由 WebSocket 拓展保留使用。** | + | `3000`–`3999` | | ?可以由库或框架使用.? **不应**由应用使用。可以在 IANA 注册，先到先得。 | + | `4000`–`4999` | | 可以由应用使用。 | + +- {{domxref("CloseEvent.reason")}} {{readOnlyInline}} + - : 返回一个 {{domxref("DOMString")}} 用以表示服务器关闭连接的原因。这是由服务器和子协议决定的。 +- {{domxref("CloseEvent.wasClean")}} {{readOnlyInline}} + - : 返回一个 {{jsxref("Boolean")}} 用以表示连接是否完全关闭。 + +## Methods + +_该接口也继承了其父类 {{domxref("Event")}} 的属性。_ + +- {{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Deprecated_Inline}} + - : 初始化创建的 `CloseEvent` 的值。如果该事件已经被处理，这个方法什么也不做。不要直接使用这个方法，使用 {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} ?构造器来代替。 + +## 浏览器兼容性 {{Compat("api.CloseEvent")}} -

参考

+## 参考 - +- [`WebSocket`](/zh-CN/docs/Web/API/WebSocket) diff --git a/files/zh-cn/web/api/comment/comment/index.md b/files/zh-cn/web/api/comment/comment/index.md index bd656a57691374..89a686b3de728c 100644 --- a/files/zh-cn/web/api/comment/comment/index.md +++ b/files/zh-cn/web/api/comment/comment/index.md @@ -2,36 +2,33 @@ title: Comment() slug: Web/API/Comment/Comment --- -

{{ApiRef("DOM")}}{{seeCompatTable}}

+{{ApiRef("DOM")}}{{seeCompatTable}} -

构造函数 Comment() 创建一个 {{domxref("Comment")}} 对象并返回，这个对象以可选的 {{domxref("DOMString")}} 参数作为它的文本内容。

+构造函数 **`Comment()`** 创建一个 {{domxref("Comment")}} 对象并返回，这个对象以可选的 {{domxref("DOMString")}} 参数作为它的文本内容。 -

语法

+## 语法 -
comment1 = new Comment(); // Create an empty comment
-comment2 = new Comment("This is a comment");
-
+``` +comment1 = new Comment(); // Create an empty comment +comment2 = new Comment("This is a comment"); +``` -

示例

+## 示例 -
var comment = new Comment("Test");
+```js +var comment = new Comment("Test"); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 +{{Compat("api.Comment.Comment")}} +> **备注：** 对于不支持本构造函数的浏览器， {{domxref("Document.createComment()")}} 或许可以使用。 -

{{Compat("api.Comment.Comment")}}

+## 相关文档 -
-

提示：对于不支持本构造函数的浏览器， {{domxref("Document.createComment()")}} 或许可以使用。

-
- -

相关文档

- - +- [The DOM interfaces index](/zh-CN/docs/DOM/DOM_Reference) diff --git a/files/zh-cn/web/api/console/dir/index.md b/files/zh-cn/web/api/console/dir/index.md index e4b5aa350fd415..bc717a9ba9bc85 100644 --- a/files/zh-cn/web/api/console/dir/index.md +++ b/files/zh-cn/web/api/console/dir/index.md @@ -2,36 +2,31 @@ title: console.dir slug: Web/API/Console/dir --- -
{{APIRef("Console API")}}{{Non-standard_header}}
+{{APIRef("Console API")}}{{Non-standard_header}} -

在控制台中显示指定 JavaScript 对象的属性，并通过类似文件树样式的交互列表显示。

+在控制台中显示指定 JavaScript 对象的属性，并通过类似文件树样式的交互列表显示。 -

{{AvailableInWorkers}}

+{{AvailableInWorkers}} -

console-dir.png

+![console-dir.png](/@api/deki/files/6081/=console-dir.png) -

语法

+## 语法 -
console.dir(object);
-
+``` +console.dir(object); +``` -

参数

+## 参数 -
-
object
-
打印出该对象的所有属性和属性值。
-
+- `object` + - : 打印出该对象的所有属性和属性值。 -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.console.dir")}} -

相关链接

+## 相关链接 - - -

+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) +- [Chrome Console API reference](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject) diff --git a/files/zh-cn/web/api/console/error/index.md b/files/zh-cn/web/api/console/error/index.md index c1d333afc6a160..9855bffb0e69b7 100644 --- a/files/zh-cn/web/api/console/error/index.md +++ b/files/zh-cn/web/api/console/error/index.md @@ -2,49 +2,44 @@ title: Console.error() slug: Web/API/Console/error --- -
{{APIRef("Console API")}}
+{{APIRef("Console API")}} -

向 Web 控制台输出一条错误消息。

+向 Web 控制台输出一条错误消息。 -

{{AvailableInWorkers}}

+{{AvailableInWorkers}} -

语法

+## 语法 -
console.error(obj1 [, obj2, ..., objN]);
-console.error(msg [, subst1, ..., substN]);
-console.exception(obj1 [, obj2, ..., objN]);
-console.exception(msg [, subst1, ..., substN]);
-
+``` +console.error(obj1 [, obj2, ..., objN]); +console.error(msg [, subst1, ..., substN]); +console.exception(obj1 [, obj2, ..., objN]); +console.exception(msg [, subst1, ..., substN]); +``` -
-

注意： console.exception() 是 console.error() 的别名；它们功能相同。

-
+> **备注：** `console.exception()` 是 `console.error()` 的别名；它们功能相同。 -

参数

+### 参数 -
-
obj1 ... objN
-
要输出的 JavaScript 对象列表。这些对象的字符串形式按顺序加起来然后输出。
-
msg
-
一个字符串，它包含零个或多个替代字符串。
-
subst1 ... substN
-
JavaScript 对象可以用此来替换msg里的替代字符串。你可以控制输出的格式。
-
+- `obj1` ... `objN` + - : 要输出的 JavaScript 对象列表。这些对象的字符串形式按顺序加起来然后输出。 +- `msg` + - : 一个字符串，它包含零个或多个替代字符串。 +- `subst1` ... `substN` + - : JavaScript 对象可以用此来替换`msg`里的替代字符串。你可以控制输出的格式。 -

详情请看{{domxref("console")}}文档中的 输出文本到控制台 。

+详情请看{{domxref("console")}}文档中的 [输出文本到控制台](/zh-CN/docs/Web/API/console#Outputting_text_to_the_console) 。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.console.error")}} -

相关链接

+## 相关链接 - +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) +- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530) +- [Chrome Developer Tools: Using the Console](https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings) diff --git a/files/zh-cn/web/api/console/index.md b/files/zh-cn/web/api/console/index.md index 7dcf6a65c0180c..aea5fb0ced661c 100644 --- a/files/zh-cn/web/api/console/index.md +++ b/files/zh-cn/web/api/console/index.md @@ -2,199 +2,182 @@ title: Console slug: Web/API/Console --- -
{{APIRef("Console API")}}
- -

Console 对象提供了浏览器控制台调试的接口（如：Firefox 的 Web Console）。在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能。

- -

Console 对象可以从任何全局对象中访问到，如 浏览器作用域上的 {{domxref("Window")}}，以及通过属性控制台作为 workers 中的特定变体的 {{domxref("WorkerGlobalScope")}}。可以通过 {{domxref("Window.console")}} 引用，也可以简单的通过 console 引用。例：

- -
console.log("Failed to open the specified link")
- -

本页面记录了 Console 对象上的方法并给出了几个 Usage （用例）。

- -

{{AvailableInWorkers}}

- -
-

提示: 实际的 console 接口被定义为全小写的形式（比如不是这种形式 Console ），这是历史原因导致的。

-
- -

方法

- -
-
{{domxref("Console.assert()")}}
-
如果第一个参数为 false ，则将消息和堆栈跟踪记录到控制台。
-
{{domxref("Console.clear()")}}
-
清空控制台，并输出 Console was cleared。
-
{{domxref("Console.count()")}}
-
以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。
-
{{domxref("Console.countReset()")}}
-
重置指定标签的计数器值。
-
{{domxref("Console.debug()")}}
-
在控制台打印一条 "debug" 级别的消息。
-
{{domxref("Console.dir()")}}
-
显示一个由特定的 Javascript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。.
-
{{domxref("Console.dirxml()")}}
-
打印 XML/HTML 元素表示的指定对象，否则显示 JavaScript 对象视图。
-
{{domxref("Console.error()")}}
-
打印一条错误信息，使用方法可以参考 string substitution。
-
{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
-
error() 方法的别称。
-
{{domxref("Console.group()")}}
-
创建一个新的内联 group, 后续所有打印内容将会以子层级的形式展示。调用 groupEnd()来闭合组。
-
{{domxref("Console.groupCollapsed()")}}
-
创建一个新的内联 group。使用方法和 group() 相同，不同的是，groupCollapsed() 方法打印出来的内容默认是折叠的。调用groupEnd()来闭合组。
-
{{domxref("Console.groupEnd()")}}
-
闭合当前内联 group。
-
{{domxref("Console.info()")}}
-
打印资讯类说明信息，使用方法可以参考 string substitution。
-
{{domxref("Console.log()")}}
-
打印内容的通用方法，使用方法可以参考 string substitution。
-
{{domxref("Console.profile()")}} {{Non-standard_inline}}
-
Starts the browser's built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
-
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
-
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
-
{{domxref("Console.table()")}}
-
将列表型的数据打印成表格。
-
{{domxref("Console.time()")}}
-
启动一个以入参作为特定名称的计时器，在显示页面中可同时运行的计时器上限为 10,000.
-
{{domxref("Console.timeEnd()")}}
-
结束特定的 计时器 并以毫秒打印其从开始到结束所用的时间。
-
{{domxref("Console.timeLog()")}}
-
打印特定 计时器 所运行的时间。
-
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
-
添加一个标记到浏览器的 Timeline 或 Waterfall 工具。
-
{{domxref("Console.trace()")}}
-
输出一个 stack trace。
-
{{domxref("Console.warn()")}}
-
打印一个警告信息，可以使用 string substitution 和额外的参数。
-
- -

用法

- -

输出文本到控制台

- -

console 对象中较多使用的主要有四个方法 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, 和{{domxref("console.error()")}}。每一个结果在日志中都有不同的样式，可以使用浏览器控制台的日志筛选功能筛选出感兴趣的日志信息。

- -

有两种途径使用这些方法，可以简单的传入一组对象，其中的字符串对象会被连接到一起，输出到控制台。或者可以传入包含零个或多个的替换的字符串，后面跟着被替换的对象列表。

- -

打印单个对象

- -

The simplest way to use the logging methods is to output a single object:

- -
var someObject = { str: "Some text", id: 5 };
+{{APIRef("Console API")}}
+
+**`Console`** 对象提供了浏览器控制台调试的接口（如：Firefox 的 [Web Console](/zh-CN/docs/Tools/Web_Console)）。在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能。
+
+`Console` 对象可以从任何全局对象中访问到，如 浏览器作用域上的 {{domxref("Window")}}，以及通过属性控制台作为 workers 中的特定变体的 {{domxref("WorkerGlobalScope")}}。可以通过 {{domxref("Window.console")}} 引用，也可以简单的通过 `console` 引用。例：
+
+```js
+console.log("Failed to open the specified link")
+```
+
+本页面记录了 `Console` 对象上的[方法](#方法)并给出了几个 [Usage](#usage) （用例）。
+
+{{AvailableInWorkers}}
+
+> **备注：** 实际的 `console` 接口被定义为全小写的形式（比如不是这种形式 `Console` ），这是历史原因导致的。
+
+## 方法
+
+- {{domxref("Console.assert()")}}
+  - : 如果第一个参数为 `false` ，则将消息和堆栈跟踪记录到控制台。
+- {{domxref("Console.clear()")}}
+  - : 清空控制台，并输出 `Console was cleared`。
+- {{domxref("Console.count()")}}
+  - : 以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。
+- {{domxref("Console.countReset()")}}
+  - : 重置指定标签的计数器值。
+- {{domxref("Console.debug()")}}
+  - : 在控制台打印一条 `"debug"` 级别的消息。
+- {{domxref("Console.dir()")}}
+  - : 显示一个由特定的 Javascript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。.
+- {{domxref("Console.dirxml()")}}
+  - : 打印 XML/HTML 元素表示的指定对象，否则显示 JavaScript 对象视图。
+- {{domxref("Console.error()")}}
+  - : 打印一条错误信息，使用方法可以参考 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions)。
+- {{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+  - : `error()` 方法的别称。
+- {{domxref("Console.group()")}}
+  - : 创建一个新的内联 [group](/zh-CN/docs/Web/API/console#Using_groups_in_the_console), 后续所有打印内容将会以子层级的形式展示。调用 `groupEnd()`来闭合组。
+- {{domxref("Console.groupCollapsed()")}}
+  - : 创建一个新的内联 [group](/zh-CN/docs/Web/API/console#Using_groups_in_the_console)。使用方法和 `group()` 相同，不同的是，`groupCollapsed()` 方法打印出来的内容默认是折叠的。调用`groupEnd()`来闭合组。
+- {{domxref("Console.groupEnd()")}}
+  - : 闭合当前内联 [group](/zh-CN/docs/Web/API/console#Using_groups_in_the_console)。
+- {{domxref("Console.info()")}}
+  - : 打印资讯类说明信息，使用方法可以参考 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions)。
+- {{domxref("Console.log()")}}
+  - : 打印内容的通用方法，使用方法可以参考 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions)。
+- {{domxref("Console.profile()")}} {{Non-standard_inline}}
+  - : Starts the browser's built-in profiler (for example, the [Firefox performance tool](/zh-CN/docs/Tools/Performance)). You can specify an optional name for the profile.
+- {{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+  - : Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the [Firefox performance tool](/zh-CN/docs/Tools/Performance)).
+- {{domxref("Console.table()")}}
+  - : 将列表型的数据打印成表格。
+- {{domxref("Console.time()")}}
+  - : 启动一个以入参作为特定名称的[计时器](/zh-CN/docs/Web/API/console#Timers)，在显示页面中可同时运行的计时器上限为 10,000.
+- {{domxref("Console.timeEnd()")}}
+  - : 结束特定的 [计时器](/zh-CN/docs/Web/API/console#Timers) 并以毫秒打印其从开始到结束所用的时间。
+- {{domxref("Console.timeLog()")}}
+  - : 打印特定 [计时器](/zh-CN/docs/Web/API/console#Timers) 所运行的时间。
+- {{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+  - : 添加一个标记到浏览器的 [Timeline](https://developer.chrome.com/devtools/docs/timeline) 或 [Waterfall](/zh-CN/docs/Tools/Performance/Waterfall) 工具。
+- {{domxref("Console.trace()")}}
+  - : 输出一个 [stack trace](/zh-CN/docs/Web/API/console#Stack_traces)。
+- {{domxref("Console.warn()")}}
+  - : 打印一个警告信息，可以使用 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions) 和额外的参数。
+
+## 用法
+
+### 输出文本到控制台
+
+console 对象中较多使用的主要有四个方法 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, 和{{domxref("console.error()")}}。每一个结果在日志中都有不同的样式，可以使用浏览器控制台的日志筛选功能筛选出感兴趣的日志信息。
+
+有两种途径使用这些方法，可以简单的传入一组对象，其中的字符串对象会被连接到一起，输出到控制台。或者可以传入包含零个或多个的替换的字符串，后面跟着被替换的对象列表。
+
+#### 打印单个对象
+
+The simplest way to use the logging methods is to output a single object:
+
+```js
+var someObject = { str: "Some text", id: 5 };
 console.log(someObject);
-
+``` -

打印结果类似下面：

+打印结果类似下面： -
[09:27:13.475] ({str:"Some text", id:5})
+``` +[09:27:13.475] ({str:"Some text", id:5}) +``` -

打印多个对象

+#### 打印多个对象 -

可以打印多个对象，就像下面一样：

+可以打印多个对象，就像下面一样： -
var car = "Dodge Charger";
+```js
+var car = "Dodge Charger";
 var someObject = { str: "Some text", id: 5 };
-console.info("My first car was a", car, ". The object is:", someObject);
- -

打印结果类似下面：

- -
[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
- -

使用字符串替换

- -

可以在传递给 console 的方法的时候使用下面的字符以期进行参数的替换。

- - - - - - - - - - - - - - - - - - - - - - - - -
Substitution stringDescription
%o or %O打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。
%d or %i打印整数。支持数字格式化。例如，console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字: Foo 01。
%s打印字符串。
%f打印浮点数。支持格式化，比如 console.log("Foo %.2f", 1.1) 会输出两位小数: Foo 1.10
- -
-

注意：Chrome 不支持精确格式化。

-
- -

当要替换的参数类型和预期的打印类型不同时，参数会被转换成预期的打印类型。

- -
for (var i=0; i<5; i++) {
+console.info("My first car was a", car, ". The object is:", someObject);
+```
+
+打印结果类似下面：
+
+```
+[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+```
+
+#### 使用字符串替换
+
+可以在传递给 console 的方法的时候使用下面的字符以期进行参数的替换。
+
+| Substitution string | Description                                                                                              |
+| ------------------- | -------------------------------------------------------------------------------------------------------- |
+| `%o` or `%O`        | 打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。                                         |
+| `%d` or `%i`        | 打印整数。支持数字格式化。例如，`console.log("Foo %.2d", 1.1)` 会输出有先导 0 的两位有效数字: `Foo 01`。 |
+| `%s`                | 打印字符串。                                                                                             |
+| `%f`                | 打印浮点数。支持格式化，比如 `console.log("Foo %.2f", 1.1)` 会输出两位小数: `Foo 1.10`                   |
+
+> **备注：** Chrome 不支持精确格式化。
+
+当要替换的参数类型和预期的打印类型不同时，参数会被转换成预期的打印类型。
+
+```
+for (var i=0; i<5; i++) {
   console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
 }
-
+``` -

输出样例如下所示：

+输出样例如下所示： -
[13:14:13.481] Hello, Bob. You've called me 1 times.
+```
+[13:14:13.481] Hello, Bob. You've called me 1 times.
 [13:14:13.483] Hello, Bob. You've called me 2 times.
 [13:14:13.485] Hello, Bob. You've called me 3 times.
 [13:14:13.487] Hello, Bob. You've called me 4 times.
 [13:14:13.488] Hello, Bob. You've called me 5 times.
-
- -

为控制台定义样式

- -

可以使用 %c 为打印内容定义样式：

+``` -
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+#### 为控制台定义样式 +可以使用 `%c` 为打印内容定义样式： +```js +console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px"); +``` -
指令前的文本不会受到影响，但指令后的文本将会使用参数中声明的 CSS 样式。
+指令前的文本不会受到影响，但指令后的文本将会使用参数中声明的 CSS 样式。![](css-styling.png) -
-


- %c 语法可用的属性如下 (至少在 Firefox 中是这样，别的浏览器会有诸多不同）：

+`%c` 语法可用的属性如下 (至少在 Firefox 中是这样，别的浏览器会有诸多不同）： -
    -
  • {{cssxref("background")}} 与其全写版本。
    • -
  • {{cssxref("border")}} 与其全写版本。
    • -
  • {{cssxref("border-radius")}}
    • -
  • {{cssxref("box-decoration-break")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("clear")}} 和 {{cssxref("float")}}
    • -
  • {{cssxref("color")}}
    • -
  • {{cssxref("cursor")}}
    • -
  • {{cssxref("display")}}
    • -
  • {{cssxref("font")}} 与其全写版本。
    • -
  • {{cssxref("line-height")}}
    • -
  • {{cssxref("margin")}}
    • -
  • {{cssxref("outline")}} 与其全写版本。
    • -
  • {{cssxref("padding")}}
    • -
  • {{cssxref("text-transform")}} 这类 text-* 属性
    • -
  • {{cssxref("white-space")}}
    • -
  • {{cssxref("word-spacing")}} 和 {{cssxref("word-break")}}
    • -
  • {{cssxref("writing-mode")}}
    • -
+- {{cssxref("background")}} 与其全写版本。 +- {{cssxref("border")}} 与其全写版本。 +- {{cssxref("border-radius")}} +- {{cssxref("box-decoration-break")}} +- {{cssxref("box-shadow")}} +- {{cssxref("clear")}} 和 {{cssxref("float")}} +- {{cssxref("color")}} +- {{cssxref("cursor")}} +- {{cssxref("display")}} +- {{cssxref("font")}} 与其全写版本。 +- {{cssxref("line-height")}} +- {{cssxref("margin")}} +- {{cssxref("outline")}} 与其全写版本。 +- {{cssxref("padding")}} +- {{cssxref("text-transform")}} 这类 `text-*` 属性 +- {{cssxref("white-space")}} +- {{cssxref("word-spacing")}} 和 {{cssxref("word-break")}} +- {{cssxref("writing-mode")}} -

注意: 控制台信息的默认行为与行内元素相似。为了应用 padding, margin 这类效果，你应当这样设置display: inline-block.。

-
+**注意**：控制台信息的默认行为与行内元素相似。为了应用 `padding`、`margin` 这类效果，你应当这样设置`display: inline-block`。 -

在 console 中使用编组

+### 在 console 中使用编组 -

可以使用嵌套组来把视觉上相关的元素合并，以协助组织你的输出。使用console.group()创建新的嵌套块，或者用console.groupCollapsed() 创建默认折叠的块，这种块需要点击闭合按钮来展开才能读到。

+可以使用嵌套组来把视觉上相关的元素合并，以协助组织你的输出。使用`console.group()`创建新的嵌套块，或者用`console.groupCollapsed()` 创建默认折叠的块，这种块需要点击闭合按钮来展开才能读到。 -

直接调用 console.groupEnd().就可以退出当前组。比如下面的代码：

+直接调用 `console.groupEnd()`.就可以退出当前组。比如下面的代码： -
console.log("This is the outer level");
+```js
+console.log("This is the outer level");
 console.group();
 console.log("Level 2");
 console.group();
@@ -204,38 +187,40 @@ console.groupEnd();
 console.log("Back to level 2");
 console.groupEnd();
 console.debug("Back to the outer level");
-
+``` -

执行结果：

+执行结果： -

Demo of nested groups in Firefox console

+![Demo of nested groups in Firefox console](console_groups_demo.png) -

定时器

+### 定时器 -

你可以使用定时器来计算一段特定操作的周期。使用 console.time() 方法以创建一个计时器，其唯一的参数表示了计时器的名字。使用 console.timeEnd() 方法以关闭计时器，并获取经过的毫秒数，其同样以计时器的名字作为参数。一个页面最多同时只能有 10,000 个计数器运行。

+你可以使用定时器来计算一段特定操作的周期。使用 ` console.time``() ` 方法以创建一个计时器，其唯一的参数表示了计时器的名字。使用 ` console.timeEnd``() ` 方法以关闭计时器，并获取经过的毫秒数，其同样以计时器的名字作为参数。一个页面最多同时只能有 10,000 个计数器运行。 -

示例：:

+示例：: -
console.time("answer time");
+```js
+console.time("answer time");
 alert("Click to continue");
 console.timeLog("answer time");
 alert("Do a bunch of other stuff...");
 console.timeEnd("answer time");
-
+``` -

这段代码将会打印需要用户关闭 alert box 的时间，打印时间到控制台上，等用户关闭第二个 alert 后，把结束时间打印到控制台。

+这段代码将会打印需要用户关闭 alert box 的时间，打印时间到控制台上，等用户关闭第二个 alert 后，把结束时间打印到控制台。 -

timerresult.png

+![timerresult.png](console-timelog.png) -

注意无论在开始还是结束的时候都会打印计时器的名字。

+注意无论在开始还是结束的时候都会打印计时器的名字。 -
注意： 如果使用计时器来记录网络时间请求的话下面的内容很重要。计时器将会报告传输过程的整个时间，而网络面板里显示的时间只计算了请求头部所需要的时间。如果启用了响应体日志记录，那么列出的响应头部和响应体组合的时间应该与在控制台输出中看到的时间相符。
+> **备注：** 如果使用计时器来记录网络时间请求的话下面的内容很重要。计时器将会报告传输过程的整个时间，而网络面板里显示的时间只计算了请求头部所需要的时间。如果启用了响应体日志记录，那么列出的响应头部和响应体组合的时间应该与在控制台输出中看到的时间相符。 -

堆栈跟踪

+### 堆栈跟踪 -

控制台也支持输出堆栈，其将会显示到调用 {{domxref("console.trace()")}} 的点的调用路径。如下所示：

+控制台也支持输出堆栈，其将会显示到调用 {{domxref("console.trace()")}} 的点的调用路径。如下所示： -
function foo() {
+```js
+function foo() {
   function bar() {
     console.trace();
   }
@@ -243,38 +228,32 @@ console.timeEnd("answer time");
 }
 
 foo();
-
+``` -

控制台的输出：

+控制台的输出： -

+![](api-trace2.png) -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

注意

+## 注意 -
    -
  • 在 Firefox 浏览器中，如果页面中自己定义了 console 对象，那么它会覆盖掉浏览器内置的 console对象，在其它浏览器可能也是。
    • -
+- 在 Firefox 浏览器中，如果页面中自己定义了 `console` 对象，那么它会覆盖掉浏览器内置的 `console`对象，在其它浏览器可能也是。 -

相关文档

+## 相关文档 -
    -
  • Tools
    • -
  • Web Console - Firefox 浏览器控制台如何处理 console API 的调用
    • -
  • Remote debugging - 如何在调试移动设备时查看控制台输出。
    • -
+- [Tools](/zh-CN/docs/Tools) +- [Web Console](/zh-CN/docs/Tools/Web_Console) - Firefox 浏览器控制台如何处理 console API 的调用 +- [Remote debugging](/zh-CN/docs/Tools/Remote_Debugging) - 如何在调试移动设备时查看控制台输出。 -

其他实现

+### 其他实现 - +- [Google Chrome DevTools](https://developers.google.com/chrome-developer-tools/docs/console-api) +- [Microsoft Edge DevTools](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console/console-api) +- [Safari Web Inspector](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html) diff --git a/files/zh-cn/web/api/console/profileend/index.md b/files/zh-cn/web/api/console/profileend/index.md index a5b78425491073..c72575a75cb40e 100644 --- a/files/zh-cn/web/api/console/profileend/index.md +++ b/files/zh-cn/web/api/console/profileend/index.md @@ -2,44 +2,35 @@ title: Console.profileEnd() slug: Web/API/Console/profileEnd --- -

{{APIRef("Console API")}}{{Non-standard_header}}

+{{APIRef("Console API")}}{{Non-standard_header}} -
-

在 console.profile() 之后立刻调用此 API 可能会导致其无法工作.。为解决此问题，请在 setTimeOut 中至少延迟 5 毫秒后再调用。 请看 bug #1173588。

-
+> **警告：** 在 console.profile() 之后立刻调用此 API 可能会导致其无法工作.。为解决此问题，请在 setTimeOut 中至少延迟 5 毫秒后再调用。 请看 [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588)。 -

profileEnd 方法会停止记录之前已经由{{domxref("Console.profile()")}}开始记录的性能描述信息

+profileEnd 方法会停止记录之前已经由{{domxref("Console.profile()")}}开始记录的性能描述信息 -

你可以选择提供一个参数来命名需要记录的描述信息。这使得你在记录多个描述信息的时候可以停止记录特定的描述信息。

+你可以选择提供一个参数来命名需要记录的描述信息。这使得你在记录多个描述信息的时候可以停止记录特定的描述信息。 -
    -
  • 如果 Console.profileEnd() 传了描述信息名字，并且它与正在记录的描述信息的名字相匹配，则此描述信息将会停止。
    • -
  • 如果 Console.profileEnd() 传了描述信息名字，并且它与正在记录的描述信息的名字不匹配，则不会进行更改。
    • -
  • 如果 Console.profileEnd() 没有传描述信息名字，最近启动记录的描述信息将会停止。
    • -
+- `如果 Console.profileEnd()` 传了描述信息名字，并且它与正在记录的描述信息的名字相匹配，则此描述信息将会停止。 +- `如果 Console.profileEnd()` 传了描述信息名字，并且它与正在记录的描述信息的名字不匹配，则不会进行更改。 +- `如果 Console.profileEnd()` 没有传描述信息名字，最近启动记录的描述信息将会停止。 -

{{AvailableInWorkers}}

+{{AvailableInWorkers}} -

语法

+## 语法 -
console.profileEnd(profileName);
-
+``` +console.profileEnd(profileName); +``` -

参数

+## 参数 -
-
profileName
-
描述信息的名字。可选。
-
+- `profileName` + - : 描述信息的名字。可选。 -

浏览器兼容性

+## 浏览器兼容性 +{{Compat("api.Console.profileEnd")}} +## 参见 -

{{Compat("api.Console.profileEnd")}}

- -

参见

- -
    -
  • {{domxref("Console.profile()")}}
    • -
+- {{domxref("Console.profile()")}} diff --git a/files/zh-cn/web/api/console/timeend/index.md b/files/zh-cn/web/api/console/timeend/index.md index a921fc3f9f1153..08f8d8d5a8614d 100644 --- a/files/zh-cn/web/api/console/timeend/index.md +++ b/files/zh-cn/web/api/console/timeend/index.md @@ -2,42 +2,37 @@ title: Console.timeEnd() slug: Web/API/Console/timeEnd --- -
{{APIRef("Console API")}}{{Non-standard_header}}
+{{APIRef("Console API")}}{{Non-standard_header}} -

概述

+## 概述 -

停止一个通过 console.time() 启动的计时器

+停止一个通过 `console.time()` 启动的计时器 -
-

注意：该方法在使用时不会将输出的时间返回到 js，它只能用于控制台调试。请勿将该方法作为普通计时器或性能数据收集器的一部分。

-
+> **备注：** 该方法在使用时不会将输出的时间返回到 js，它只能用于控制台调试。请勿将该方法作为普通计时器或性能数据收集器的一部分。 -

有关详细信息和示例，请参阅 Timers

+有关详细信息和示例，请参阅 [Timers](/zh-CN/docs/Web/API/console#Timers) -

{{AvailableInWorkers}}

+{{AvailableInWorkers}} -

语法

+## 语法 -
console.timeEnd(label);
-
+```js +console.timeEnd(label); +``` -

参数

+### 参数 -
-
label
-
需要停止的计时器名字。一旦停止，计时器所经过的时间会被自动输出到控制台。
-
+- `label` + - : 需要停止的计时器名字。一旦停止，计时器所经过的时间会被自动输出到控制台。 -

Specifications

+## Specifications {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

参见

+## 参见 - +- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/) diff --git a/files/zh-cn/web/api/convolvernode/index.md b/files/zh-cn/web/api/convolvernode/index.md index 881447542a3cd1..4c4268e8e172fb 100644 --- a/files/zh-cn/web/api/convolvernode/index.md +++ b/files/zh-cn/web/api/convolvernode/index.md @@ -2,70 +2,63 @@ title: ConvolverNode slug: Web/API/ConvolverNode --- -

{{APIRef("Web Audio API")}}

+{{APIRef("Web Audio API")}} -

ConvolverNode 接口是一个对给定 {{domxref("AudioBuffer")}} 上执行线性卷积的 {{domxref("AudioNode")}}，一般用来做音频混响效果。每一个 ConvolverNode 都会有一个输入值和输出值。

+`ConvolverNode` 接口是一个对给定 {{domxref("AudioBuffer")}} 上执行线性卷积的 {{domxref("AudioNode")}}，一般用来做音频混响效果。每一个 `ConvolverNode` 都会有一个输入值和输出值。 -
-

注意: 更多线性卷积理论的相关信息，请参阅Convolution article on Wikipedia.

-
+> **备注：** 更多线性卷积理论的相关信息，请参阅[Convolution article on Wikipedia](https://en.wikipedia.org/wiki/Convolution). - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
Number of inputs1
Number of outputs1
Channel count mode"clamped-max"
Channel count1, 2, or 4
Channel interpretation"speakers"
Number of inputs1
Number of outputs1
Channel count mode"clamped-max"
Channel count1, 2, or 4
Channel interpretation"speakers"
-

构造函数

+## 构造函数 -
-
{{domxref("ConvolverNode.ConvolverNode()", "ConvolverNode()")}}
-
创建一个新的 ConvolverNode 对象实例。
-
+- {{domxref("ConvolverNode.ConvolverNode()", "ConvolverNode()")}} + - : 创建一个新的 `ConvolverNode` 对象实例。 -

属性

+## 属性 -

继承其父级的属性, {{domxref("AudioNode")}}.

+继承其父级的属性*, {{domxref("AudioNode")}}*. -
-
{{domxref("ConvolverNode.buffer")}}
-
一个被 ConvolverNode 用来产生混响效果的单声道、立体声或四声道的音频缓冲器，包含了 (可能是多声道) 脉冲反应 (IR)。
-
{{domxref("ConvolverNode.normalize")}}
-
布尔值，在设置缓冲区属性时，可绝定是否对来自 buffer 的脉冲反应按等功率归一化进行缩放。
-
+- {{domxref("ConvolverNode.buffer")}} + - : 一个被 `ConvolverNode` 用来产生混响效果的单声道、立体声或四声道的音频缓冲器，包含了 (可能是多声道) 脉冲反应 (IR)。 +- {{domxref("ConvolverNode.normalize")}} + - : 布尔值，在设置缓冲区属性时，可绝定是否对来自 `buffer` 的脉冲反应按等功率归一化进行缩放。 -

方法

+## 方法 -

没有具体的方法，从其父继承方法，{{domxref("AudioNode")}}.

+没有具体的方法，从其父继承方法，_{{domxref("AudioNode")}}_. -

ConvolverNode 例子

+## ConvolverNode 例子 -

下面的示例展示了 AudioContext 创建卷积节点的基础用法。

+下面的示例展示了 AudioContext 创建卷积节点的基础用法。 -
-

注意: 你需要找到一个脉冲反应来完成下面的示例。可查看 此处 的实例。

-
+> **备注：** 你需要找到一个脉冲反应来完成下面的示例。可查看[此处](https://codepen.io/DonKarlssonSan/pen/doVKRE) 的实例。 -
let audioCtx = new window.AudioContext();
+```js
+let audioCtx = new window.AudioContext();
 
 async function createReverb() {
     let convolver = audioCtx.createConvolver();
@@ -82,25 +75,19 @@ async function createReverb() {
 
 let reverb = await createReverb();
 
-// someOtherAudioNode -> reverb -> destination
+// someOtherAudioNode -> reverb -> destination
 someOtherAudioNode.connect(reverb);
 reverb.connect(audioCtx.destination);
-
+``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -
+{{Compat("api.ConvolverNode")}} +## 相关链接 -

{{Compat("api.ConvolverNode")}}

-
- -

相关链接

- - +- [Using the Web Audio API](/zh-CN/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/zh-cn/web/api/credential_management_api/index.md b/files/zh-cn/web/api/credential_management_api/index.md index 144346b70d3b73..60ccb6915d4ac9 100644 --- a/files/zh-cn/web/api/credential_management_api/index.md +++ b/files/zh-cn/web/api/credential_management_api/index.md @@ -2,45 +2,37 @@ title: Credential Management API slug: Web/API/Credential_Management_API --- -
-

{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}

+{{APIRef("Credential Management API")}}{{ SeeCompatTable() }} -

Credential Management API 允许网站存储和检索用户，联合账户和公钥证书。这些功能允许用户在不输入密码的情况下登录，查看他们曾经登录到一个站点的联合帐户，并且在会话过期且没有显式的登录流程的情况下恢复会话。

-
+Credential Management API 允许网站存储和检索用户，联合账户和公钥证书。这些功能允许用户在不输入密码的情况下登录，查看他们曾经登录到一个站点的联合帐户，并且在会话过期且没有显式的登录流程的情况下恢复会话。 -

Credential management 概念和用法

+## Credential management 概念和用法 -

此 API 允许网站与用户代理的密码系统进行交互，以便网站能够以统一的方式处理站点凭证，而用户代理则可以为他们的凭证管理提供更好的帮助。例如，用户代理在处理联合身份提供程序或使用不仅仅是用户名和密码的深奥登录机制时特别困难。为了解决这些问题，Credential Management API 为网站提供了存储和检索不同类型凭据的方法。这为用户提供了一些功能，比如查看他们曾经登录到某个站点的联合帐户，或者在会话过期且没有显式的登录流程的情况下恢复会话。

+此 API 允许网站与用户代理的密码系统进行交互，以便网站能够以统一的方式处理站点凭证，而用户代理则可以为他们的凭证管理提供更好的帮助。例如，用户代理在处理联合身份提供程序或使用不仅仅是用户名和密码的深奥登录机制时特别困难。为了解决这些问题，Credential Management API 为网站提供了存储和检索不同类型凭据的方法。这为用户提供了一些功能，比如查看他们曾经登录到某个站点的联合帐户，或者在会话过期且没有显式的登录流程的情况下恢复会话。 -
-

此 API 仅限于顶级上下文。在<iframe>元素中调用 get() 和 store() 将无效。

-
+> **备注：** 此 API 仅限于顶级上下文。在\ + + +``` + +下面是 `child-frame.html 的内容`: + +```html + + + + Child Frame + + + ☻ - </body> -</html> + + +``` -

当父 iframe 被卸载，事件将按console.log() 消息描述的顺序触发。

+当父 iframe 被卸载，事件将按`console.log()` 消息描述的顺序触发。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

参见

+## 参见 -
    -
  • 相关事件： {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}
    • -
  • Unloading Documents — unload a document
    • -
+- 相关事件： {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}} +- [Unloading Documents — unload a document](https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents) diff --git a/files/zh-cn/web/api/worker/index.md b/files/zh-cn/web/api/worker/index.md index c7f86b60f392b3..3cc8efc9a9c98d 100644 --- a/files/zh-cn/web/api/worker/index.md +++ b/files/zh-cn/web/api/worker/index.md @@ -2,88 +2,77 @@ title: Worker slug: Web/API/Worker --- -

{{APIRef("Web Workers API")}}

+{{APIRef("Web Workers API")}} -

Worker 接口是 Web Workers API 的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker ，只须调用 Worker(URL) 构造函数，函数参数 `URL` 为指定的脚本。

+Worker 接口是 [Web Workers API ](/zh-CN/docs/Web/API/Web_Workers_API)的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker **，**只须调用 `Worker(URL) `构造函数，函数参数 \`URL\` 为指定的脚本。 -

Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建者同源（注意：Blink暂时不支持嵌套 Worker）。

+Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建者[同源](/zh-CN/docs/Web/Security/Same-origin_policy)（注意：[Blink](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU)暂时不支持嵌套 Worker）。 -

需要注意的是，不是所有函数和构造函数 (或者说…类) 都可以在 Worker 中使用。具体参考页面 Worker 所支持的函数和类。Worker 可以使用 XMLHttpRequest 发送请求，但是请求的 responseXML 与 channel 两个属性值始终返回 null （fetch 仍可正常使用，没有类似的限制）。

+需要注意的是，不是所有函数和构造函数 (或者说…类) 都可以在 Worker 中使用。具体参考页面 [Worker 所支持的函数和类](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)。Worker 可以使用 [`XMLHttpRequest`](/en/DOM/XMLHttpRequest) 发送请求，但是请求的 `responseXML` 与 `channel` 两个属性值始终返回 `null` （`fetch` 仍可正常使用，没有类似的限制）。 -
-

如果你要在火狐浏览器的扩展使用 Worker 访问 js-ctypes，应使用 {{ domxref("ChromeWorker") }} 对象来替代。(译者注：这里没有看懂，希望有人能驳正，或添加说明)

-
+> **备注：** 如果你要在火狐浏览器的扩展使用 Worker 访问 [js-ctypes](/zh-CN/docs/Mozilla/js-ctypes)，应使用 {{ domxref("ChromeWorker") }} 对象来替代。(译者注：这里没有看懂，希望有人能驳正，或添加说明) -

构造函数

+## 构造函数 -
-
{{domxref("Worker.Worker", "Worker()")}}
-
创建一个专用 Web worker，它只执行 URL 指定的脚本。使用 Blob URL 作为参数亦可。
-
+- {{domxref("Worker.Worker", "Worker()")}} + - : 创建一个专用 Web worker，它只执行 URL 指定的脚本。使用 [Blob URL](/zh-CN/docs/Web/API/Blob) 作为参数亦可。 -

属性

+## 属性 -

继承父对象{{domxref("EventTarget")}} 的属性，以及实现对象 {{domxref("AbstractWorker")}}的属性。

+*继承*父对象*{{domxref("EventTarget")}} 的属性，以及实现对象 {{domxref("AbstractWorker")}}的属性。* -

事件句柄

+### _事件句柄_ -
-
{{domxref("AbstractWorker.onerror")}}
-
当{{domxref("ErrorEvent")}} 类型的事件冒泡到 worker 时，事件监听函数 {{ domxref("EventListener") }} 被调用。它继承于 {{domxref("AbstractWorker")}}.
-
{{domxref("Worker.onmessage")}}
-
当{{domxref("MessageEvent")}}类型的事件冒泡到 worker 时，事件监听函数 {{ domxref("EventListener") }} 被调用. 例如，一个消息通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}}，从执行者发送到父页面对象，消息保存在事件对象的 {{domxref("MessageEvent.data", "data")}} 属性中。
-
{{domxref("Worker.onmessageerror")}}
-
当{{event("messageerror")}} 类型的事件发生时，对应的{{event("Event_handlers", "event handler")}} 代码被调用。
-
+- {{domxref("AbstractWorker.onerror")}} + - : 当{{domxref("ErrorEvent")}} 类型的事件冒泡到 worker 时，事件监听函数 {{ domxref("EventListener") }} 被调用。它继承于 {{domxref("AbstractWorker")}}. +- {{domxref("Worker.onmessage")}} + - : 当{{domxref("MessageEvent")}}类型的事件冒泡到 worker 时，事件监听函数 {{ domxref("EventListener") }} 被调用. 例如，一个消息通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}}，从执行者发送到父页面对象，消息保存在事件对象的 {{domxref("MessageEvent.data", "data")}} 属性中。 +- {{domxref("Worker.onmessageerror")}} + - : 当{{event("messageerror")}} 类型的事件发生时，对应的{{event("Event_handlers", "event handler")}} 代码被调用。 -

方法

+## 方法 -

继承父对象{{domxref("EventTarget")}} 的方法，以及实现对象 {{domxref("AbstractWorker")}}的方法。

+*继承*父对象*{{domxref("EventTarget")}} 的方法，以及实现对象 {{domxref("AbstractWorker")}}的方法。* -
-
{{domxref("Worker.postMessage()")}}
-
发送一条消息到最近的外层对象，消息可由任何 JavaScript 对象组成。
-
+- {{domxref("Worker.postMessage()")}} + - : 发送一条消息到最近的外层对象，消息可由任何 JavaScript 对象组成。 +- {{domxref("Worker.terminate()")}} + - : 立即终止 worker。该方法不会给 worker 留下任何完成操作的机会；就是简单的立即停止。Service Woker 不支持这个方法。 -
-
{{domxref("Worker.terminate()")}}
-
立即终止 worker。该方法不会给 worker 留下任何完成操作的机会；就是简单的立即停止。Service Woker 不支持这个方法。
-
+## 示例 -

示例

+下面的代码通过构造函数 {{domxref("Worker.Worker", "Worker()")}} 创建了一个 {{domxref("Worker")}} 对象。 -

下面的代码通过构造函数 {{domxref("Worker.Worker", "Worker()")}} 创建了一个 {{domxref("Worker")}} 对象。

- -
var myWorker = new Worker('worker.js');
+```js
+var myWorker = new Worker('worker.js');
 var first = document.querySelector('#number1');
 var second = document.querySelector('#number2');
 
 first.onchange = function() {
   myWorker.postMessage([first.value,second.value]);
   console.log('Message posted to worker');
-}
+} +``` -

完整的示例，请查阅 Basic dedicated worker example (run dedicated worker).

+完整的示例，请查阅 [Basic dedicated worker example](https://github.com/mdn/simple-web-worker) ([run dedicated worker](http://mdn.github.io/simple-web-worker/)). -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

不同类型的 worker 兼容度不一致，详细参考具体定义的页面。

+不同类型的 worker 兼容度不一致，详细参考具体定义的页面。 -

{{Compat("api.Worker")}}

+{{Compat("api.Worker")}} -

跨域行为的错误事件

+### 跨域行为的错误事件 -

浏览器的早期版本中，加载跨域的执行者脚本导致 SecurityError事件。根据规范的变更，而新版本的浏览器只有{{event("error")}}事件发生

+浏览器的早期版本中，加载跨域的执行者脚本导致 `SecurityError`事件。根据规范的变更，而新版本的浏览器只有{{event("error")}}事件发生 -

相关链接

+## 相关链接 - +- [Using web workers](/En/Using_web_workers) +- [Functions available to workers](/En/DOM/Worker/Functions_available_to_workers) +- Other kind of workers: {{ domxref("SharedWorker") }} and [ServiceWorker](/zh-CN/docs/Web/API/ServiceWorker_API). +- Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions. diff --git a/files/zh-cn/web/api/worker/message_event/index.md b/files/zh-cn/web/api/worker/message_event/index.md index 5b8aa9a0098007..73d52d3114ffb4 100644 --- a/files/zh-cn/web/api/worker/message_event/index.md +++ b/files/zh-cn/web/api/worker/message_event/index.md @@ -2,72 +2,72 @@ title: 'Worker: message event' slug: Web/API/Worker/message_event --- -
{{APIRef}}
- -
当 worker 的父级接收到来自其 worker 的消息时，会在 {{domxref('Worker')}} 对象上触发 message 事件。例如：当 worker 通过 DedicatedWorkerGlobalScope.postMessage() 发送了一条消息时。
- - - - +{{APIRef}}当 worker 的父级接收到来自其 worker 的消息时，会在 {{domxref('Worker')}} 对象上触发 `message` 事件。例如：当 worker 通过 [`DedicatedWorkerGlobalScope.postMessage()`](/en-US/docs/Web/API/DedicatedWorkerGlobalScope/postMessage) 发送了一条消息时。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
是否冒泡否
是否可撤销否
接口{{domxref("MessageEvent")}}
对应事件处理属性onmessage
是否冒泡否
是否可撤销否
接口{{domxref("MessageEvent")}}
对应事件处理属性 + onmessage +
-

例子

+## 例子 -

下面的代码创建了一个 worker 并使用 addEventListener() 监听从 worker 发来的消息：

+下面的代码创建了一个 worker 并使用 [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) 监听从 worker 发来的消息： -
const worker = new Worker("static/scripts/worker.js");
+```js
+const worker = new Worker("static/scripts/worker.js");
 
-worker.addEventListener('message', (event) => {
+worker.addEventListener('message', (event) => {
     console.log(`Received message from worker: ${event.data}`)
-});
+}); +``` -

另外，也可以使用 onmessage 事件处理属性进行监听：

+另外，也可以使用 [`onmessage`](/en-US/docs/Web/API/Worker/onmessage) 事件处理属性进行监听： -
const worker = new Worker("static/scripts/worker.js");
+```js
+const worker = new Worker("static/scripts/worker.js");
 
-worker.onmessage = (event) => {
+worker.onmessage = (event) => {
     console.log(`Received message from worker: ${event.data}`)
-};
+}; +``` -

worker 使用 self.postMessage() 发出消息：

+worker 使用 [`self.postMessage()`](/en-US/docs/Web/API/DedicatedWorkerGlobalScope/postMessage) 发出消息： -
// static/scripts/worker.js
+```js
+// static/scripts/worker.js
 
-self.postMessage('I\'m alive!');
+self.postMessage('I\'m alive!'); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.Worker.message_event")}}

+{{Compat("api.Worker.message_event")}} -

另请参阅

+## 另请参阅 - +- 相关事件：[`messageerror`](/docs/Web/API/Worker/messageerror_event). +- [`DedicatedWorkerGlobalScope.postMessage()`](/en-US/docs/Web/API/DedicatedWorkerGlobalScope/postMessage). diff --git a/files/zh-cn/web/api/worker/messageerror_event/index.md b/files/zh-cn/web/api/worker/messageerror_event/index.md index c4a778b46a7fbd..449965e1ce105f 100644 --- a/files/zh-cn/web/api/worker/messageerror_event/index.md +++ b/files/zh-cn/web/api/worker/messageerror_event/index.md @@ -2,74 +2,80 @@ title: 'Worker: messageerror event' slug: Web/API/Worker/messageerror_event --- -
{{APIRef}}
+{{APIRef}} -

当 {{domxref('Worker')}} 对象接收到一条无法被反序列化的消息时， messageerror 事件将在该对象上被触发。

+当 {{domxref('Worker')}} 对象接收到一条无法被反序列化的消息时， `messageerror` 事件将在该对象上被触发。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
是否冒泡否
是否可取消否
接口{{domxref("MessageEvent")}}
对应事件处理属性onmessageerror
是否冒泡否
是否可取消否
接口{{domxref("MessageEvent")}}
对应事件处理属性 + onmessageerror +
-

例子

+## 例子 -

创建一个 worker ，使用 addEventListener() 监听 message 和 messageerror 事件：

+创建一个 worker ，使用 [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) 监听 `message` 和 `messageerror` 事件： -
// inside main.js
+```js
+// inside main.js
 
 const worker = new Worker("static/scripts/worker.js");
 
-worker.addEventListener("message", (event) => {
+worker.addEventListener("message", (event) => {
     console.error(`Received message from worker: ${event}`);
 });
 
-worker.addEventListener("messageerror", (event) => {
+worker.addEventListener("messageerror", (event) => {
     console.error(`Error receiving message from worker: ${event}`);
-});
+}); +``` -

同样，可以使用 onmessageerror 事件处理属性监听事件：

+同样，可以使用 [`onmessageerror`](/zh-CN/docs/Web/API/Window/messageerror_event) 事件处理属性监听事件： -
// inside main.js
+```js
+// inside main.js
 
 const worker = new Worker("static/scripts/worker.js");
 
-worker.onmessage = (event) => {
+worker.onmessage = (event) => {
     console.error(`Received message from worker: ${event}`);
 };
 
-worker.onmessageerror = (event) => {
+worker.onmessageerror = (event) => {
     console.error(`Error receiving message from worker: ${event}`);
-};
+}; +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.Worker.messageerror_event")}}

+{{Compat("api.Worker.messageerror_event")}} -

另请参阅

+## 另请参阅 - +- [`Worker.postMessage()`](/en-US/docs/Web/API/Worker/postMessage) +- 相关事件：[`message`](/docs/Web/API/Worker/message_event). diff --git a/files/zh-cn/web/api/worker/worker/index.md b/files/zh-cn/web/api/worker/worker/index.md index 5677cc08799047..bc1e4624b5eea0 100644 --- a/files/zh-cn/web/api/worker/worker/index.md +++ b/files/zh-cn/web/api/worker/worker/index.md @@ -2,85 +2,72 @@ title: Worker() slug: Web/API/Worker/Worker --- -

{{APIRef("Web Workers API")}}

+{{APIRef("Web Workers API")}} -

Worker() 构造函数创建一个 {{domxref("Worker")}} 对象，该对象执行指定的 URL 脚本。这个脚本必须遵守 同源策略 。

+**`Worker()`** 构造函数创建一个 {{domxref("Worker")}} 对象，该对象执行指定的 URL 脚本。这个脚本必须遵守 [同源策略](/en/Same_origin_policy_for_JavaScript) 。 -

如果 此 URL 有一个无效的语句，或者违反同源策略，一个 SECURITY_ERR 类型的{{domxref("DOMException")}}被抛出。

+如果 此 URL 有一个无效的语句，或者违反同源策略，一个 `SECURITY_ERR `类型的{{domxref("DOMException")}}被抛出。 -
-

Note: 浏览器厂商对于 data URI 是否同源存在分歧。尽管 Gecko 10.0 {{ geckoRelease("10.0") }} 和之后的版本接受 data URIs，但在所有其他浏览器中并非如此。

-
+> **备注：** 浏览器厂商对于 data URI 是否同源存在分歧。尽管 Gecko 10.0 {{ geckoRelease("10.0") }} 和之后的版本接受 data URIs，但在所有其他浏览器中并非如此。 -

语法

+## 语法 -
const myWorker = new Worker(aURL, options);
+```js +const myWorker = new Worker(aURL, options); +``` -

参数

+### 参数 -
    -
  • 如果文档不允许启动 worker，则会引发 SecurityError
    • -
  • 如果脚本之一的 MIME 类型为 text/csv, image/*, video/*,或 audio/*, 则会引发 NetworkError。它应该始终是 text/javascript。
    • -
  • 如果 aURL 无法解析，则引发 SyntaxError。
    • -
+- 如果文档不允许启动 worker，则会引发 SecurityError +- 如果脚本之一的 MIME 类型为 `text/csv`, `image/*`, `video/*`,或 `audio/*`, 则会引发 NetworkError。它应该始终是 text/javascript。 +- 如果 aURL 无法解析，则引发 SyntaxError。 -
-
aURL
-
是一个{{domxref("DOMString")}} 表示worker 将执行的脚本的 URL。它必须遵守同源策略。
-
options {{optional_inline}}
-
包含可在创建对象实例时设置的选项属性的对象。可用属性如下： -
    -
  • type：用以指定 worker 类型的 {{domxref("DOMString")}} 值。该值可以是 classic 或 module. 如果未指定，将使用默认值 classic.
    • -
  • credentials：用以指定 worker 凭证的 {{domxref("DOMString")}} 值。该值可以是 omit, same-origin，或 include.。如果未指定，或者 type 是 classic，将使用默认值 omit (不要求凭证)。
    • -
  • name：在 {{domxref("DedicatedWorkerGlobalScope")}} 的情况下，用来表示 worker 的 scope 的一个 {{domxref("DOMString")}} 值，主要用于调试目的。
    • -
-
-
+- _aURL_ + - : 是一个{{domxref("DOMString")}} 表示 **worker** 将执行的脚本的 URL。它必须遵守同源策略。 +- _options_ {{optional_inline}} -

返回值

+ - : 包含可在创建对象实例时设置的选项属性的对象。可用属性如下： -

创建的 worker。

+ - `type`：用以指定 worker 类型的 {{domxref("DOMString")}} 值。该值可以是 `classic` 或 `module`. 如果未指定，将使用默认值 `classic.` + - `credentials`：用以指定 worker 凭证的 {{domxref("DOMString")}} 值。该值可以是* `omit`*, `same-origin`，或 _`include`.。如果未指定，或者 type 是 `classic`，将使用默认值 `omit` (不要求凭证)。_ + - *`name`：*在 {{domxref("DedicatedWorkerGlobalScope")}} 的情况下，用来表示 worker 的 scope 的一个 {{domxref("DOMString")}} 值，主要用于调试目的。 -

异常

+### 返回值 -
    -
  • 当 document 不被允许启动 worker 的时候，将抛出一个 SecurityError 异常。例如：如果提供的 aURL 有语法错误，或者与同源策略相冲突（跨域访问）。
    • -
  • 如果 worker 的 MIME 类型不正确，将抛出一个 NetworkError 异常。worker 的 MIME 类型必须是 text/javascript 。
    • -
  • 如果 aURL 无法被解析（格式错误），将抛出一个 SyntaxError 异常。
    • -
+创建的 worker。 -

例子

+### 异常 -

下面的代码片段展示了通过 Worker() 创建 {{domxref("Worker")}} 对象的过程， 以及随后的使用方法：

+- 当 document 不被允许启动 worker 的时候，将抛出一个 SecurityError 异常。例如：如果提供的 aURL 有语法错误，或者与同源策略相冲突（跨域访问）。 +- 如果 worker 的 MIME 类型不正确，将抛出一个 NetworkError 异常。worker 的 MIME 类型必须是 text/javascript 。 +- 如果 aURL 无法被解析（格式错误），将抛出一个 SyntaxError 异常。 -
let myWorker = new Worker("worker.js");
+## 例子
+
+下面的代码片段展示了通过 Worker() 创建 {{domxref("Worker")}} 对象的过程， 以及随后的使用方法：
+
+```js
+let myWorker = new Worker("worker.js");
 
 first.onchange = function() {
   myWorker.postMessage([first.value,second.value]);
   console.log('Message posted to worker');
-}
+} +``` -

完整的例子请看 Basic dedicated worker example (run dedicated worker).

+完整的例子请看 [Basic dedicated worker example](https://github.com/mdn/simple-web-worker) ([run dedicated worker](http://mdn.github.io/simple-web-worker/)). -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- -
{{Compat("api.Worker.Worker")}}
- -
-

Note: 浏览器可以被标记为对Worker()的完全支持尽管他并不支持一个以 modules 类型编写的脚本。截至 2019 年 8 月 1 日，暂无浏览器支持以模块类型编写的脚本。如果没有这种支持，moduleds 类型的脚本必须使用编译器翻译成无 module 代码才能在浏览器上运行。

-
- - +## 浏览器兼容性 +{{Compat("api.Worker.Worker")}} +> **备注：** 浏览器可以被标记为对`Worker()`的完全支持尽管他并不支持一个以 modules 类型编写的脚本。截至 2019 年 8 月 1 日，暂无浏览器支持以模块类型编写的脚本。如果没有这种支持，moduleds 类型的脚本必须使用编译器翻译成无 module 代码才能在浏览器上运行。 -
另请参阅
+另请参阅 - +- {{domxref("Worker")}} 它所属的接口。 +- [https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API](/zh-CN/docs/Web/API/Web_Workers_API) diff --git a/files/zh-cn/web/api/workerglobalscope/index.md b/files/zh-cn/web/api/workerglobalscope/index.md index 0d25cb8155a5e6..adb8c12c2c630c 100644 --- a/files/zh-cn/web/api/workerglobalscope/index.md +++ b/files/zh-cn/web/api/workerglobalscope/index.md @@ -2,126 +2,109 @@ title: WorkerGlobalScope slug: Web/API/WorkerGlobalScope --- -

{{APIRef("Web Workers API")}}

- -

Web Workers API 的 WorkerGlobalScope 接口 是一个代表了任何 scope of worker 的接口. Workers 没有浏览内容；这个 scope 包含的信息总是通过 {{domxref("Window")}} objects 传递 — 比如 event handlers, the console or the associated {{domxref("WorkerNavigator")}} object。每个 WorkerGlobalScope 都有自己的事件循环。

- -

每个 worker type 都有专门的这个接口：{{domxref("DedicatedWorkerGlobalScope")}} for dedicated workers, {{domxref("SharedWorkerGlobalScope")}} for shared workers, and {{domxref("ServiceWorkerGlobalScope")}} for ServiceWorker. self 属性返回每个内容的专门 scope.

- -

Properties

- -

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

- -

Standard properties

- -
-
{{domxref("WorkerGlobalScope.caches")}} {{readOnlyinline}}
-
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables service worker functionality such as storing assets for offline use, and generating custom responses to requests.
-
{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
-
Returns the {{domxref("WorkerNavigator")}} associated with the worker. It is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.
-
{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}
-
Returns a reference to the WorkerGlobalScope itself. Most of the time it is a specific scope like {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} or {{domxref("ServiceWorkerGlobalScope")}}.
-
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
-
Returns the {{domxref("WorkerLocation")}} associated with the worker. It is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.
-
- -

Non-standard properties

- -
-
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}}
-
Returns the {{domxref("Performance")}} associated with the worker. It is a regular performance object, except that only a subset of its property and methods are available to workers.
-
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}
-
Returns the {{domxref("Console")}} associated with the worker.
-
- -

Event Handlers

- -

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, and {{domxref("WindowBase64")}}.

- -
-
{{domxref("WorkerGlobalScope.onerror")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("error")}} event is raised.
-
{{domxref("WorkerGlobalScope.onoffline")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("offline")}} event is raised.
-
{{domxref("WorkerGlobalScope.ononline")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("online")}} event is raised.
-
{{domxref("WorkerGlobalScope.onlanguagechange")}}
-
An {{event("Event_handlers", "event handler")}} fired at the global/worker scope object when the user's preferred languages change.
-
- -
-
{{domxref("WorkerGlobalScope.onclose")}} {{non-standard_inline}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("close")}} event is raised.
-
{{domxref("WorkerGlobalScope.onrejectionhandled")}} {{non-standard_inline}}
-
An event handler for handled Promise rejection events.
-
{{domxref("WorkerGlobalScope.onunhandledrejection")}} {{non-standard_inline}}
-
An event handler for unhandled Promise rejection events.
-
- -

Methods

- -

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, {{domxref("WindowEventHandlers")}}, and {{domxref("GlobalFetch")}}.

- -

Standard methods

- -
-
{{domxref("WorkerGlobalScope.close()")}}
-
Discards any tasks queued in the WorkerGlobalScope's event loop, effectively closing this particular scope.
-
{{domxref("WorkerGlobalScope.importScripts()")}}
-
Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example: importScripts('foo.js', 'bar.js');
-
- -

Non-standard methods

- -
-
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
-
Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.
-
- -

Methods implemented from elsewhere

- -
-
{{domxref("WindowBase64.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowBase64.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("ImageBitmapFactories.createImageBitmap()")}}
-
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}.
-
{{domxref("GlobalFetch.fetch()")}}
-
Starts the process of fetching a resource.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules the execution of a function each X milliseconds.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Sets a delay for executing a function.
-
- -

Example

- -

You won't access WorkerGlobalScope directly in your code; however, its properties and methods are inherited by more specific global scopes such as {{domxref("DedicatedWorkerGlobalScope")}} and {{domxref("SharedWorkerGlobalScope")}}. For example, you could import another script into the worker and print out the contents of the worker scope's navigator object using the following two lines:

- -
importScripts('foo.js');
-console.log(navigator);
- -
-

Note: Since the global scope of the worker script is effectively the global scope of the worker you are running ({{domxref("DedicatedWorkerGlobalScope")}} or whatever) and all worker global scopes inherit methods, properties, etc. from WorkerGlobalScope, you can run lines such as those above without specifying a parent object.

-
- -

Specifications

+{{APIRef("Web Workers API")}} + +[Web Workers API](/zh-CN/docs/Web/API/Web_Workers_API) 的 **`WorkerGlobalScope`** 接口 是一个代表了任何 scope of worker 的接口. Workers 没有浏览内容；这个 scope 包含的信息总是通过 {{domxref("Window")}} objects 传递 — 比如 event handlers, the console or the associated {{domxref("WorkerNavigator")}} object。每个 `WorkerGlobalScope` 都有自己的事件循环。 + +每个 worker type 都有专门的这个接口：{{domxref("DedicatedWorkerGlobalScope")}} for dedicated workers, {{domxref("SharedWorkerGlobalScope")}} for shared workers, and {{domxref("ServiceWorkerGlobalScope")}} for [ServiceWorker](/zh-CN/docs/Web/API/ServiceWorker_API). `self` 属性返回每个内容的专门 scope. + +## Properties + +_This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}._ + +### Standard properties + +- {{domxref("WorkerGlobalScope.caches")}} {{readOnlyinline}} + - : Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables [service worker](/zh-CN/docs/Web/API/ServiceWorker_API) functionality such as storing assets for offline use, and generating custom responses to requests. +- {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}} + - : Returns the {{domxref("WorkerNavigator")}} associated with the worker. It is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers. +- {{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}} + - : Returns a reference to the `WorkerGlobalScope` itself. Most of the time it is a specific scope like {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} or {{domxref("ServiceWorkerGlobalScope")}}. +- {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}} + - : Returns the {{domxref("WorkerLocation")}} associated with the worker. It is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers. + +### Non-standard properties + +- {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} + - : Returns the {{domxref("Performance")}} associated with the worker. It is a regular performance object, except that only a subset of its property and methods are available to workers. +- {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}} + - : Returns the {{domxref("Console")}} associated with the worker. + +### Event Handlers + +_This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, and {{domxref("WindowBase64")}}._ + +- {{domxref("WorkerGlobalScope.onerror")}} + - : Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("error")}} event is raised. +- {{domxref("WorkerGlobalScope.onoffline")}} + - : Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("offline")}} event is raised. +- {{domxref("WorkerGlobalScope.ononline")}} + - : Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("online")}} event is raised. +- {{domxref("WorkerGlobalScope.onlanguagechange")}} + - : An {{event("Event_handlers", "event handler")}} fired at the global/worker scope object when the user's preferred languages change. +- {{domxref("WorkerGlobalScope.onclose")}} {{non-standard_inline}} + - : Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("close")}} event is raised. +- {{domxref("WorkerGlobalScope.onrejectionhandled")}} {{non-standard_inline}} + - : An event handler for handled [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) rejection events. +- {{domxref("WorkerGlobalScope.onunhandledrejection")}} {{non-standard_inline}} + - : An event handler for unhandled [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) rejection events. + +## Methods + +_This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, {{domxref("WindowEventHandlers")}}, and {{domxref("GlobalFetch")}}._ + +### Standard methods + +- {{domxref("WorkerGlobalScope.close()")}} + - : Discards any tasks queued in the `WorkerGlobalScope`'s event loop, effectively closing this particular scope. +- {{domxref("WorkerGlobalScope.importScripts()")}} + - : Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example:` importScripts('foo.js', 'bar.js');` + +### Non-standard methods + +- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}} + - : Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers. + +### Methods implemented from elsewhere + +- {{domxref("WindowBase64.atob()")}} + - : Decodes a string of data which has been encoded using base-64 encoding. +- {{domxref("WindowBase64.btoa()")}} + - : Creates a base-64 encoded ASCII string from a string of binary data. +- {{domxref("WindowTimers.clearInterval()")}} + - : Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}. +- {{domxref("WindowTimers.clearTimeout()")}} + - : Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}. +- {{domxref("ImageBitmapFactories.createImageBitmap()")}} + - : Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. +- {{domxref("GlobalFetch.fetch()")}} + - : Starts the process of fetching a resource. +- {{domxref("WindowTimers.setInterval()")}} + - : Schedules the execution of a function each X milliseconds. +- {{domxref("WindowTimers.setTimeout()")}} + - : Sets a delay for executing a function. + +## Example + +You won't access `WorkerGlobalScope` directly in your code; however, its properties and methods are inherited by more specific global scopes such as {{domxref("DedicatedWorkerGlobalScope")}} and {{domxref("SharedWorkerGlobalScope")}}. For example, you could import another script into the worker and print out the contents of the worker scope's `navigator` object using the following two lines: + +```js +importScripts('foo.js'); +console.log(navigator); +``` + +> **备注：** Since the global scope of the worker script is effectively the global scope of the worker you are running ({{domxref("DedicatedWorkerGlobalScope")}} or whatever) and all worker global scopes inherit methods, properties, etc. from `WorkerGlobalScope`, you can run lines such as those above without specifying a parent object. + +## Specifications {{Specifications}} -

Browser compatibility

+## Browser compatibility {{Compat("api.WorkerGlobalScope")}} -

See also

+## See also -
    -
  • Other global object interface: {{domxref("Window")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, , {{domxref("ServiceWorkerGlobalScope")}}
    • -
  • Other Worker-related interfaces: {{domxref("Worker")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}.
    • -
  • Using web workers.
    • -
+- Other global object interface: {{domxref("Window")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, , {{domxref("ServiceWorkerGlobalScope")}} +- Other Worker-related interfaces: {{domxref("Worker")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}. +- [Using web workers.](/zh-CN/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/zh-cn/web/api/xmlhttprequest/abort_event/index.md b/files/zh-cn/web/api/xmlhttprequest/abort_event/index.md index 7db43e48bd4287..8aa69b0f7ba819 100644 --- a/files/zh-cn/web/api/xmlhttprequest/abort_event/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/abort_event/index.md @@ -2,53 +2,49 @@ title: 'XMLHttpRequest: abort event' slug: Web/API/XMLHttpRequest/abort_event --- -
{{APIRef}}
- - - -
当一个请求终止时 abort 事件被触发，比如程序执行 {{domxref("XMLHttpRequest.abort()")}}。
- - +{{APIRef}}当一个请求终止时 `abort` 事件被触发，比如程序执行 {{domxref("XMLHttpRequest.abort()")}}。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("ProgressEvent")}}
Event handler property{{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}}
BubblesNo
CancelableNo
Interface{{domxref("ProgressEvent")}}
Event handler property + {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} +
-

Examples

- -

Live example

+## Examples -

HTML

+### Live example -
<div class="controls">
-    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
-    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
-    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
-</div>
+#### HTML
 
-<textarea readonly class="event-log"></textarea>
+```html +
+ + + +
- +``` -

JS

+#### JS -
const xhrButtonSuccess = document.querySelector('.xhr.success');
+```js
+const xhrButtonSuccess = document.querySelector('.xhr.success');
 const xhrButtonError = document.querySelector('.xhr.error');
 const xhrButtonAbort = document.querySelector('.xhr.abort');
 const log = document.querySelector('.event-log');
@@ -93,35 +89,32 @@ function runXHR(url) {
     return xhr;
 }
 
-xhrButtonSuccess.addEventListener('click', () => {
+xhrButtonSuccess.addEventListener('click', () => {
     runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
 });
 
-xhrButtonError.addEventListener('click', () => {
+xhrButtonError.addEventListener('click', () => {
     runXHR('https://somewhere.org/i-dont-exist');
 });
 
-xhrButtonAbort.addEventListener('click', () => {
+xhrButtonAbort.addEventListener('click', () => {
     runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
-});
+}); +``` -

Result

+#### Result -

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+{{ EmbedLiveSample('Live_example', '100%', '150px') }} -

Specifications

+## Specifications {{Specifications}} -

Browser compatibility

- - +## Browser compatibility -

{{Compat("api.XMLHttpRequest.abort_event")}}

+{{Compat("api.XMLHttpRequest.abort_event")}} -

See also

+## See also -
    -
  • Related events: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}
    • -
  • Monitoring progress
    • -
+- Related events: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}} +- [Monitoring progress](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) diff --git a/files/zh-cn/web/api/xmlhttprequest/error_event/index.md b/files/zh-cn/web/api/xmlhttprequest/error_event/index.md index 6276d205a5d52a..0fd307261078ff 100644 --- a/files/zh-cn/web/api/xmlhttprequest/error_event/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/error_event/index.md @@ -2,49 +2,51 @@ title: 'XMLHttpRequest: error 事件' slug: Web/API/XMLHttpRequest/error_event --- -
{{APIRef}}
+{{APIRef}} -

当请求遇到错误时，将触发error 事件。

+当请求遇到错误时，将触发`error` 事件。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
可冒泡No
可取消No
接口{{domxref("ProgressEvent")}}
事件处理程序属性{{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}}
可冒泡No
可取消No
接口{{domxref("ProgressEvent")}}
事件处理程序属性 + {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} +
-

示例

+## 示例 -

在线示例

+### 在线示例 -

HTML

+#### HTML -
<div class="controls">
-    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
-    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
-    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
-</div>
-
-<textarea readonly class="event-log"></textarea>
+```html +
+ + + +
- +``` -

JS

+#### JS -
const xhrButtonSuccess = document.querySelector('.xhr.success');
+```js
+const xhrButtonSuccess = document.querySelector('.xhr.success');
 const xhrButtonError = document.querySelector('.xhr.error');
 const xhrButtonAbort = document.querySelector('.xhr.abort');
 const log = document.querySelector('.event-log');
@@ -89,35 +91,32 @@ function runXHR(url) {
     return xhr;
 }
 
-xhrButtonSuccess.addEventListener('click', () => {
+xhrButtonSuccess.addEventListener('click', () => {
     runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
 });
 
-xhrButtonError.addEventListener('click', () => {
+xhrButtonError.addEventListener('click', () => {
     runXHR('https://somewhere.org/i-dont-exist');
 });
 
-xhrButtonAbort.addEventListener('click', () => {
+xhrButtonAbort.addEventListener('click', () => {
     runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
-});
+}); +``` -

结果

+#### 结果 -

{{ EmbedLiveSample('在线示例', '100%', '150px') }}

+{{ EmbedLiveSample('在线示例', '100%', '150px') }} -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.XMLHttpRequest.error_event")}}

+{{Compat("api.XMLHttpRequest.error_event")}} -

其他

+## 其他 -
    -
  • 相关事件: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}
    • -
  • 监视进度
    • -
+- 相关事件: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}} +- [监视进度](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) diff --git a/files/zh-cn/web/api/xmlhttprequest/html_in_xmlhttprequest/index.md b/files/zh-cn/web/api/xmlhttprequest/html_in_xmlhttprequest/index.md index b005d41a9aa285..5cd9aa90bb808a 100644 --- a/files/zh-cn/web/api/xmlhttprequest/html_in_xmlhttprequest/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/html_in_xmlhttprequest/index.md @@ -2,35 +2,34 @@ title: HTML in XMLHttpRequest slug: Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest --- -

W3C {{domxref("XMLHttpRequest")}} 规范为 XMLHttpRequest添加 HTML 语法解析功能，此前仅支持 XML 语法解析。该功能允许 Web 应用程序使用XMLHttpRequest 作为解析的 DOM。

+W3C {{domxref("XMLHttpRequest")}} 规范为 [`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest)添加 HTML 语法解析功能，此前仅支持 XML 语法解析。该功能允许 Web 应用程序使用`XMLHttpRequest 作为解析的 DOM。` -

局限

+## 局限 -

为了阻止同步使用 XMLHttpRequest，HTML 在同步模式下不支持使用。并且，只有当 responseType 属性设置为 'document' 的情况下，HTML 支持才可用。这种限制避免了浪费时间解析 HTML，而传统代码在默认模式下使用 XMLHttpRequest 来检索 text/html 资源的 responseText. 此外，该限制避免了遗留代码的问题，该代码假定 HTTP 错误页面（通常具有 text/html 响应正文）的 responseXML 为空。

+为了阻止同步使用 XMLHttpRequest，HTML 在同步模式下不支持使用。并且，只有当 responseType 属性设置为 'document' 的情况下，HTML 支持才可用。这种限制避免了浪费时间解析 HTML，而传统代码在默认模式下使用 XMLHttpRequest 来检索 `text/html` 资源的 responseText. 此外，该限制避免了遗留代码的问题，该代码假定 HTTP 错误页面（通常具有 `text/html` 响应正文）的 responseXML 为空。 -

用法

+## 用法 -

使用 XMLHttpRequest 将 HTML 资源恢复为 DOM 就像使用 XMLHttpRequest 将 XML 资源恢复为 DOM 一样，除了您不能使用同步模式，您必须通过将字符串 “document” 分配给 responseType 属性来显式请求文档调用 open() 之后调用 send 之前的 XMLHttpRequest 对象。

+使用 XMLHttpRequest 将 HTML 资源恢复为 DOM 就像使用 XMLHttpRequest 将 XML 资源恢复为 DOM 一样，除了您不能使用同步模式，您必须通过将字符串 “document” 分配给 responseType 属性来显式请求文档调用 `open()` 之后调用 `send` 之前的 XMLHttpRequest 对象。 -

- -
var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 xhr.onload = function() {
   console.log(this.responseXML.title);
 }
 xhr.open("GET", "file.html");
 xhr.responseType = "document";
 xhr.send();
-
+``` -

功能检测

+## 功能检测 -

方法 1

+### 方法 1 -

该方法依赖于功能的 “强制异步” 性质。当你尝试设置一个以 “sync” 方式打开的 XMLHttpRequest 对象后，尝试将设置 responseType 会在实现该功能的浏览器上引发错误，其他浏览器则运行良好。

+该方法依赖于功能的 “强制异步” 性质。当你尝试设置一个以 “sync” 方式打开的 XMLHttpRequest 对象后，尝试将设置 responseType 会在实现该功能的浏览器上引发错误，其他浏览器则运行良好。 -
-
function HTMLinXHR() {
+```js
+function HTMLinXHR() {
   if (!window.XMLHttpRequest)
     return false;
   var req = new window.XMLHttpRequest();
@@ -42,24 +41,26 @@ xhr.send();
   }
   return false;
 }
-
-
+``` -

在 JSFiddle 中查看

+[在 JSFiddle 中查看](https://jsfiddle.net/HTcKP/1/) -

This method is synchronous, does not rely on external assets though it may not be as reliable as method 2 described below since it does not check the actual feature but an indication of that feature.

+This method is synchronous, does not rely on external assets though it may not be as reliable as method 2 described below since it does not check the actual feature but an indication of that feature. -

方法 2

+### 方法 2 -

检测浏览器是否支持 XMLHttpRequest 中的 HTML 解析有两个挑战。首先，检测结果是异步获取的，因为 HTML 支持仅在异步模式下可用。Second, you have to actually fetch a test document over HTTP, because testing with a data: URL would end up testing data:URL support at the same time.

+检测浏览器是否支持 XMLHttpRequest 中的 HTML 解析有两个挑战。首先，检测结果是异步获取的，因为 HTML 支持仅在异步模式下可用。Second, you have to actually fetch a test document over HTTP, because testing with a `data:` URL would end up testing `data:`URL support at the same time. -

因此，为了检测 HTML 支持，服务器上需要一个测试 HTML 文件。这个测试文件很小，格式不是很完整：

+因此，为了检测 HTML 支持，服务器上需要一个测试 HTML 文件。这个测试文件很小，格式不是很完整： -
<title>&amp;&<</title>
+```js +&&< +``` -

如果文件名为 detect.html，以下功能可用于检测 HTML 解析支持：

+如果文件名为 detect.html，以下功能可用于检测 HTML 解析支持： -
function detectHtmlInXhr(callback) {
+```js
+function detectHtmlInXhr(callback) {
   if (!window.XMLHttpRequest) {
     window.setTimeout(function() { callback(false); }, 0);
     return;
@@ -67,9 +68,9 @@ xhr.send();
   var done = false;
   var xhr = new window.XMLHttpRequest();
   xhr.onreadystatechange = function() {
-    if (this.readyState == 4 && !done) {
+    if (this.readyState == 4 && !done) {
       done = true;
-      callback(!!(this.responseXML && this.responseXML.title && this.responseXML.title == "&&<"));
+      callback(!!(this.responseXML && this.responseXML.title && this.responseXML.title == "&&<"));
     }
   }
   xhr.onabort = xhr.onerror = function() {
@@ -91,39 +92,40 @@ xhr.send();
     }, 0);
   }
 }
-
+``` -

参数 callback 是一个函数，如果 HTML 解析是支持的，则将以 true 作为唯一参数被异步调用，如果不支持 HTML 解析，则为 false。

+参数 callback 是一个函数，如果 HTML 解析是支持的，则将以 true 作为唯一参数被异步调用，如果不支持 HTML 解析，则为 false。 -

在 JSFiddle 中查看

+[在 JSFiddle 中查看](https://jsfiddle.net/xfvXR/1/) -

字符编码

+## 字符编码 -

如果在 HTTP Content-Type 头部中声明了字符编码，则使用该字符编码。否则，如果存在字节顺序标记，则使用由字节顺序标记指示的编码。否则，如果有一个 meta tag 声明文件的前 1024 个字节中的编码，则使用该编码。否则，文件被解码为 UTF-8。

+如果在 HTTP Content-Type 头部中声明了字符编码，则使用该字符编码。否则，如果存在字节顺序标记，则使用由字节顺序标记指示的编码。否则，如果有一个 meta tag 声明文件的前 1024 个字节中的编码，则使用该编码。否则，文件被解码为 UTF-8。 -

老版本的浏览器中处理 HTML

+## 老版本的浏览器中处理 HTML -

XMLHttpRequest 最初只支持 XML 解析。 HTML 解析支持是最近的一个补充。对于较老的浏览器，您甚至可以使用与正则表达式关联的 responseText 属性，以获取例如已知其 ID 的 HTML 元素的源代码：

+XMLHttpRequest 最初只支持 XML 解析。 HTML 解析支持是最近的一个补充。对于较老的浏览器，您甚至可以使用与正则表达式关联的 responseText 属性，以获取例如已知其 ID 的 HTML 元素的源代码： -
function getHTML (oXHR, sTargetId) {
-  var  rOpen = new RegExp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + sTargetId + "[\"\'][^>]*>" ,"i"),
+```js
+function getHTML (oXHR, sTargetId) {
+  var  rOpen = new RegExp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + sTargetId + "[\"\'][^>]*>" ,"i"),
        sSrc = oXHR.responseText, aExec = rOpen.exec(sSrc);
 
-  return aExec ? (new RegExp("(?:(?:.(?!<\\s*" + aExec[1] + "[^>]*[>]))*.?<\\s*" + aExec[1] + "[^>]*[>](?:.(?!<\\s*\/\\s*" + aExec[1] + "\\s*>))*.?<\\s*\/\\s*" + aExec[1] + "\\s*>)*(?:.(?!<\\s*\/\\s*" + aExec[1] + "\\s*>))*.?", "i")).exec(sSrc.slice(sSrc.indexOf(aExec[0]) + aExec[0].length)) || "" : "";
+  return aExec ? (new RegExp("(?:(?:.(?!<\\s*" + aExec[1] + "[^>]*[>]))*.?<\\s*" + aExec[1] + "[^>]*[>](?:.(?!<\\s*\/\\s*" + aExec[1] + "\\s*>))*.?<\\s*\/\\s*" + aExec[1] + "\\s*>)*(?:.(?!<\\s*\/\\s*" + aExec[1] + "\\s*>))*.?", "i")).exec(sSrc.slice(sSrc.indexOf(aExec[0]) + aExec[0].length)) || "" : "";
 }
 
 var oReq = new XMLHttpRequest();
 oReq.open("GET", "yourPage.html", true);
 oReq.onload = function () { console.log(getHTML(this, "intro")); };
 oReq.send(null);
-
+``` -
注： 该解决方案对于解释器来说更为昂贵。仅在确实需要的情况下使用.
+> **备注：** 该解决方案对于解释器来说更为昂贵。**仅在确实需要的情况下使用**。 -

Specifications

+## Specifications {{Specifications}} -

Browser compatibility

+## Browser compatibility {{Compat("api.XMLHttpRequest")}} diff --git a/files/zh-cn/web/api/xmlhttprequest/index.md b/files/zh-cn/web/api/xmlhttprequest/index.md index 490cc2f627fecc..b1598c1c32edaa 100644 --- a/files/zh-cn/web/api/xmlhttprequest/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/index.md @@ -2,167 +2,148 @@ title: XMLHttpRequest slug: Web/API/XMLHttpRequest --- -
{{DefaultAPISidebar("XMLHttpRequest")}}
- -

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 {{Glossary("AJAX")}} 编程中被大量使用。

- -

{{InheritanceDiagram(650, 150)}}

- -

尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

- -

如果您的通信流程需要从服务器端接收事件或消息数据，请考虑通过 {{domxref("EventSource")}} 接口使用 server-sent events。对于全双工的通信， WebSocket 可能是更好的选择。

- -

构造函数

- -
-
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
-
该构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。
-
- -

属性

- -

此接口继承了 {{domxref("XMLHttpRequestEventTarget")}} 和 {{domxref("EventTarget")}} 的属性。

- -
-
{{domxref("XMLHttpRequest.onreadystatechange")}}
-
当 readyState 属性发生变化时，调用的 {{event("Event_handlers", "event handler")}}。
-
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
-
返回 一个无符号短整型（unsigned short）数字，代表请求的状态码。
-
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
-
返回一个 {{domxref("ArrayBuffer")}}、{{domxref("Blob")}}、{{domxref("Document")}}，或 {{domxref("DOMString")}}，具体是哪种类型取决于 {{domxref("XMLHttpRequest.responseType")}} 的值。其中包含整个响应实体（response entity body）。
-
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
-
返回一个 {{domxref("DOMString")}}，该 {{domxref("DOMString")}} 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。
-
{{domxref("XMLHttpRequest.responseType")}}
-
一个用于定义响应类型的枚举值（enumerated value）。
-
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
-
返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。
-
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
-
返回一个 {{domxref("Document")}}，其中包含该请求的响应，如果请求未成功、尚未发送或是不能被解析为 XML 或 HTML，则返回 null。
-
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
-
返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。
-
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
-
返回一个 {{domxref("DOMString")}}，其中包含 HTTP 服务器返回的响应状态。与 {{domxref("XMLHTTPRequest.status")}} 不同的是，它包含完整的响应状态文本（例如，"200 OK"）。 -
-

注意：根据 HTTP/2 规范（8.1.2.4 Response Pseudo-Header Fields，响应伪标头字段），HTTP/2 没有定义任何用于携带 HTTP/1.1 状态行中包含的版本（version）或者原因短语（reason phrase）的方法。

-
-
-
- -
-
{{domxref("XMLHttpRequest.timeout")}}
-
一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。
-
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
-
当请求超时调用的 {{event("Event_handlers", "event handler")}}。
-
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
-
{{domxref("XMLHttpRequestUpload")}}，代表上传进度。
-
{{domxref("XMLHttpRequest.withCredentials")}}
-
一个{{domxref("Boolean", "布尔值")}}，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。
-
- -

非标准属性

- -
-
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
-
一个 nsIChannel，对象在执行请求时使用的通道。
-
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
-
一个布尔值，如果为真，请求将在没有 cookie 和身份验证 header 头的情况下发送。
-
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
-
一个布尔值，如果为真，则在请求时不会强制执行同源策略。
-
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
-
一个布尔值，它指示对象是否是后台服务器端的请求。
-
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
-
一个 {{jsxref("ArrayBuffer")}}，把请求的响应作为一个 JavaScript TypedArray。
-
{{domxref("XMLHttpRequest.multipart")}}{{Deprecated_Inline}}
-
这是一个 Gecko 专有属性，是一个布尔值，已在 Firefox/Gecko 22 中被删除。请考虑使用 Server-Sent Event、Web Socket、或来自进度事件的 responseText 代替。
-
- -

事件处理器

- -

作为 XMLHttpRequest 实例的属性之一，所有浏览器都支持 onreadystatechange。

- -

后来，许多浏览器实现了一些额外的事件（onload、onerror、onprogress 等）。详见Using XMLHttpRequest。

- -

更多现代浏览器，包括 Firefox，除了可以设置 on* 属性外，也提供标准的监听器 {{domxref("EventTarget.addEventListener", "addEventListener()")}} API 来监听XMLHttpRequest 事件。

- -

方法

- -
-
{{domxref("XMLHttpRequest.abort()")}}
-
如果请求已被发出，则立刻中止请求。
-
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
-
以字符串的形式返回所有用 {{Glossary("CRLF")}} 分隔的响应头，如果没有收到响应，则返回 null。
-
{{domxref("XMLHttpRequest.getResponseHeader()")}}
-
返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 null。
-
{{domxref("XMLHttpRequest.open()")}}
-
初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。
-
{{domxref("XMLHttpRequest.overrideMimeType()")}}
-
覆写由服务器返回的 MIME 类型。
-
{{domxref("XMLHttpRequest.send()")}}
-
发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
-
{{domxref("XMLHttpRequest.setRequestHeader()")}}
-
设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。
-
- -

非标准方法

- -
-
{{domxref("XMLHttpRequest.init()")}}
-
在 C++ 代码中初始化一个 XHR 对象。 -
警告：该方法不能在 JavaScript 代码中使用。
-
-
{{domxref("XMLHttpRequest.openRequest()")}}
-
初始化一个请求。这个方法只能在原生 C++ 代码中使用；如果用 JavaScript 代码来初始化请求，使用 open() 代替。可参考 open() 的文档。
-
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
-
send() 方法的变体，用来发送二进制数据。
-
- -

事件

- -
-
{{domxref("XMLHttpRequest/abort_event", "abort")}}
-
当 request 被停止时触发，例如当程序调用 {{domxref("XMLHttpRequest.abort()")}} 时。
- 也可以使用 {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} 属性。
-
{{domxref("XMLHttpRequest/error_event", "error")}}
-
当 request 遭遇错误时触发。
- 也可以使用 {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} 属性
-
{{domxref("XMLHttpRequest/load_event", "load")}}
-
{{domxref("XMLHttpRequest")}}请求成功完成时触发。
- 也可以使用 {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} 属性。
-
{{domxref("XMLHttpRequest/loadend_event", "loadend")}}
-
当请求结束时触发，无论请求成功 ( {{domxref("XMLHttpRequest/load_event", "load")}}) 还是失败 ({{domxref("XMLHttpRequest/abort_event", "abort")}} 或 {{domxref("XMLHttpRequest/error_event", "error")}})。
- 也可以使用 {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} 属性。
-
{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}
-
接收到响应数据时触发。
- 也可以使用 {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} 属性。
-
{{domxref("XMLHttpRequest/progress_event", "progress")}}
-
当请求接收到更多数据时，周期性地触发。
- 也可以使用 {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} 属性。
-
{{domxref("XMLHttpRequest/timeout_event", "timeout")}}
-
在预设时间内没有接收到响应时触发。
- 也可以使用 {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} 属性。
-
- -

规范

+{{DefaultAPISidebar("XMLHttpRequest")}} + +`XMLHttpRequest`（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。`XMLHttpRequest` 在 {{Glossary("AJAX")}} 编程中被大量使用。 + +{{InheritanceDiagram(650, 150)}} + +尽管名称如此，`XMLHttpRequest` 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 [HTTP](/zh-CN/docs/Web/HTTP) 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。 + +如果您的通信流程需要从服务器端接收事件或消息数据，请考虑通过 {{domxref("EventSource")}} 接口使用 [server-sent events](/zh-CN/docs/Web/API/Server-sent_events)。对于全双工的通信， [WebSocket](/zh-CN/docs/Web/API/WebSockets_API) 可能是更好的选择。 + +## 构造函数 + +- {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} + - : 该构造函数用于初始化一个 `XMLHttpRequest` 实例对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。 + +## 属性 + +_此接口继承了 {{domxref("XMLHttpRequestEventTarget")}} 和 {{domxref("EventTarget")}} 的属性。_ + +- {{domxref("XMLHttpRequest.onreadystatechange")}} + - : 当 `readyState` 属性发生变化时，调用的 {{event("Event_handlers", "event handler")}}。 +- {{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}} + - : 返回 一个无符号短整型（`unsigned short`）数字，代表请求的状态码。 +- {{domxref("XMLHttpRequest.response")}} {{readonlyinline}} + - : 返回一个 {{domxref("ArrayBuffer")}}、{{domxref("Blob")}}、{{domxref("Document")}}，或 {{domxref("DOMString")}}，具体是哪种类型取决于 {{domxref("XMLHttpRequest.responseType")}} 的值。其中包含整个响应实体（response entity body）。 +- {{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}} + - : 返回一个 {{domxref("DOMString")}}，该 {{domxref("DOMString")}} 包含对请求的响应，如果请求未成功或尚未发送，则返回 `null`。 +- {{domxref("XMLHttpRequest.responseType")}} + - : 一个用于定义响应类型的枚举值（enumerated value）。 +- {{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}} + - : 返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。 +- {{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}} + - : 返回一个 {{domxref("Document")}}，其中包含该请求的响应，如果请求未成功、尚未发送或是不能被解析为 XML 或 HTML，则返回 `null`。 +- {{domxref("XMLHttpRequest.status")}} {{readonlyinline}} + - : 返回一个无符号短整型（`unsigned short`）数字，代表请求的响应状态。 +- {{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}} + - : 返回一个 {{domxref("DOMString")}}，其中包含 HTTP 服务器返回的响应状态。与 {{domxref("XMLHTTPRequest.status")}} 不同的是，它包含完整的响应状态文本（例如，"`200 OK`"）。 + + > **备注：** 根据 HTTP/2 规范（[8.1.2.4](https://http2.github.io/http2-spec/#rfc.section.8.1.2.4) [Response Pseudo-Header Fields](https://http2.github.io/http2-spec/#HttpResponse)，响应伪标头字段），HTTP/2 没有定义任何用于携带 HTTP/1.1 状态行中包含的版本（version）或者原因短语（reason phrase）的方法。 + +- {{domxref("XMLHttpRequest.timeout")}} + - : 一个无符号长整型（`unsigned long`）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。 +- {{domxref("XMLHttpRequestEventTarget.ontimeout")}} + - : 当请求超时调用的 {{event("Event_handlers", "event handler")}}。 +- {{domxref("XMLHttpRequest.upload")}} {{readonlyinline}} + - : {{domxref("XMLHttpRequestUpload")}}，代表上传进度。 +- {{domxref("XMLHttpRequest.withCredentials")}} + - : 一个{{domxref("Boolean", "布尔值")}}，用来指定跨域 `Access-Control` 请求是否应当带有授权信息，如 cookie 或授权 header 头。 + +### 非标准属性 + +- {{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}} + - : 一个 `nsIChannel`，对象在执行请求时使用的通道。 +- {{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}} + - : 一个布尔值，如果为真，请求将在没有 cookie 和身份验证 header 头的情况下发送。 +- {{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}} + - : 一个布尔值，如果为真，则在请求时不会强制执行同源策略。 +- {{domxref("XMLHttpRequest.mozBackgroundRequest")}} + - : 一个布尔值，它指示对象是否是后台服务器端的请求。 +- {{domxref("XMLHttpRequest.mozResponseArrayBuffer")}} {{Deprecated_Inline}} {{ReadOnlyInline}} + - : 一个 {{jsxref("ArrayBuffer")}}，把请求的响应作为一个 JavaScript TypedArray。 +- {{domxref("XMLHttpRequest.multipart")}}{{Deprecated_Inline}} + - : 这是一个 Gecko 专有属性，是一个布尔值，已在 Firefox/Gecko 22 中被删除。请考虑使用 [Server-Sent Event](/zh-CN/docs/Web/API/Server-sent_events)、[Web Socket](/zh-CN/docs/Web/API/WebSockets_API)、或来自进度事件的 `responseText` 代替。 + +### 事件处理器 + +作为 `XMLHttpRequest` 实例的属性之一，所有浏览器都支持 `onreadystatechange`。 + +后来，许多浏览器实现了一些额外的事件（`onload`、`onerror`、`onprogress` 等）。详见[Using XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)。 + +更多现代浏览器，包括 Firefox，除了可以设置 `on*` 属性外，也提供标准的监听器 {{domxref("EventTarget.addEventListener", "addEventListener()")}} API 来监听`XMLHttpRequest` 事件。 + +## 方法 + +- {{domxref("XMLHttpRequest.abort()")}} + - : 如果请求已被发出，则立刻中止请求。 +- {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} + - : 以字符串的形式返回所有用 {{Glossary("CRLF")}} 分隔的响应头，如果没有收到响应，则返回 `null`。 +- {{domxref("XMLHttpRequest.getResponseHeader()")}} + - : 返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 `null`。 +- {{domxref("XMLHttpRequest.open()")}} + - : 初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 [`openRequest()`](/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest)。 +- {{domxref("XMLHttpRequest.overrideMimeType()")}} + - : 覆写由服务器返回的 MIME 类型。 +- {{domxref("XMLHttpRequest.send()")}} + - : 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。 +- {{domxref("XMLHttpRequest.setRequestHeader()")}} + - : 设置 HTTP 请求头的值。必须在 `open()` 之后、`send()` 之前调用 `setRequestHeader()` 方法。 + +### 非标准方法 + +- {{domxref("XMLHttpRequest.init()")}} + + - : 在 C++ 代码中初始化一个 XHR 对象。 + + > **警告：** 该方法不能在 JavaScript 代码中使用。 + +- {{domxref("XMLHttpRequest.openRequest()")}} + - : 初始化一个请求。这个方法只能在原生 C++ 代码中使用；如果用 JavaScript 代码来初始化请求，使用 [`open()`]() 代替。可参考 `open()` 的文档。 +- {{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}} + - : `send()` 方法的变体，用来发送二进制数据。 + +## 事件 + +- {{domxref("XMLHttpRequest/abort_event", "abort")}} + - : 当 request 被停止时触发，例如当程序调用 {{domxref("XMLHttpRequest.abort()")}} 时。 + 也可以使用 {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} 属性。 +- {{domxref("XMLHttpRequest/error_event", "error")}} + - : 当 request 遭遇错误时触发。 + 也可以使用 {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} 属性 +- {{domxref("XMLHttpRequest/load_event", "load")}} + - : {{domxref("XMLHttpRequest")}}请求成功完成时触发。 + 也可以使用 {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} 属性。 +- {{domxref("XMLHttpRequest/loadend_event", "loadend")}} + - : 当请求结束时触发，无论请求成功 ( {{domxref("XMLHttpRequest/load_event", "load")}}) 还是失败 ({{domxref("XMLHttpRequest/abort_event", "abort")}} 或 {{domxref("XMLHttpRequest/error_event", "error")}})。 + 也可以使用 {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} 属性。 +- {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}} + - : 接收到响应数据时触发。 + 也可以使用 {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} 属性。 +- {{domxref("XMLHttpRequest/progress_event", "progress")}} + - : 当请求接收到更多数据时，周期性地触发。 + 也可以使用 {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} 属性。 +- {{domxref("XMLHttpRequest/timeout_event", "timeout")}} + - : 在预设时间内没有接收到响应时触发。 + 也可以使用 {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} 属性。 + +## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 +{{Compat("api.XMLHttpRequest")}} +## 参见 -
{{Compat("api.XMLHttpRequest")}}
+- {{domxref("XMLSerializer")}}：将 DOM 树解析为 XML 对象 +- MDN 教程中的 `XMLHttpRequest`： -

参见

+ - [Ajax — Getting Started](/zh-CN/docs/AJAX/Getting_Started) + - [Using XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) + - [HTML in XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) - +- [HTML5 Rocks — New Tricks in XMLHttpRequest2](http://www.html5rocks.com/en/tutorials/file/xhr2/) +- HTTP Feature-Policy 指令 {{httpheader("Feature-Policy/sync-xhr", "sync-xhr")}} diff --git a/files/zh-cn/web/api/xmlhttprequest/load_event/index.md b/files/zh-cn/web/api/xmlhttprequest/load_event/index.md index 8b1df29af5242e..5a01d091261d11 100644 --- a/files/zh-cn/web/api/xmlhttprequest/load_event/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/load_event/index.md @@ -2,49 +2,51 @@ title: 'XMLHttpRequest: load event' slug: Web/API/XMLHttpRequest/load_event --- -
{{APIRef}}
+{{APIRef}} -

当一个{{domxref("XMLHttpRequest")}}请求完成的时候会触发load 事件。

+当一个{{domxref("XMLHttpRequest")}}请求完成的时候会触发`load` 事件。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("ProgressEvent")}}
Event handler property{{domxref("XMLHttpRequestEventTarget/onload", "onload")}}
BubblesNo
CancelableNo
Interface{{domxref("ProgressEvent")}}
Event handler property + {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} +
-

示例

+## 示例 -

在线例子

+### 在线例子 -

HTML

+#### HTML -
<div class="controls">
-    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
-    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
-    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
-</div>
-
-<textarea readonly class="event-log"></textarea>
+```html +
+ + + +
- +``` -

JS

+#### JS -
const xhrButtonSuccess = document.querySelector('.xhr.success');
+```js
+const xhrButtonSuccess = document.querySelector('.xhr.success');
 const xhrButtonError = document.querySelector('.xhr.error');
 const xhrButtonAbort = document.querySelector('.xhr.abort');
 const log = document.querySelector('.event-log');
@@ -89,33 +91,32 @@ function runXHR(url) {
     return xhr;
 }
 
-xhrButtonSuccess.addEventListener('click', () => {
+xhrButtonSuccess.addEventListener('click', () => {
     runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
 });
 
-xhrButtonError.addEventListener('click', () => {
+xhrButtonError.addEventListener('click', () => {
     runXHR('https://somewhere.org/i-dont-exist');
 });
 
-xhrButtonAbort.addEventListener('click', () => {
+xhrButtonAbort.addEventListener('click', () => {
     runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
-});
+}); +``` -

结果

+#### 结果 -

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+{{ EmbedLiveSample('Live_example', '100%', '150px') }} -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat("api.XMLHttpRequest.load_event")}}

+{{Compat("api.XMLHttpRequest.load_event")}} -

了解更多

+**了解更多** -
    -
  • 相关事件: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}
    • -
  • 监测进度
    • -
+- 相关事件: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}} +- [监测进度](/Web/API/XMLHttpRequest/Using_XMLHttpRequest#监测进度) diff --git a/files/zh-cn/web/api/xmlhttprequest/mozresponsearraybuffer/index.md b/files/zh-cn/web/api/xmlhttprequest/mozresponsearraybuffer/index.md index 9eb471662350d6..fa95a0f61c8bf9 100644 --- a/files/zh-cn/web/api/xmlhttprequest/mozresponsearraybuffer/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/mozresponsearraybuffer/index.md @@ -2,10 +2,8 @@ title: XMLHttpRequest.mozResponseArrayBuffer slug: Web/API/XMLHttpRequest/mozResponseArrayBuffer --- -

{{APIRef('XMLHttpRequest')}}

+{{APIRef('XMLHttpRequest')}} -
-

自 Gecko 6 以来已过时

-
+> **警告：** 自 Gecko 6 以来已过时 -

这是一个 ArrayBuffer 响应给这个请求，写为 JavaScript 类型数组。 如果请求不成功，或者它尚未发送，它就是 NULL。

+这是一个 [`ArrayBuffer`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) 响应给这个请求，写为 JavaScript 类型数组。 如果请求不成功，或者它尚未发送，它就是 `NULL`。 diff --git a/files/zh-cn/web/api/xmlhttprequest/open/index.md b/files/zh-cn/web/api/xmlhttprequest/open/index.md index 15d22e946877ec..ccf21305567cb6 100644 --- a/files/zh-cn/web/api/xmlhttprequest/open/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/open/index.md @@ -2,45 +2,46 @@ title: XMLHttpRequest.open() slug: Web/API/XMLHttpRequest/open --- -

{{APIRef('XMLHttpRequest')}}

+{{APIRef('XMLHttpRequest')}} -

XMLHttpRequest.open() 方法初始化一个请求。该方法要从 JavaScript 代码使用；从原生代码初始化一个请求，使用 openRequest() 替代。

+**XMLHttpRequest.open()** 方法初始化一个请求。该方法要从 JavaScript 代码使用；从原生代码初始化一个请求，使用 [`openRequest()`]() 替代。 -
注意：为已激活的请求调用此方法（open()或openRequest() 已被调用）相当于调用abort()。
+> **备注：** 为已激活的请求调用此方法（`open()`或`openRequest()` 已被调用）相当于调用`abort()`。 -

语法

+## 语法 -
xhrReq.open(method, url);
-xhrReq.open(method, url, async);
-xhrReq.open(method, url, async, user);
-xhrReq.open(method, url, async, user, password);
-
+```js +xhrReq.open(method, url); +xhrReq.open(method, url, async); +xhrReq.open(method, url, async, user); +xhrReq.open(method, url, async, user, password); +``` -

参数

+### 参数 -
-
method
-
要使用的 HTTP 方法，比如 GET、POST、PUT、DELETE、等。对于非 HTTP(S) URL 被忽略。
-
url
-
一个 {{domxref("DOMString")}} 表示要向其发送请求的 URL。
-
async {{optional_inline}}
-
一个可选的布尔参数，表示是否异步执行操作，默认为 true。如果值为 false，send() 方法直到收到答复前不会返回。如果 true，已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true，否则将引发异常。 -
注意：主线程上的同步请求很容易破坏用户体验，应该避免；实际上，许多浏览器已完全弃用主线程上的同步 XHR 支持。在 {{domxref("Worker")}} 中允许同步请求
-
-
user {{optional_inline}}
-
可选的用户名用于认证用途；默认为 null。
-
password {{optional_inline}}
-
可选的密码用于认证用途，默认为 null。
-
+- `method` + - : 要使用的 HTTP 方法，比如 `GET`、`POST`、`PUT`、`DELETE`、等。对于非 HTTP(S) URL 被忽略。 +- `url` + - : 一个 {{domxref("DOMString")}} 表示要向其发送请求的 URL。 +- `async` {{optional_inline}} -

规格

+ - : 一个可选的布尔参数，表示是否异步执行操作，默认为 `true`。如果值为 `false`，`send()` 方法直到收到答复前不会返回。如果 `true`，已完成事务的通知可供事件监听器使用。如果 `multipart` 属性为 `true` 则这个必须为 `true`，否则将引发异常。 + + > **备注：** 主线程上的同步请求很容易破坏用户体验，应该避免；实际上，许多浏览器已完全弃用主线程上的同步 XHR 支持。在 {{domxref("Worker")}} 中允许同步请求 + +- `user` {{optional_inline}} + - : 可选的用户名用于认证用途；默认为 `null`。 +- `password` {{optional_inline}} + - : 可选的密码用于认证用途，默认为 `null`。 + +## 规格 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.XMLHttpRequest.open")}} -

参见

+## 参见 -

使用 XMLHttpRequest

+[使用 XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) diff --git a/files/zh-cn/web/api/xmlhttprequest/progress_event/index.md b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.md index c1842e78aa22a7..c011523babfa6a 100644 --- a/files/zh-cn/web/api/xmlhttprequest/progress_event/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.md @@ -2,49 +2,51 @@ title: progress event slug: Web/API/XMLHttpRequest/progress_event --- -

{{APIRef}}

+{{APIRef}} -

progress事件会在请求接收到数据的时候被周期性触发。

+**`progress`**事件会在请求接收到数据的时候被周期性触发。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("ProgressEvent")}}
Event handler property{{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}}
BubblesNo
CancelableNo
Interface{{domxref("ProgressEvent")}}
Event handler property + {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} +
-

示例

+## 示例 -

Live example

+### Live example -

HTML

+#### HTML -
<div class="controls">
-    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
-    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
-    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
-</div>
-
-<textarea readonly class="event-log"></textarea>
+```html +
+ + + +
- +``` -

JS

+#### JS -
const xhrButtonSuccess = document.querySelector('.xhr.success');
+```js
+const xhrButtonSuccess = document.querySelector('.xhr.success');
 const xhrButtonError = document.querySelector('.xhr.error');
 const xhrButtonAbort = document.querySelector('.xhr.abort');
 const log = document.querySelector('.event-log');
@@ -89,35 +91,32 @@ function runXHR(url) {
     return xhr;
 }
 
-xhrButtonSuccess.addEventListener('click', () => {
+xhrButtonSuccess.addEventListener('click', () => {
     runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
 });
 
-xhrButtonError.addEventListener('click', () => {
+xhrButtonError.addEventListener('click', () => {
     runXHR('https://somewhere.org/i-dont-exist');
 });
 
-xhrButtonAbort.addEventListener('click', () => {
+xhrButtonAbort.addEventListener('click', () => {
     runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
-});
+}); +``` -

Result

+#### Result -

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+{{ EmbedLiveSample('Live_example', '100%', '150px') }} -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

- - +## 浏览器兼容性 -

{{Compat("api.XMLHttpRequest.progress_event")}}

+{{Compat("api.XMLHttpRequest.progress_event")}} -

相关链接

+## 相关链接 -
    -
  • Related events: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}
    • -
  • Monitoring progress
    • -
+- Related events: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}} +- [Monitoring progress](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) diff --git a/files/zh-cn/web/api/xmlhttprequest/readystate/index.md b/files/zh-cn/web/api/xmlhttprequest/readystate/index.md index 87fcc57cf7b847..b8cf18cbfe04d0 100644 --- a/files/zh-cn/web/api/xmlhttprequest/readystate/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/readystate/index.md @@ -2,65 +2,35 @@ title: XMLHttpRequest.readyState slug: Web/API/XMLHttpRequest/readyState --- -

{{APIRef('XMLHttpRequest')}}

- -

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
值状态描述
0UNSENT代理被创建，但尚未调用 open() 方法。
1OPENEDopen() 方法已经被调用。
2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得。
3LOADING下载中；responseText 属性已经包含部分数据。
4DONE下载操作已完成。
- -
-
UNSENT
-
XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法。
-
OPENED
-
open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部， 可以调用 send() 方法来发起请求。
-
HEADERS_RECEIVED
-
send() 方法已经被调用，响应头也已经被接收。
-
LOADING
-
响应体部分正在被接收。如果 responseType 属性是“text”或空字符串，responseText 将会在载入的过程中拥有部分响应数据。
-
DONE
-
请求操作已经完成。这意味着数据传输已经彻底完成或失败。
-
- -
-

在 IE 中，状态有着不同的名称，并不是 UNSENT，OPENED ，HEADERS_RECEIVED ，LOADING 和 DONE，而是 READYSTATE_UNINITIALIZED (0)，READYSTATE_LOADING (1) ，READYSTATE_LOADED (2) ，READYSTATE_INTERACTIVE (3) 和 READYSTATE_COMPLETE (4) 。

-
- -

示例

- -
var xhr = new XMLHttpRequest();
+{{APIRef('XMLHttpRequest')}}
+
+**XMLHttpRequest.readyState** 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：
+
+| 值  | 状态               | 描述                                                |
+| --- | ------------------ | --------------------------------------------------- |
+| `0` | `UNSENT`           | 代理被创建，但尚未调用 open() 方法。                |
+| `1` | `OPENED`           | `open()` 方法已经被调用。                           |
+| `2` | `HEADERS_RECEIVED` | `send()` 方法已经被调用，并且头部和状态已经可获得。 |
+| `3` | `LOADING`          | 下载中；`responseText` 属性已经包含部分数据。       |
+| `4` | `DONE`             | 下载操作已完成。                                    |
+
+- UNSENT
+  - : XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法。
+- OPENED
+  - : open() 方法已经被触发。在这个状态中，可以通过 [setRequestHeader()](/zh-CN/docs/Web/API/XMLHttpRequest/setRequestHeader) 方法来设置请求的头部， 可以调用 [send()](/zh-CN/docs/Web/API/XMLHttpRequest/send) 方法来发起请求。
+- HEADERS_RECEIVED
+  - : send() 方法已经被调用，响应头也已经被接收。
+- LOADING
+  - : 响应体部分正在被接收。如果 [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) 属性是“text”或空字符串，[`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) 将会在载入的过程中拥有部分响应数据。
+- DONE
+  - : 请求操作已经完成。这意味着数据传输已经彻底完成或失败。
+
+> **备注：** 在 IE 中，状态有着不同的名称，并不是 `UNSENT`，`OPENED` ，`HEADERS_RECEIVED` ，`LOADING` `和 DONE，而是 READYSTATE_UNINITIALIZED` (0)，`READYSTATE_LOADING` (1) ，`READYSTATE_LOADED` (2) ，`READYSTATE_INTERACTIVE` (3) `和 READYSTATE_COMPLETE` (4) 。
+
+## 示例
+
+```js
+var xhr = new XMLHttpRequest();
 console.log('UNSENT', xhr.readyState); // readyState 为 0
 
 xhr.open('GET', '/api', true);
@@ -75,12 +45,12 @@ xhr.onload = function () {
 };
 
 xhr.send(null);
-
+``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} diff --git a/files/zh-cn/web/api/xmlhttprequest/readystatechange_event/index.md b/files/zh-cn/web/api/xmlhttprequest/readystatechange_event/index.md index 8bf57446d02afd..c93b91e7c817eb 100644 --- a/files/zh-cn/web/api/xmlhttprequest/readystatechange_event/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/readystatechange_event/index.md @@ -2,48 +2,46 @@ title: XMLHttpRequest.onreadystatechange slug: Web/API/XMLHttpRequest/readystatechange_event --- -
{{APIRef}}
+{{APIRef}} -

只要 readyState 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 {{domxref("XMLHttpRequest")}} 的{{domxref("XMLHttpRequest.readyState", "readyState")}} 属性发生改变时触发 {{event("readystatechange")}} 事件的时候被调用。

+只要 `readyState` 属性发生变化，就会调用相应的[处理函数](/zh-CN/docs/Web/API/EventHandler)。这个回调函数会被用户线程所调用。**`XMLHttpRequest.onreadystatechange`** 会在 {{domxref("XMLHttpRequest")}} 的{{domxref("XMLHttpRequest.readyState", "readyState")}} 属性发生改变时触发 {{event("readystatechange")}} 事件的时候被调用。 -
-

警告：这个方法不该用于同步的 requests 对象，并且不能在内部 (C++) 代码中使用。

-
+> **警告：** 这个方法不该用于同步的 requests 对象，并且不能在内部 (C++) 代码中使用。 -

当一个 XMLHttpRequest 请求被 abort() 方法取消时，其对应的 readystatechange 事件不会被触发。

+当一个 `XMLHttpRequest` 请求被 [abort()](/zh-CN/docs/Web/API/XMLHttpRequest/abort) 方法取消时，其对应的 `readystatechange` 事件不会被触发。 -
-

UPDATE: 在下面的浏览器版本中会触发 (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). 例子在 here - 重新加载几次页面即可。

-
+> **备注：** UPDATE: 在下面的浏览器版本中会触发 (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). 例子在 [here](https://jsfiddle.net/merksam/ve5oc0gn/) - 重新加载几次页面即可。 -

语法

+## 语法 -
XMLHttpRequest.onreadystatechange = callback;
+``` +XMLHttpRequest.onreadystatechange = callback; +``` -

取值

+### 取值 -
    -
  • 当 readyState 的值改变的时候，callback 函数会被调用。
    • -
+- 当 `readyState` 的值改变的时候，`callback` 函数会被调用。 -

示例

+## 示例 -
var xhr= new XMLHttpRequest(),
+```js
+var xhr= new XMLHttpRequest(),
     method = "GET",
     url = "https://developer.mozilla.org/";
 
-xhr.open(method, url, true);
+xhr.open(method, url, true);
 xhr.onreadystatechange = function () {
-  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
     console.log(xhr.responseText)
   }
 }
-xhr.send();
+xhr.send(); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.XMLHttpRequest.readystatechange_event")}} diff --git a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.md b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.md index 7d0f52c386c853..ebf801c76018e7 100644 --- a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.md @@ -2,74 +2,68 @@ title: XMLHttpRequest.responseType slug: Web/API/XMLHttpRequest/responseType --- -
{{APIRef('XMLHttpRequest')}}
+{{APIRef('XMLHttpRequest')}} -

{{DOMxRef("XMLHttpRequest")}} 属性 responseType 是一个枚举字符串值，用于指定响应中包含的数据类型。

+{{DOMxRef("XMLHttpRequest")}} 属性 **`responseType`** 是一个枚举字符串值，用于指定响应中包含的数据类型。 -

它还允许作者更改响应类型。如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。

+它还允许作者更改响应类型。如果将 `responseType` 的值设置为空字符串，则会使用 `text` 作为默认值。 -

语法

+## 语法 -
var type = XMLHttpRequest.responseType;
+```js
+var type = XMLHttpRequest.responseType;
 
-XMLHttpRequest.responseType = type;
+XMLHttpRequest.responseType = type; +``` -

值

+### 值 -

{{JSxRef("Global_Objects/String")}} 类型的值，指定响应包含的数据类型。它可以采用以下值：

+{{JSxRef("Global_Objects/String")}} 类型的值，指定响应包含的数据类型。它可以采用以下值： -
-
""
-
空的 responseType 字符串与默认类型 "text" 相同。
-
"arraybuffer"
-
{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 JavaScript {{JSxRef("ArrayBuffer")}}。
-
"blob"
-
{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 {{DOMxRef("Blob")}} 对象。
-
"document"
-
{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个 {{Glossary("HTML")}} {{DOMxRef("Document")}} 或 {{Glossary("XML")}} {{DOMxRef("XMLDocument")}}，根据接收到的数据的 MIME 类型而定。请参阅 HTML in XMLHttpRequest 中的 HTML，了解有关使用 XHR 获取 HTML 内容的更多信息。
-
"json"
-
{{DOMxRef("XMLHttpRequest.response", "response")}} 是通过将接收到的数据内容解析为 {{Glossary("JSON")}} 而创建的 JavaScript 对象。
-
"text"
-
{{DOMxRef("XMLHttpRequest.response", "response")}} 是 {{DOMxRef("DOMString")}} 对象中的文本。
-
"ms-stream" {{non-standard_inline}}
-
{{DOMxRef("XMLHttpRequest.response", "response")}} 是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。
-
+- `""` + - : 空的 `responseType` 字符串与默认类型 `"text"` 相同。 +- `"arraybuffer"` + - : {{DOMxRef("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 JavaScript {{JSxRef("ArrayBuffer")}}。 +- `"blob"` + - : {{DOMxRef("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 {{DOMxRef("Blob")}} 对象。 +- `"document"` + - : {{DOMxRef("XMLHttpRequest.response", "response")}} 是一个 {{Glossary("HTML")}} {{DOMxRef("Document")}} 或 {{Glossary("XML")}} {{DOMxRef("XMLDocument")}}，根据接收到的数据的 MIME 类型而定。请参阅 [HTML in XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) 中的 HTML，了解有关使用 XHR 获取 HTML 内容的更多信息。 +- `"json"` + - : {{DOMxRef("XMLHttpRequest.response", "response")}} 是通过将接收到的数据内容解析为 {{Glossary("JSON")}} 而创建的 JavaScript 对象。 +- `"text"` + - : {{DOMxRef("XMLHttpRequest.response", "response")}} 是 {{DOMxRef("DOMString")}} 对象中的文本。 +- `"ms-stream"` {{non-standard_inline}} + - : {{DOMxRef("XMLHttpRequest.response", "response")}} 是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。 -
-

将 responseType 设置为特定值时，作者应确保服务器实际发送的响应与该格式兼容。如果服务器返回的数据与设置的 responseType 不兼容，则 {{DOMxRef("XMLHttpRequest.response", "response")}} 的值将为null .

-
+> **备注：** 将 `responseType` 设置为特定值时，作者应确保服务器实际发送的响应与该格式兼容。如果服务器返回的数据与设置的 `responseType` 不兼容，则 {{DOMxRef("XMLHttpRequest.response", "response")}} 的值将为`null` . -

异常

+### 异常 -
-
InvalidAccessError
-
试图更改 XMLHttpRequest 的 responseType，该值处于同步模式但不在 {{DOMxRef("Worker")}} 中。有关其他详细信息，请参阅下面的 同步 XHR 限制。
-
+- `InvalidAccessError` + - : 试图更改 `XMLHttpRequest` 的 `responseType`，该值处于同步模式但不在 {{DOMxRef("Worker")}} 中。有关其他详细信息，请参阅下面的 [同步 XHR 限制](#synchronous_xhr_restrictions)。 -

使用说明

+## 使用说明 -

同步 XHR 限制

+### 同步 XHR 限制 -

您不能在同步XMLHttpRequest 中更改 responseType 的值，除非请求属于 {{DOMxRef("Worker")}}。此限制部分旨在帮助确保同步操作不会用于阻塞浏览器主线程的大型事务，从而阻碍用户体验。

+您不能在同步`XMLHttpRequest` 中更改 `responseType` 的值，除非请求属于 {{DOMxRef("Worker")}}。此限制部分旨在帮助确保同步操作不会用于阻塞浏览器主线程的大型事务，从而阻碍用户体验。 -

XHR 请求默认是异步的；它们仅通过在调用 {{DOMxRef("XMLHttpRequest.open", "open()")}} 时将 false 作为可选async 参数的值传递来置于同步模式。

+XHR 请求默认是异步的；它们仅通过在调用 {{DOMxRef("XMLHttpRequest.open", "open()")}} 时将 `false` 作为可选`async` 参数的值传递来置于同步模式。 -

Worker 中的限制

+### Worker 中的限制 -

在 {{DOMxRef("Worker")}} 中尝试将 responseType 的值设置为 document 时会被忽略。

+在 {{DOMxRef("Worker")}} 中尝试将 `responseType` 的值设置为 `document` 时会被忽略。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 -

{{Compat}}

+{{Compat}} -

相关链接

+## 相关链接 -
    -
  • 使用 XMLHttpRequest
    • -
  • HTML in XMLHttpRequest
    • -
  • {{DOMxRef("XMLHttpRequest.response", "response")}}, {{DOMxRef("XMLHttpRequest.responseText", "responseText")}} 和 {{DOMxRef("XMLHttpRequest.responseXML", "responseXML")}}
    • -
+- [使用 XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- [HTML in XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) +- {{DOMxRef("XMLHttpRequest.response", "response")}}, {{DOMxRef("XMLHttpRequest.responseText", "responseText")}} 和 {{DOMxRef("XMLHttpRequest.responseXML", "responseXML")}} diff --git a/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md b/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md index 5e9f4702b172ff..f571ea5de3b9f1 100644 --- a/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md @@ -2,35 +2,33 @@ title: XMLHttpRequest.responseXML slug: Web/API/XMLHttpRequest/responseXML --- -

{{APIRef('XMLHttpRequest')}}

+{{APIRef('XMLHttpRequest')}} -

XMLHttpRequest.responseXML 属性是一个只读值，它返回一个包含请求检索的 HTML 或 XML 的{{domxref("Document")}}，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。默认是当作“text / xml” 来解析。当 {{domxref("XMLHttpRequest.responseType", "responseType")}} 设置为 “document” 并且请求已异步执行时，响应将被当作 “text / html” 来解析。responseXML 对于任何其他类型的数据以及 data: URLs 为 null。

+**XMLHttpRequest.responseXML** 属性是一个只读值，它返回一个包含请求检索的 HTML 或 XML 的{{domxref("Document")}}，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。默认是当作“text / xml” 来解析。当 {{domxref("XMLHttpRequest.responseType", "responseType")}} 设置为 “document” 并且请求已异步执行时，响应将被当作 “text / html” 来解析。`responseXML` 对于任何其他类型的数据以及 [`data:` URLs](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) 为 null。 -
-

responseXML 在这个属性的历史堪称神器，它可以同时在 HTML 和 XML 中工作

-
+> **备注：** `responseXML` 在这个属性的历史堪称神器，它可以同时在 HTML 和 XML 中工作 -

如果服务器没有明确指出 {{HTTPHeader("Content-Type")}} 头是 "text/xml" 还是 "application/xml", 你可以使用{{domxref("XMLHttpRequest.overrideMimeType()")}} 强制 XMLHttpRequest 解析为 XML。

+如果服务器没有明确指出 {{HTTPHeader("Content-Type")}} 头是 `"text/xml"` 还是 `"application/xml"`, 你可以使用{{domxref("XMLHttpRequest.overrideMimeType()")}} 强制 `XMLHttpRequest` 解析为 XML。 -

语法

+## 语法 -
var data = XMLHttpRequest.responseXML;
-
+``` +var data = XMLHttpRequest.responseXML; +``` -

值

+### 值 -

{{domxref("Document")}} 中包含从 {{domxref("XMLHttpRequest")}} 中收到的 HTML 节点或解析后的 XML 节点，也可能是在没有收到任何数据或数据类型错误的情况下返回的 null。

+{{domxref("Document")}} 中包含从 {{domxref("XMLHttpRequest")}} 中收到的 HTML 节点或解析后的 XML 节点，也可能是在没有收到任何数据或数据类型错误的情况下返回的 null。 -

例外

+### 例外 -
-
InvalidStateError
-
{{domxref("XMLHttpRequest.responseType", "responseType")}} 既不是 "document" 也不是空字符串 (接收的数据应是 XML 或 HTML)。
-
+- `InvalidStateError` + - : {{domxref("XMLHttpRequest.responseType", "responseType")}} 既不是 `"document"` 也不是空字符串 (接收的数据应是 XML 或 HTML)。 -

示例

+## 示例 -
var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 xhr.open('GET', '/server', true);
 
 // 如果已指明，responseType 必须是空字符串或 "document"
@@ -48,20 +46,19 @@ xhr.onload = function () {
   }
 };
 
-xhr.send(null);
+xhr.send(null); +``` -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.XMLHttpRequest.responseXML")}} -

了解更多

+## 了解更多 -
    -
  • {{domxref("XMLHttpRequest")}}
    • -
  • {{domxref("XMLHttpRequest.response")}}
    • -
  • {{domxref("XMLHttpRequest.responseType")}}
    • -
+- {{domxref("XMLHttpRequest")}} +- {{domxref("XMLHttpRequest.response")}} +- {{domxref("XMLHttpRequest.responseType")}} diff --git a/files/zh-cn/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.md b/files/zh-cn/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.md index 780ff7d78c87da..0bf32484bd8a84 100644 --- a/files/zh-cn/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.md @@ -2,13 +2,14 @@ title: 发送和接收二进制数据 slug: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data --- -

使用 JavaScript 类型数组接受二进制数据

+## 使用 JavaScript 类型数组接受二进制数据 -

可以通过设置一个 XMLHttpRequest 对象的 responseType属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认)，"arraybuffer"、"blob"、"document"、"json" 和 "text"。response 属性的值会根据 responseType 属性包含实体主体（entity body），它可能会是一个 ArrayBuffer、Blob、Document、JSON, string，或者为NULL(如果请求未完成或失败)

+可以通过设置一个 XMLHttpRequest 对象的 `responseType`属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认)，"arraybuffer"、"blob"、"document"、"json" 和 "text"。`response` 属性的值会根据 `responseType` 属性包含实体主体（entity body），它可能会是一个 `ArrayBuffer`、`Blob`、`Document`、`JSON`, string，或者为`NULL(如果请求未完成或失败)` -

下例读取了一个二进制图像文件，并且由该文件的二进制原生字节创建了一个 8 位无符号整数的数组。注意，这不会解码图像，但会读取像素。 你需要一个 png 解码库（png decoding library）。

+下例读取了一个二进制图像文件，并且由该文件的二进制原生字节创建了一个 8 位无符号整数的数组。注意，这不会解码图像，但会读取像素。 你需要一个 png 解码库（[png decoding library](https://github.com/devongovett/png.js/)）。 -
var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 oReq.open("GET", "/myfile.png", true);
 oReq.responseType = "arraybuffer";
 
@@ -16,18 +17,19 @@ oReq.onload = function (oEvent) {
   var arrayBuffer = oReq.response; // 注意：不是 oReq.responseText
   if (arrayBuffer) {
     var byteArray = new Uint8Array(arrayBuffer);
-    for (var i = 0; i < byteArray.byteLength; i++) {
+    for (var i = 0; i < byteArray.byteLength; i++) {
       // 对数组中的每个字节进行操作
     }
   }
 };
 
 oReq.send(null);
-
+``` -

也可以通过给 responseType 属性设置为 “blob”，将二进制文件读取为 {{domxref("Blob")}} 类型的数据。

+也可以通过给 responseType 属性设置为 `“blob”`，将二进制文件读取为 {{domxref("Blob")}} 类型的数据。 -
var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 oReq.open("GET", "/myfile.png", true);
 oReq.responseType = "blob";
 
@@ -36,13 +38,15 @@ oReq.onload = function(oEvent) {
   // ...
 };
 
-oReq.send();
+oReq.send(); +``` -

在老的浏览器中接受二进制数据

+## 在老的浏览器中接受二进制数据 -

下面的load_binary_resource() 方法可以从指定的 URL 那里加载二进制数据，并将数据返回给调用者。

+下面的`load_binary_resource()` 方法可以从指定的 URL 那里加载二进制数据，并将数据返回给调用者。 -
function load_binary_resource(url) {
+```js
+function load_binary_resource(url) {
   var req = new XMLHttpRequest();
   req.open('GET', url, false);
   //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
@@ -51,25 +55,27 @@ oReq.send();
if (req.status != 200) return ''; return req.responseText; } - +``` -

最为奇妙的操作在第五行，该行重写了默认的 MIME 类型，强制浏览器将该响应当成纯文本文件来对待，使用一个用户自定义的字符集。这样就是告诉了浏览器，不要去解析数据，直接返回未处理过的字节码。

+最为奇妙的操作在第五行，该行重写了默认的 MIME 类型，强制浏览器将该响应当成纯文本文件来对待，使用一个用户自定义的字符集。这样就是告诉了浏览器，不要去解析数据，直接返回未处理过的字节码。 -
var filestream = load_binary_resource(url);
-var abyte = filestream.charCodeAt(x) & 0xff; // 扔掉的高位字节 (f7)
-
+```js +var filestream = load_binary_resource(url); +var abyte = filestream.charCodeAt(x) & 0xff; // 扔掉的高位字节 (f7) +``` -

上例从请求回来的二进制数据中得到偏移量为 x 处的字节。有效的偏移量范围是 0 到 filestream.length-1。

+上例从请求回来的二进制数据中得到偏移量为 x 处的字节。有效的偏移量范围是 0 到 `filestream.length-1`。 -

查看 使用 XMLHttpRequest 下载文件 了解详情，查看下载文件。

+查看 [使用 XMLHttpRequest 下载文件](http://web.archive.org/web/20071103070418/http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html) 了解详情，查看[下载文件](/zh-cn/Code_snippets/Downloading_Files)。 -

发送二进制数据

+## 发送二进制数据 -

XMLHttpRequest 对象的 send 方法已被增强，可以通过简单的传入一个 ArrayBuffer、{{ domxref("Blob") }} 或者 {{ domxref("File") }} 对象来发送二进制数据。

+XMLHttpRequest 对象的 `send` 方法已被增强，可以通过简单的传入一个 [`ArrayBuffer`](/zh-cn/JavaScript_typed_arrays/ArrayBuffer)、{{ domxref("Blob") }} 或者 {{ domxref("File") }} 对象来发送二进制数据。 -

下例创建了一个文本文件，并使用 POST 方法将该文件发送到了服务器上。你也可以使用文本文件之外的其他二进制数据类型。

+下例创建了一个文本文件，并使用 `POST` 方法将该文件发送到了服务器上。你也可以使用文本文件之外的其他二进制数据类型。 -
var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 oReq.open("POST", url, true);
 oReq.onload = function (oEvent) {
   // 上传完成后。
@@ -79,50 +85,53 @@ var bb = new BlobBuilder(); // 需要合适的前缀: window.MozBlobBuilder 或
 bb.append('abc123');
 
 oReq.send(bb.getBlob('text/plain'));
-
+``` -

将类型数组作为二进制数据发送

+## 将类型数组作为二进制数据发送 -

你可以将 JavaScript 类型数组作为二进制数据发送出去。

+你可以将 JavaScript 类型数组作为二进制数据发送出去。 -
var myArray = new ArrayBuffer(512);
+```js
+var myArray = new ArrayBuffer(512);
 var longInt8View = new Uint8Array(myArray);
 
-for (var i=0; i< longInt8View.length; i++) {
+for (var i=0; i< longInt8View.length; i++) {
   longInt8View[i] = i % 255;
 }
 
 var xhr = new XMLHttpRequest;
 xhr.open("POST", url, false);
 xhr.send(myArray);
-
+``` -

上例新建了一个 512 字节的 8 比特整数的数组并发送它，当然，你也可以发送任意的二进制数据。

+上例新建了一个 512 字节的 8 比特整数的数组并发送它，当然，你也可以发送任意的二进制数据。 -
注意： 从 Gecko 9.0 {{ geckoRelease("9.0") }} 开始，添加了使用 XMLHttpRequest 发送 ArrayBuffer 对象的功能。
+> **备注：** 从 Gecko 9.0 {{ geckoRelease("9.0") }} 开始，添加了使用 XMLHttpRequest 发送 [`ArrayBuffer`](/zh-cn/JavaScript_typed_arrays/ArrayBuffer) 对象的功能。 -

提交表单和上传文件

+## 提交表单和上传文件 -

请阅读此文

+请阅读[此文](/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files) -

Firefox 私有方法

+## Firefox 私有方法 -

下面的例子使用了 POST 请求，用 Firefox 私有的非标准方法 sendAsBinary() 将二进制数据以异步模式传输了出去。

+下面的例子使用了 `POST` 请求，用 Firefox 私有的非标准方法 `sendAsBinary()` 将二进制数据以异步模式传输了出去。 -
var req = new XMLHttpRequest();
+```js
+var req = new XMLHttpRequest();
 req.open("POST", url, true);
 // 这里应该设置适当的 MIME 请求头
 req.setRequestHeader("Content-Length", 741);
 req.sendAsBinary(aBody);
-
+``` -

第四行将 Content-Length 请求头设置为 741，表示发送的数据长度为 741 个字节。你应该根据你要发送的数据的大小改变这个值。

+第四行将 Content-Length 请求头设置为 741，表示发送的数据长度为 741 个字节。你应该根据你要发送的数据的大小改变这个值。 -

第五行使用 sendAsBinary() 方法发送这个请求。

+第五行使用 `sendAsBinary()` 方法发送这个请求。 -

你也可以通过将一个 nsIFileInputStream 对象实例传给 send() 方法来发送二进制内容，这样的话，你不需要自己去设置 Content-Length 请求头的大小，程序会自动设置：

+你也可以通过将一个 `nsIFileInputStream` 对象实例传给 [`send()`]() 方法来发送二进制内容，这样的话，你不需要自己去设置 `Content-Length` 请求头的大小，程序会自动设置： -
// 新建一个文件流。
+```js
+// 新建一个文件流。
 var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                        .createInstance(Components.interfaces.nsIFileInputStream);
 stream.init(file, 0x04 | 0x08, 0644, 0x04); // file 是一个 nsIFile 对象实例
@@ -142,6 +151,6 @@ var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
 req.open('PUT', url, false); // 同步模式！
 req.setRequestHeader('Content-Type', mimeType);
 req.send(stream);
-
+``` -

{{APIRef("XMLHttpRequest")}}

+{{APIRef("XMLHttpRequest")}} diff --git a/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.md b/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.md index c6ff024dca0745..78faaff39fa695 100644 --- a/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.md @@ -2,40 +2,37 @@ title: XMLHttpRequest.setRequestHeader() slug: Web/API/XMLHttpRequest/setRequestHeader --- -

{{APIRef('XMLHttpRequest')}}

+{{APIRef('XMLHttpRequest')}} -

XMLHttpRequest.setRequestHeader() 是设置 HTTP 请求头部的方法。此方法必须在 {{domxref("XMLHttpRequest.open", "open()")}} 方法和 {{domxref("XMLHttpRequest.send", "send()")}} 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。

+**XMLHttpRequest.setRequestHeader()** 是设置 HTTP 请求头部的方法。此方法必须在 {{domxref("XMLHttpRequest.open", "open()")}} 方法和 {{domxref("XMLHttpRequest.send", "send()")}} 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。 -

如果没有设置 {{HTTPHeader("Accept")}} 属性，则此发送出{{domxref("XMLHttpRequest.send", "send()")}} 的值为此属性的默认值：*/*。

+如果没有设置 {{HTTPHeader("Accept")}} 属性，则此发送出{{domxref("XMLHttpRequest.send", "send()")}} 的值为此属性的默认值：`*/*`。 -

安全起见，有些请求头的值只能由 user agent 设置：{{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和{{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。

+安全起见，有些请求头的值只能由 user agent 设置：{{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和{{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。 -
-

自定义一些 header 属性进行跨域请求时，可能会遇到"not allowed by Access-Control-Allow-Headers in preflight response"，你可能需要在你的服务端设置 "Access-Control-Allow-Headers"。

-
+> **备注：** 自定义一些 header 属性进行跨域请求时，可能会遇到"**not allowed by Access-Control-Allow-Headers in preflight response**"，你可能需要在你的服务端设置 "Access-Control-Allow-Headers"。 -

语法

+## 语法 -
myReq.setRequestHeader(header, value);
-
+``` +myReq.setRequestHeader(header, value); +``` -

参数

+### 参数 -
-
header
-
属性的名称。
-
value
-
属性的值。
-
+- `header` + - : 属性的名称。 +- `value` + - : 属性的值。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} -

参考

+## 参考 -

使用 XMLHttpRequest

+[使用 XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) diff --git a/files/zh-cn/web/api/xmlhttprequest/timeout/index.md b/files/zh-cn/web/api/xmlhttprequest/timeout/index.md index 5c6e6269290967..2cb0ea7d3f00bb 100644 --- a/files/zh-cn/web/api/xmlhttprequest/timeout/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/timeout/index.md @@ -2,21 +2,20 @@ title: XMLHttpRequest.timeout slug: Web/API/XMLHttpRequest/timeout --- -
{{APIRef('XMLHttpRequest')}}
+{{APIRef('XMLHttpRequest')}} -

XMLHttpRequest.timeout 是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。超时并不应该用在一个 {{Glossary('document environment')}} 中的同步 XMLHttpRequests 请求中，否则将会抛出一个 InvalidAccessError 类型的错误。当超时发生， timeout 事件将会被触发。

+**`XMLHttpRequest.timeout`** 是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。超时并不应该用在一个 {{Glossary('document environment')}} 中的同步 XMLHttpRequests 请求中，否则将会抛出一个 `InvalidAccessError` 类型的错误。当超时发生， [timeout](/zh-CN/docs/Web/Events/timeout) 事件将会被触发。 -
-

注意：你不能在拥有的 window 中，给同步请求使用超时。

-
+> **备注：** 你不能在拥有的 window 中，给同步请求使用超时。 -

在异步请求中使用 timeout

+[在异步请求中使用 timeout](/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#.E4.BE.8B.E5.AD.90.3A_.E4.BD.BF.E7.94.A8.E8.B6.85.E6.97.B6) -

在 IE 中，超时属性可能只能在调用 open() 方法之后且在调用 send() 方法之前设置。

+在 IE 中，超时属性可能只能在调用 [open()](/zh-CN/docs/Web/API/XMLHttpRequest/open) 方法之后且在调用 [send()](/zh-CN/docs/Web/API/XMLHttpRequest/send) 方法之前设置。 -

示例

+## 示例 -
var xhr = new XMLHttpRequest();
+```
+var xhr = new XMLHttpRequest();
 xhr.open('GET', '/server', true);
 
 xhr.timeout = 2000; // 超时时间，单位是毫秒
@@ -29,8 +28,9 @@ xhr.ontimeout = function (e) {
   // XMLHttpRequest 超时。在此做某事。
 };
 
-xhr.send(null);
+xhr.send(null); +``` -

规范

+## 规范 {{Specifications}} diff --git a/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md b/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md index 83c0ddf701f4c2..4fcc3bc84ccdea 100644 --- a/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/timeout_event/index.md @@ -2,54 +2,52 @@ title: timeout slug: Web/API/XMLHttpRequest/timeout_event --- -
-

当进度由于预定时间到期而终止时，会触发timeout 事件。

-
+`当进度由于预定时间到期而终止时，会触发timeout` 事件。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
冒泡否
可取消否
目标对象{{domxref("XMLHttpRequest")}}
接口{{domxref("ProgressEvent")}}
冒泡否
可取消否
目标对象{{domxref("XMLHttpRequest")}}
接口{{domxref("ProgressEvent")}}
-

示例

+## 示例 -
var client = new XMLHttpRequest()
+```js
+var client = new XMLHttpRequest()
   client.open("GET", "http://www.example.org/example.txt")
   client.ontimeout = function(e) {
     console.error("Timeout!!")
   }
-  client.send()
+ client.send() +``` -

继承

+## 继承 -

timeout 事件实现了 {{domxref("ProgressEvent")}} 接口，它继承自 {{domxref("Event")}} — 它拥有在这个接口上定义的属性和方法。

+`timeout` 事件实现了 {{domxref("ProgressEvent")}} 接口，它继承自 {{domxref("Event")}} — 它拥有在这个接口上定义的属性和方法。 -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat("api.XMLHttpRequest.timeout_event")}} -

相关链接

+## 相关链接 - +- [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest) diff --git a/files/zh-cn/web/api/xmlhttprequest/upload/index.md b/files/zh-cn/web/api/xmlhttprequest/upload/index.md index 1379da3e6ba476..8e4ea3cf984430 100644 --- a/files/zh-cn/web/api/xmlhttprequest/upload/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/upload/index.md @@ -2,53 +2,26 @@ title: XMLHttpRequest.upload slug: Web/API/XMLHttpRequest/upload --- -

{{APIRef('XMLHttpRequest')}}

+{{APIRef('XMLHttpRequest')}} -

XMLHttpRequest.upload 属性返回一个 {{domxref("XMLHttpRequestUpload")}}对象，用来表示上传的进度。这个对象是不透明的，但是作为一个{{domxref("XMLHttpRequestEventTarget")}}，可以通过对其绑定事件来追踪它的进度。

+**XMLHttpRequest.upload 属性返回一个** {{domxref("XMLHttpRequestUpload")}}对象，用来表示上传的进度。这个对象是不透明的，但是作为一个{{domxref("XMLHttpRequestEventTarget")}}，可以通过对其绑定事件来追踪它的进度。 -

可以被绑定在 upload 对象上的事件监听器如下：

+可以被绑定在 upload 对象上的事件监听器如下： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
事件相应属性的信息类型
onloadstart获取开始
onprogress数据传输进行中
onabort获取操作终止
onerror获取失败
onload获取成功
ontimeout获取操作在用户规定的时间内未完成
onloadend获取完成（不论成功与否）
+| 事件 | 相应属性的信息类型 | +| ------------- | -------------------------------- | +| `onloadstart` | 获取开始 | +| `onprogress` | 数据传输进行中 | +| `onabort` | 获取操作终止 | +| `onerror` | 获取失败 | +| `onload` | 获取成功 | +| `ontimeout` | 获取操作在用户规定的时间内未完成 | +| `onloadend` | 获取完成（不论成功与否） | -

规范

+## 规范 {{Specifications}} -

浏览器兼容性

+## 浏览器兼容性 {{Compat}} diff --git a/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.md index 02a2d9f422b3a0..2ffe49d34bab21 100644 --- a/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -2,76 +2,74 @@ title: 使用 XMLHttpRequest slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest --- -
{{APIRef("XMLHttpRequest")}}
+{{APIRef("XMLHttpRequest")}} -

在该教程中，我们将使用{{domxref("XMLHttpRequest")}} 来发送 HTTP 请求以实现网站和服务器之间的数据交换。XMLHttpRequest常见和晦涩的使用情况都将包含在例子中。

+在该教程中，我们将使用{{domxref("XMLHttpRequest")}} 来发送 [HTTP](/zh-CN/docs/Web/HTTP) 请求以实现网站和服务器之间的数据交换。`XMLHttpRequest`常见和晦涩的使用情况都将包含在例子中。 -

发送一个 HTTP 请求，需要创建一个 XMLHttpRequest 对象，打开一个 URL，最后发送请求。当所有这些事务完成后，该对象将会包含一些诸如响应主体或 HTTP status 的有用信息。

+发送一个 HTTP 请求，需要创建一个 `XMLHttpRequest` 对象，打开一个 URL，最后发送请求。当所有这些事务完成后，该对象将会包含一些诸如响应主体或 [HTTP status](/zh-CN/docs/Web/HTTP/Status) 的有用信息。 -
function reqListener () {
+```js
+function reqListener () {
   console.log(this.responseText);
 }
 
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", reqListener);
 oReq.open("GET", "http://www.example.org/example.txt");
-oReq.send();
+oReq.send(); +``` -

请求类型

+## 请求类型 -

通过 XMLHttpRequest 生成的请求可以有两种方式来获取数据，异步模式或同步模式。请求的类型是由这个 XMLHttpRequest 对象的 open() 方法的第三个参数async的值决定的。如果该参数的值为 false，则该 XMLHttpRequest请求以同步模式进行，否则该过程将以异步模式完成。这两种类型请求的详细讨论和指南可以在同步和异步请求页找到。

+通过 `XMLHttpRequest` 生成的请求可以有两种方式来获取数据，异步模式或同步模式。请求的类型是由这个 `XMLHttpRequest` 对象的 [open()](/zh-CN/docs/Web/API/XMLHttpRequest/open) 方法的第三个参数`async`的值决定的。如果该参数的值为 `false`，则该 `XMLHttpRequest`请求以同步模式进行，否则该过程将以异步模式完成。这两种类型请求的详细讨论和指南可以在[同步和异步请求](/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests)页找到。 -
注意：由于对用户体验的负面影响，从 Gecko 30.0{{geckoRelease("30.0")}}版本开始，在主线程上的同步请求已经被弃用。
+> **备注：** 由于对用户体验的负面影响，从 Gecko 30.0{{geckoRelease("30.0")}}版本开始，在主线程上的同步请求已经被弃用。 -
注意：XMLHttpRequest 构造函数并不仅限于 XML 文档。它之所以使用“XML”开头是因为在它诞生之时，原先用于异步数据交换的主要格式便是 XML。
+> **备注：** `XMLHttpRequest` 构造函数并不仅限于 XML 文档。它之所以使用“XML”开头是因为在它诞生之时，原先用于异步数据交换的主要格式便是 XML。 -

处理响应

+## 处理响应 -

W3C 规范定义了 {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} 对象的几种类型的响应属性。这些属性告诉客户端关于 XMLHttpRequest 返回状态的重要信息。一些处理非文本返回类型的用例，可能包含下面章节所描述的一些操作和分析。

+W3C 规范定义了 {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} 对象的几种类型的[响应属性](https://xhr.spec.whatwg.org/)。这些属性告诉客户端关于 `XMLHttpRequest` 返回状态的重要信息。一些处理非文本返回类型的用例，可能包含下面章节所描述的一些操作和分析。 -

分析并操作 responseXML 属性

+### 分析并操作 responseXML 属性 -

如果你使用 XMLHttpRequest 来获得一个远程的 XML 文档的内容，{{domxref("XMLHttpRequest.responseXML", "responseXML")}} 属性将会是一个由 XML 文档解析而来的 DOM 对象，这很难被操作和分析。这里有五种主要的分析 XML 文档的方式：

+如果你使用 `XMLHttpRequest` 来获得一个远程的 XML 文档的内容，{{domxref("XMLHttpRequest.responseXML", "responseXML")}} 属性将会是一个由 XML 文档解析而来的 DOM 对象，这很难被操作和分析。这里有五种主要的分析 XML 文档的方式： -
    -
  1. 使用 XPath 定位到文档的指定部分。
    2. -
  2. 手动 解析和序列化 XML 为字符串或对象。
    3. -
  3. 使用 XMLSerializer 把 DOM 树序列化成字符串或文件。
    4. -
  4. 如果你预先知道 XML 文档的内容，你可以使用 RegExp。如果你用 RegExp 扫描时受到换行符的影响，你也许想要删除所有的换行符。然而，这种方法是"最后手段"，因为如果 XML 代码发生轻微变化，该方法将可能失败。
    5. -
+1. 使用 [XPath](/zh-CN/docs/Web/XPath) 定位到文档的指定部分。 +2. 手动 [解析和序列化 XML](/zh-CN/docs/Web/Guide/Parsing_and_serializing_XML) 为字符串或对象。 +3. 使用 [XMLSerializer](/zh-CN/docs/XMLSerializer) 把 DOM 树序列化成字符串或文件。 +4. 如果你预先知道 XML 文档的内容，你可以使用 [RegExp](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp)。如果你用 `RegExp` 扫描时受到换行符的影响，你也许想要删除所有的换行符。然而，这种方法是"最后手段"，因为如果 XML 代码发生轻微变化，该方法将可能失败。 -
注意： 在 W3C XMLHttpRequest 规范中允许 HTML 通过 XMLHttpRequest.responseXML 属性进行解析。更多详细内容请阅读 HTML in XMLHttpRequest 。本条注意已在英文原文中更新。
+> **备注：** 在 W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) 规范中允许 HTML 通过 XMLHttpRequest.responseXML 属性进行解析。更多详细内容请阅读 [HTML in XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) 。本条注意已在英文原文中更新。 -
-

注意： XMLHttpRequest 现在可以使用 {{domxref("XMLHttpRequest.responseXML", "responseXML")}} 属性解释 HTML。请阅读 HTML in XMLHttpRequest 这篇文章了解相关用法。

-
+> **备注：** `XMLHttpRequest` 现在可以使用 {{domxref("XMLHttpRequest.responseXML", "responseXML")}} 属性解释 HTML。请阅读 [HTML in XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest) 这篇文章了解相关用法。 -

解析和操作包含 HTML 文档的 responseText 属性

+### 解析和操作包含 HTML 文档的 responseText 属性 -

如果使用 XMLHttpRequest 从远端获取一个 HTML 页面，则所有 HTML 标记会以字符串的形式存放在 responseText 属性里，这样就使得操作和解析这些标记变得困难。解析这些 HTML 标记主要有三种方式：

+如果使用 `XMLHttpRequest` 从远端获取一个 HTML 页面，则所有 HTML 标记会以字符串的形式存放在 responseText 属性里，这样就使得操作和解析这些标记变得困难。解析这些 HTML 标记主要有三种方式： -
    -
  1. 使用 XMLHttpRequest.responseXML 属性。
    2. -
  2. 将内容通过 fragment.body.innerHTML 注入到一个 文档片段 中，并遍历 DOM 中的片段。
    3. -
  3. 如果你预先知道 HTML 文档的内容，你可以使用 RegExp 。如果你用 RegExp 扫描时受到换行符的影响，你也许想要删除所有的换行符。 然而，这种方法是"最后手段"，因为如果 HTML 代码发生轻微变化，该方法将可能失败。
    4. -
+1. 使用 `XMLHttpRequest.responseXML` 属性。 +2. 将内容通过 `fragment.body.innerHTML` 注入到一个 [文档片段](/zh-CN/docs/Web/API/DocumentFragment) 中，并遍历 DOM 中的片段。 +3. 如果你预先知道 HTML 文档的内容，你可以使用 [RegExp ](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp)。如果你用 RegExp 扫描时受到换行符的影响，你也许想要删除所有的换行符。 然而，这种方法是"最后手段"，因为如果 HTML 代码发生轻微变化，该方法将可能失败。 -

处理二进制数据

+## 处理二进制数据 -

尽管 {{domxref("XMLHttpRequest")}} 一般用来发送和接收文本数据，但其实也可以发送和接收二进制内容。有许多经过良好测试的方法来强制使用 XMLHttpRequest 发送二进制数据。利用 XMLHttpRequest 对象的 {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} 方法是一个解决方案，虽然它并不是一个标准方法。

+尽管 {{domxref("XMLHttpRequest")}} 一般用来发送和接收文本数据，但其实也可以发送和接收二进制内容。有许多经过良好测试的方法来强制使用 `XMLHttpRequest` 发送二进制数据。利用 `XMLHttpRequest` 对象的 {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} 方法是一个解决方案，虽然它并不是一个标准方法。 -
var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 oReq.open("GET", url);
 // 以二进制字符串形式检索未处理的数据
 oReq.overrideMimeType("text/plain; charset=x-user-defined");
 /* ... */
-
+``` -

然而，自从 {{domxref("XMLHttpRequest.responseType", "responseType")}} 属性目前支持大量附加的内容类型后，已经出现了很多的现代技术，它们使得发送和接收二进制数据变得更加容易。

+然而，自从 {{domxref("XMLHttpRequest.responseType", "responseType")}} 属性目前支持大量附加的内容类型后，已经出现了很多的现代技术，它们使得发送和接收二进制数据变得更加容易。 -

例如，考虑以下代码，它使用 "arraybuffer" 的 responseType 来将远程内容获取到一个存储原生二进制数据的 {{jsxref("ArrayBuffer")}} 对象中。

+例如，考虑以下代码，它使用 `"arraybuffer"` 的 `responseType` 来将远程内容获取到一个存储原生二进制数据的 {{jsxref("ArrayBuffer")}} 对象中。 -
var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 
 oReq.onload = function(e) {
   var arraybuffer = oReq.response; // 不是 responseText ！
@@ -79,24 +77,24 @@ oReq.onload = function(e) {
 }
 oReq.open("GET", url);
 oReq.responseType = "arraybuffer";
-oReq.send();
+oReq.send(); +``` -

更多示例请参考 发送和接收二进制数据。

+更多示例请参考 [发送和接收二进制数据](/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data)。 -

监测进度

+## 监测进度 -

XMLHttpRequest 提供了各种在请求被处理期间发生的事件以供监听。这包括定期进度通知、 错误通知，等等。

+`XMLHttpRequest` 提供了各种在请求被处理期间发生的事件以供监听。这包括定期进度通知、 错误通知，等等。 -

支持 DOM 的 progress 事件监测之于 XMLHttpRequest 传输，遵循 Web API 进度事件规范：这些事件实现了 {{domxref("ProgressEvent")}} 接口。

+支持 DOM 的 progress 事件监测之于 `XMLHttpRequest` 传输，遵循 Web API [进度事件规范](http://dev.w3.org/2006/webapi/progress/Progress.html)：这些事件实现了 {{domxref("ProgressEvent")}} 接口。 -
-
{{event("progress")}}
-
检索的数据量发生了变化。
-
{{event("load")}}
-
传输完成，所有数据保存在 response 中。
-
+- {{event("progress")}} + - : 检索的数据量发生了变化。 +- {{event("load")}} + - : 传输完成，所有数据保存在 `response` 中。 -
var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 
 oReq.addEventListener("progress", updateProgress);
 oReq.addEventListener("load" , transferComplete);
@@ -127,17 +125,19 @@ function transferFailed(evt) {
 
 function transferCanceled(evt) {
   console.log("The transfer has been canceled by the user.");
-}
+} +``` -

第 3-6 行为多种事件添加了事件监听，这些事件在使用 XMLHttpRequest 执行数据传输时被发出。

+第 3-6 行为多种事件添加了事件监听，这些事件在使用 `XMLHttpRequest` 执行数据传输时被发出。 -
注意： 你需要在请求调用 open() 之前添加事件监听。否则 progress 事件将不会被触发。
+> **备注：** 你需要在请求调用 `open()` 之前添加事件监听。否则 `progress` 事件将不会被触发。 -

在上一个例子中，progress 事件被指定由 updateProgress() 函数处理，并接收到传输的总字节数和已经传输的字节数，它们分别在事件对象的 total 和 loaded 属性里。但是如果 lengthComputable 属性的值是 false，那么意味着总字节数是未知并且 total 的值为零。

+在上一个例子中，progress 事件被指定由 `updateProgress()` 函数处理，并接收到传输的总字节数和已经传输的字节数，它们分别在事件对象的 `total` 和 `loaded` 属性里。但是如果 `lengthComputable` 属性的值是 false，那么意味着总字节数是未知并且 total 的值为零。 -

progress 事件同时存在于下载和上传的传输。下载相关事件在 XMLHttpRequest 对象上被触发，就像上面的例子一样。上传相关事件在 XMLHttpRequest.upload 对象上被触发，像下面这样：

+progress 事件同时存在于下载和上传的传输。下载相关事件在 `XMLHttpRequest` 对象上被触发，就像上面的例子一样。上传相关事件在 `XMLHttpRequest.upload` 对象上被触发，像下面这样： -
var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 
 oReq.upload.addEventListener("progress", updateProgress);
 oReq.upload.addEventListener("load" , transferComplete);
@@ -145,108 +145,104 @@ oReq.upload.addEventListener("error", transferFailed  );
 oReq.upload.addEventListener("abort", transferCanceled);
 
 oReq.open();
-
+``` -
注意：progress 事件在使用 file: 协议的情况下是无效的。
+> **备注：** progress 事件在使用 `file:` 协议的情况下是无效的。 -
注意：从 {{Gecko("9.0")}} 开始，进度事件现在可以依托于每一个传入的数据块，包括进度事件被触发前在已经接受了最后一个数据包且连接已经被关闭的情况下接收到的最后一个块。这种情况下，当该数据包的 load 事件发生时 progress 事件会被自动触发。这使你可以只关注 progress 事件就可以可靠的监测进度。
+> **备注：** 从 {{Gecko("9.0")}} 开始，进度事件现在可以依托于每一个传入的数据块，包括进度事件被触发前在已经接受了最后一个数据包且连接已经被关闭的情况下接收到的最后一个块。这种情况下，当该数据包的 load 事件发生时 progress 事件会被自动触发。这使你可以只关注 progress 事件就可以可靠的监测进度。 -
注意：在 {{Gecko("12.0")}} 中，当 responseType 为 "moz-blob" 时，如果你的 progress 事件被触发，则响应的值是一个包含了接收到的数据的 {{domxref("Blob")}} 。
+> **备注：** 在 {{Gecko("12.0")}} 中，当 `responseType` 为 "moz-blob" 时，如果你的 progress 事件被触发，则响应的值是一个包含了接收到的数据的 {{domxref("Blob")}} 。 -

使用 loadend 事件可以侦测到所有的三种加载结束条件（abort、load，或 error）：

+使用 `loadend` 事件可以侦测到所有的三种加载结束条件（`abort`、`load`，或 `error`）： -
req.addEventListener("loadend", loadEnd);
+```js
+req.addEventListener("loadend", loadEnd);
 
 function loadEnd(e) {
   console.log("The transfer finished (although we don't know if it succeeded or not).");
 }
-
+``` + +需要注意的是，没有方法可以确切的知道 `loadend` 事件接收到的信息是来自何种条件引起的操作终止；但是你可以在所有传输结束的时候使用这个事件处理。 -

需要注意的是，没有方法可以确切的知道 loadend 事件接收到的信息是来自何种条件引起的操作终止；但是你可以在所有传输结束的时候使用这个事件处理。

+## 提交表单和上传文件 -

提交表单和上传文件

+`XMLHttpRequest` 的实例有两种方式提交表单： -

XMLHttpRequest 的实例有两种方式提交表单：

+- 使用 AJAX +- 使用 {{domxref("XMLHttpRequest.FormData", "FormData")}} API -
    -
  • 使用 AJAX
    • -
  • 使用 {{domxref("XMLHttpRequest.FormData", "FormData")}} API
    • -
+第二种方式（使用 `FormData` API）是最简单最快捷的，但是缺点是被收集的数据无法使用[ JSON.stringify()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 转换为一个 JSON 字符串。 +只使用 AJAX 则更为复杂，但也更灵活、更强大。 -

第二种方式（使用 FormData API）是最简单最快捷的，但是缺点是被收集的数据无法使用 JSON.stringify() 转换为一个 JSON 字符串。
- 只使用 AJAX 则更为复杂，但也更灵活、更强大。

+### 仅使用 XMLHttpRequest -

仅使用 XMLHttpRequest

+在大多数用例中，提交表单时即便不使用 `FormData` API 也不会要求其他的 API。唯一的例外情况是，**如果你要上传一个或多个文件**，你需要额外的 [`FileReader`](/zh-CN/docs/Web/API/FileReader) API。 -

在大多数用例中，提交表单时即便不使用 FormData API 也不会要求其他的 API。唯一的例外情况是，如果你要上传一个或多个文件，你需要额外的 FileReader API。

+#### 提交方法简介 -

提交方法简介

+一个 html {{ HTMLElement("form") }} 可以用以下四种方式发送： -

一个 html {{ HTMLElement("form") }} 可以用以下四种方式发送：

+- 使用 `POST` 方法，并将 `enctype` 属性设置为 `application/x-www-form-urlencoded` (默认) +- 使用 `POST` 方法，并将 `enctype` 属性设置为 `text/plain` +- 使用 `POST` 方法，并将 `enctype` 属性设置为 `multipart/form-data` +- 使用 `GET` 方法（这种情况下 `enctype` 属性会被忽略） -
    -
  • 使用 POST 方法，并将 enctype 属性设置为 application/x-www-form-urlencoded (默认)
    • -
  • 使用 POST 方法，并将 enctype 属性设置为 text/plain
    • -
  • 使用 POST 方法，并将 enctype 属性设置为 multipart/form-data
    • -
  • 使用 GET 方法（这种情况下 enctype 属性会被忽略）
    • -
+现在，我们提交一个表单，它里面有两个字段，分别被命名为 `foo` 和 `baz`。如果你用 `POST` 方法，那么服务器将会接收到一个字符串类似于下面三种情况之一，其中的区别依赖于你采用何种编码类型： -

现在，我们提交一个表单，它里面有两个字段，分别被命名为 foo 和 baz。如果你用 POST 方法，那么服务器将会接收到一个字符串类似于下面三种情况之一，其中的区别依赖于你采用何种编码类型：

+- 方法：`POST`；编码类型：`application/x-www-form-urlencoded`（默认）: -
    -
  • -

    方法：POST；编码类型：application/x-www-form-urlencoded（默认）:

    -
    • -
+```plain +Content-Type: application/x-www-form-urlencoded -
Content-Type: application/x-www-form-urlencoded
+foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
+```
 
-foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
+- 方法：`POST`；编码类型：`text/plain`： -
    -
  • -

    方法：POST；编码类型：text/plain：

    + ```plain + Content-Type: text/plain - 
    Content-Type: text/plain
+  foo=bar
+  baz=The first line.
+  The second line.
+  ```
 
-foo=bar
-baz=The first line.
-The second line.
    -
    • -
  • -

    方法：POST；编码类型：multipart/form-data：

    +- 方法：`POST`；编码类型：[`multipart/form-data`](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)： - 
    Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+  ```plain
+  Content-Type: multipart/form-data; boundary=---------------------------314911788813839
 
------------------------------314911788813839
-Content-Disposition: form-data; name="foo"
+  -----------------------------314911788813839
+  Content-Disposition: form-data; name="foo"
 
-bar
------------------------------314911788813839
-Content-Disposition: form-data; name="baz"
+  bar
+  -----------------------------314911788813839
+  Content-Disposition: form-data; name="baz"
 
-The first line.
-The second line.
+  The first line.
+  The second line.
 
------------------------------314911788813839--
    -
    • -
+ -----------------------------314911788813839-- + ``` -

相反的，如果你用 GET 方法，像下面这样的字符串将被简单的附加到 URL：

+相反的，如果你用 `GET` 方法，像下面这样的字符串将被简单的附加到 URL： -
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+```plain +?foo=bar&baz=The%20first%20line.%0AThe%20second%20line. +``` -

一个小框架

+#### 一个小框架 -

所有这些事情都是由浏览器在你提交一个 {{ HTMLElement("form") }} 的时候自动完成的。但是如果你想要用 JavaScript 做同样的事情，你不得不告诉解释器所有的事。那么，如何发送表单这件事在使用纯粹的 AJAX 时会复杂到无法在这里解释清楚。基于这个原因，我们提供一个完整的（但仍然教条的）框架，它可以使用所有的四种提交方式，甚至上传文件：

+所有这些事情都是由浏览器在你提交一个 {{ HTMLElement("form") }} 的时候自动完成的。但是如果你想要用 JavaScript 做同样的事情，你不得不告诉解释器所有的事。那么，如何发送表单这件事在使用纯粹的 AJAX 时会复杂到无法在这里解释清楚。基于这个原因，我们提供一个完整的（但仍然教条的）框架，它可以使用所有的四种提交方式，甚至上传文件： -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with pure AJAX &ndash; MDN</title>
-<script type="text/javascript">
+```html
+
+
+
+
+Sending forms with pure AJAX – MDN
+
+
+
+
+
Sending forms with pure AJAX

+
+
Using the GET method

+
+

+  

+    Registration example
+    

+      First name: 

+      Last name: 
+    

+    

+      
+    

+  

+

+
+
Using the POST method

+
Enctype: application/x-www-form-urlencoded (default)

+
+

+  

+    Registration example
+    

+      First name: 

+      Last name: 
+    

+    

+      
+    

+  

+

+
+
Enctype: text/plain

+
+

+  

+    Registration example
+    

+      Your name: 
+    

+    

+      Your message:

+      
+    

+    

+      
+    

+  

+

+
+
Enctype: multipart/form-data

+
+

+  

+    Upload example
+    

+      First name: 

+      Last name: 

       Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" />
-      <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" />
-      <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
+      
+      
+      
+      

+      Password: 

       What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
+      
+    

+    

       Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
-      <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
-      <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -

要测试它的话，创建一个名为 register.php 的页面（作为示例表单的 action 属性）并且只输入以下内容：

- -
<?php
+      
+    

+    

+      
+      

+      
+      
+    

+    

+      Describe yourself:

+      
+    

+    

+      
+    

+  
+
+
+
+
+```
+
+要测试它的话，创建一个名为 `register.php` 的页面（作为示例表单的 `action` 属性）并且只输入以下内容：
+
+```php
+
+print_r($_FILES);
+```
 
-
激活这些代码的语法很简单：

+激活这些代码的语法很简单：
 
-
AJAXSubmit(myForm);

+```
+AJAXSubmit(myForm);
+```
 
-
注意： 该框架使用 {{domxref("FileReader")}} API 进行文件的上传。这是一个较新的 API 并且还未在 IE9 及以下版本的浏览器中实现。因此，使用 AJAX 上传仍是一项实验性的技术。如果你不需要上传 二进制文件，该框架在大多数浏览器中运行良好。

+> **备注：** 该框架使用 {{domxref("FileReader")}} API 进行文件的上传。这是一个较新的 API 并且还未在 IE9 及以下版本的浏览器中实现。因此，使用 AJAX 上传仍是一项**实验性的技术**。如果你不需要上传 二进制文件，该框架在大多数浏览器中运行良好。
 
-
注意： 发送二进制内容的最佳途径是通过 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 或 {{domxref("Blob", "Blobs")}} 结合 {{domxref("XMLHttpRequest.send()", "send()")}} 方法甚至 FileReader API 的 {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} 方法。但是，自从该脚本的目的变成处理 可字符串化 的原始数据以来，我们使用 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} 方法结合 FileReader API 的 {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} 方法。同样地，上述脚本仅当你处理小文件时行之有效。如果不打算上传二进制内容，就考虑使用 FormData API 来替代。

+> **备注：** 发送二进制内容的最佳途径是通过 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 或 {{domxref("Blob", "Blobs")}} 结合 {{domxref("XMLHttpRequest.send()", "send()")}} 方法甚至 `FileReader` API 的 {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} 方法。但是，自从该脚本的目的变成处理 [可字符串化](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 的原始数据以来，我们使用 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} 方法结合 `FileReader` API 的 {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} 方法。同样地，上述脚本仅当你处理小文件时行之有效。如果不打算上传二进制内容，就考虑使用 `FormData` API 来替代。
 
-
注意： 非标准的 sendAsBinary 方法从 Gecko 31 {{geckoRelease(31)}} 开始将会废弃并且会很快被移除。标准方法 send(Blob data) 将会取而代之。

+> **备注：** 非标准的 `sendAsBinary` 方法从 Gecko 31 {{geckoRelease(31)}} 开始将会废弃并且会很快被移除。标准方法 `send(Blob data)` 将会取而代之。
 
-
使用 FormData 对象

+### 使用 FormData 对象
 
-
{{domxref("XMLHttpRequest.FormData", "FormData")}} 构造函数能使你编译一个键/值对的集合，然后使用 XMLHttpRequest 发送出去。其主要用于发送表格数据，但是也能被单独用来传输表格中用户指定的数据。传输的数据格式与表格使用 submit() 方法发送数据的格式一致，如果该表格的编码类型被设为 "multipart/form-data". FormData 对象可以被结合 XMLHttpRequest 的多种方法利用。例如，想了解如何利用 FormData 与 XMLHttpRequests，请转到 Using FormData Objects 页面。为了说教的目的，这里有一个早期的例子，被转译成了使用 FormData API 的形式。注意以下代码片段：

+{{domxref("XMLHttpRequest.FormData", "FormData")}} 构造函数能使你编译一个键/值对的集合，然后使用 `XMLHttpRequest` 发送出去。其主要用于发送表格数据，但是也能被单独用来传输表格中用户指定的数据。传输的数据格式与表格使用 `submit()` 方法发送数据的格式一致，如果该表格的编码类型被设为 "multipart/form-data". FormData 对象可以被结合 `XMLHttpRequest` 的多种方法利用。例如，想了解如何利用 FormData 与 XMLHttpRequests，请转到 [Using FormData Objects](/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) 页面。为了说教的目的，这里有一个早期的[例子](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest$edit#A_little_vanilla_framework)，被转译成了使用** `FormData` API** 的形式。注意以下代码片段：
 
-

-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" charset="UTF-8" />
-<title>Sending forms with FormData &ndash; MDN</title>
-<script>
+```html
+
+
+
+
+Sending forms with FormData – MDN
+
+
+
+
+
Sending forms with FormData

+
+
Using the GET method

+
+

+  

+    Registration example
+    

+      First name: 

+      Last name: 
+    

+    

+      
+    

+  

+

+
+
Using the POST method

+
Enctype: application/x-www-form-urlencoded (default)

+
+

+  

+    Registration example
+    

+      First name: 

+      Last name: 
+    

+    

+      
+    

+  

+

+
+
Enctype: text/plain

+
+
The text/plain encoding is not supported by the FormData API.

+
+
Enctype: multipart/form-data

+
+

+  

+    Upload example
+    

+      First name: 

+      Last name: 

       Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" />
-      <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" />
-      <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
+      
+      
+      
+      

+      Password: 

       What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
+      
+    

+    

       Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
-      <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
-      <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-</body>
-</html>

-

-
-
注意： 如之前所述，{{domxref("FormData")}} 对象并不是 可字符串化 (stringifiable) 的对象。如果你想要字符串化一个提交数据，请使用这个 早期的纯 AJAX 例子. 同时也要注意，尽管这个例子中有一些 file {{ HTMLElement("input") }} 字段，但当你通过 FormData API 提交一个表格时，也无须使用 {{domxref("FileReader")}} API: 文件被自动加载并上传。

-
-
获取最后修改日期

-
-
function getHeaderTime () {
+      
+    

+    

+      
+      

+      
+      
+    

+    

+      Describe yourself:

+      
+    

+    

+      
+    

+  
+
+
+
+```
+
+> **备注：** 如之前所述，{{domxref("FormData")}} 对象并不是 [可字符串化 (stringifiable)](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 的对象。如果你想要字符串化一个提交数据，请使用这个 [早期的纯 AJAX 例子](#A_little_vanilla_framework). 同时也要注意，尽管这个例子中有一些 `file` {{ HTMLElement("input") }} 字段，**但当你通过** `FormData` API 提交一个表格时，也无须使用 {{domxref("FileReader")}} API: 文件被自动加载并上传。
+
+## 获取最后修改日期
+
+```js
+function getHeaderTime () {
   console.log(this.getResponseHeader("Last-Modified"));  /* 一个合法的 GMTString 日期或 null */
 }
 
 var oReq = new XMLHttpRequest();
 oReq.open("HEAD" /* 仅需要头部信息 (headers) 时请使用 HEAD! */, "yourpage.html");
 oReq.onload = getHeaderTime;
-oReq.send();

+oReq.send();
+```
 
-
最后修改日期改变后的操作

+### 最后修改日期改变后的操作
 
-
先创建两个函数：

+先创建两个函数：
 
-
function getHeaderTime () {
+```js
+function getHeaderTime () {
   var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
   var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
 
-  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
     window.localStorage.setItem('lm_' + this.filepath, Date.now());
-    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
   }
 }
 
@@ -697,84 +700,90 @@ function ifHasChanged(sURL, fCallback) {
   oReq.filepath = sURL;
   oReq.onload = getHeaderTime;
   oReq.send();
-}

+}
+```
 
-
And to test:

+And to test:
 
-
/* 测试一下这个文件："yourpage.html"... */
+```js
+/* 测试一下这个文件："yourpage.html"... */
 
 ifHasChanged("yourpage.html", function (nModif, nVisit) {
   console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
-});

+});
+```
 
-
如果你想要了解 当前页面是否发生了改变，请阅读这篇文章：{{domxref("document.lastModified")}}.

+如果你想要了解 **_当前页面是否发生了改变，_**请阅读这篇文章：{{domxref("document.lastModified")}}.
 
-
跨站的 XMLHttpRequest

+## 跨站的 XMLHttpRequest
 
-
现代浏览器可以通过执行 WebApps 工作小组通过的 Access Control for Cross-Site Requests 标注来支持跨站请求。只要服务器端的配置允许您从您的 Web 应用发送请求，就可以使用 XMLHttpRequest 。 否则，会抛出一个 INVALID_ACCESS_ERR 异常

+现代浏览器可以通过执行 WebApps 工作小组通过的 [Access Control for Cross-Site Requests](/zh-CN/docs/Web/HTTP/Access_control_CORS) 标注来支持跨站请求。只要服务器端的配置允许您从您的 Web 应用发送请求，就可以使用 `XMLHttpRequest` 。 否则，会抛出一个 `INVALID_ACCESS_ERR` 异常
 
-
绕过缓存

+## 绕过缓存
 
-
一般地，如果缓存中有相应内容， XMLHttpRequest 会试图从缓存中读取内容。绕过缓存的方法见下述代码：

+一般地，如果缓存中有相应内容， `XMLHttpRequest` 会试图从缓存中读取内容。绕过缓存的方法见下述代码：
 
-
var req = new XMLHttpRequest();
+```js
+var req = new XMLHttpRequest();
 req.open('GET', url, false);
-req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;
-req.send(null);

+req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;
+req.send(null);
+```
 
-
Note: 这个方法只工作于基于 Gecko 内核的软件，也就是通道属性是 Gecko-specific.

+> **备注：** 这个方法只工作于基于 Gecko 内核的软件，也就是通道属性是 Gecko-specific.
 
-
还有一个跨浏览器兼容的方法，就是给 URL 添加时间戳。请确保你酌情地添加了 "?" or "&" 。例如，将：

+还有一个跨浏览器兼容的方法，就是给 URL 添加时间戳。请确保你酌情地添加了 "?" or "&" 。例如，将：
 
-
http://foo.com/bar.html -> http://foo.com/bar.html?12345
-http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
-

+```plain
+http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+```
 
-
因为本地缓存都是以 URL 作为索引的，这样就可以使每个请求都是唯一的，也就可以这样来绕开缓存。

+因为本地缓存都是以 URL 作为索引的，这样就可以使每个请求都是唯一的，也就可以这样来绕开缓存。
 
-
你也可以用下面的方法自动更改缓存：

+你也可以用下面的方法自动更改缓存：
 
-
var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 
-oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
-oReq.send(null);

+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
+oReq.send(null);
+```
 
-
安全性

+## 安全性
 
-
{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access. This is no longer supported.")}}

+{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access. This is no longer supported.")}}
 
-
{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}
 
-
要启用跨站脚本，推荐的做法是对 XMLHttpRequest 的响应使用 the Access-Control-Allow-Origin 的 HTTP 头。

+要启用跨站脚本，推荐的做法是对 XMLHttpRequest 的响应使用 the `Access-Control-Allow-Origin `的 HTTP 头。
 
-
XMLHttpRequests 被停止

+### XMLHttpRequests 被停止
 
-
如果你的 XMLHttpRequest 收到 status=0 和 statusText=null 的返回，这意味着请求无法执行。 就是无法发送. 一个可能导致的原因是当 XMLHttpRequest origin (创建的 XMLHttpRequest) 改变时，XMLHttpRequest 执行 open().。这种情况是可能发生的，举个例子，我们在一个窗口的onunload事件中关闭 XMLHttpRequest，但实际上在即将关闭窗口时，之前创建的 XMLHttpRequest 仍然在那里，最后当这个窗口失去焦点、另一个窗口获得焦点时，它还是发送了请求（也就是open()）。最有效的避免这个问题的方法是为新窗口的{{event("activate")}}事件设置一个监听器，一旦窗口关闭，它的{{event("unload")}}事件便触发。

+如果你的 XMLHttpRequest 收到 `status=0` 和 `statusText=null` 的返回，这意味着请求无法执行。 就是[无法发送](http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent). 一个可能导致的原因是当 [`XMLHttpRequest` origin](http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin) (创建的 XMLHttpRequest) 改变时，XMLHttpRequest 执行 `open()`.。这种情况是可能发生的，举个例子，我们在一个窗口的`onunload`事件中关闭 XMLHttpRequest，但实际上在即将关闭窗口时，之前创建的 XMLHttpRequest 仍然在那里，最后当这个窗口失去焦点、另一个窗口获得焦点时，它还是发送了请求（也就是`open()`）。最有效的避免这个问题的方法是为新窗口的{{event("activate")}}事件设置一个监听器，一旦窗口关闭，它的{{event("unload")}}事件便触发。
 
-
Worker

+## Worker
 
-
设置 overrideMimeType 后在 {{domxref("Worker")}} 中无法正常工作，详见 {{bug(678057)}}。其他浏览器也许会以不同的手段处理。

+设置 `overrideMimeType` 后在 {{domxref("Worker")}} 中无法正常工作，详见 {{bug(678057)}}。其他浏览器也许会以不同的手段处理。
 
-
规范

+## 规范
 
 {{Specifications}}
 
-
浏览器兼容性

-
-
{{Compat("api.XMLHttpRequest")}}

-
-
参考资料

-
-
    
- 
  1. MDC AJAX introduction
    2. 
- 
  2. HTML in XMLHttpRequest
    3. 
- 
  3. HTTP access control
    4. 
- 
  4. How to check the security state of an XMLHTTPRequest over SSL
    5. 
- 
  5. XMLHttpRequest - REST and the Rich User Experience
    6. 
- 
  6. Microsoft documentation
    7. 
- 
  7. Apple developers' reference
    8. 
- 
  8. "Using the XMLHttpRequest Object" (jibbering.com)
    9. 
- 
  9. The XMLHttpRequest Object: W3C Specification
    10. 
- 
  10. Web Progress Events specification
    11. 
- 
  11. Reading Ogg files with JavaScript (Chris Double)
    12. 
-

+## 浏览器兼容性
+
+{{Compat("api.XMLHttpRequest")}}
+
+## 参考资料
+
+1.  [MDC AJAX introduction](/zh-CN/AJAX/Getting_Started)
+2.  [HTML in XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest)
+3.  [HTTP access control](/zh-CN/HTTP_access_control)
+4.  [How to check the security state of an XMLHTTPRequest over SSL](/zh-CN/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL)
+5.  [XMLHttpRequest - REST and the Rich User Experience](http://www.peej.co.uk/articles/rich-user-experience.html)
+6.  [Microsoft documentation](http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp)
+7.  [Apple developers' reference](http://developer.apple.com/internet/webcontent/xmlhttpreq.html)
+8.  ["Using the XMLHttpRequest Object" (jibbering.com)](http://jibbering.com/2002/4/httprequest.html)
+9.  [The XMLHttpRequest Object: W3C Specification](http://www.w3.org/TR/XMLHttpRequest/)
+10. [Web Progress Events specification](http://dev.w3.org/2006/webapi/progress/Progress.html)
+11. [Reading Ogg files with JavaScript (Chris Double)](http://www.bluishcoder.co.nz/2009/06/05/reading-ogg-files-with-javascript.html)
diff --git a/files/zh-cn/web/api/xmlhttprequest/withcredentials/index.md b/files/zh-cn/web/api/xmlhttprequest/withcredentials/index.md
index 147da69a7c610f..999650f77a64d3 100644
--- a/files/zh-cn/web/api/xmlhttprequest/withcredentials/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest/withcredentials/index.md
@@ -2,33 +2,31 @@
 title: XMLHttpRequest.withCredentials
 slug: Web/API/XMLHttpRequest/withCredentials
 ---
-
{{APIRef('XMLHttpRequest')}}

+{{APIRef('XMLHttpRequest')}}
 
-
XMLHttpRequest.withCredentials 属性是一个 {{jsxref("Boolean")}} 类型，它指示了是否该使用类似 Cookies、Authorization Headers (头部授权) 或者 TLS 客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用 withCredentials 属性是无效的。

+**XMLHttpRequest.withCredentials** 属性是一个 {{jsxref("Boolean")}} 类型，它指示了是否该使用类似 Cookies、Authorization Headers (头部授权) 或者 TLS 客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site `Access-Control`）请求。在同一个站点下使用 `withCredentials` 属性是无效的。
 
-
此外，这个指示也会被用做响应中 Cookies 被忽视的标示。默认值是 false。

+`此外，这个指示`也会被用做`响应中` Cookies 被忽视的标示。默认值是 false。
 
-
如果在发送来自其他域的 XMLHttpRequest 请求之前，未设置withCredentials 为 true，那么就不能为它自己的域设置 Cookie 值。而通过设置 withCredentials 为 true 获得的第三方 Cookies，将会依旧享受同源策略，因此不能被通过 document.cookie 或者从头部相应请求的脚本等访问。

+如果在发送来自其他域的 XMLHttpRequest 请求之前，未设置`withCredentials` 为 true，那么就不能为它自己的域设置 Cookie 值。而通过设置 `withCredentials` 为 true 获得的第三方 Cookies，将会依旧享受同源策略，因此不能被通过 [document.cookie](/zh-CN/docs/Web/API/Document/cookie) 或者从头部相应请求的脚本等访问。
 
-

-
注：永远不会影响到同源请求

-

+> **备注：** 永远不会影响到同源请求
 
-

-
Note:不同域下的 XmlHttpRequest 响应，不论其 Access-Control- Header 设置什么值，都无法为它自身站点设置 Cookie 值，除非它在请求之前将 withCredentials 设为 true。

-

+> **备注：** 不同域下的 `XmlHttpRequest` 响应，不论其 `Access-Control-` Header 设置什么值，都无法为它自身站点设置 Cookie 值，除非它在请求之前将 `withCredentials` 设为 true。
 
-
实例

+## 实例
 
-
var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 xhr.open('GET', 'http://example.com/', true);
 xhr.withCredentials = true;
-xhr.send(null);

+xhr.send(null);
+```
 
-
规范

+## 规范
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
 {{Compat("api.XMLHttpRequest.withCredentials")}}
diff --git a/files/zh-cn/web/api/xmlserializer/index.md b/files/zh-cn/web/api/xmlserializer/index.md
index fc2e45569134ee..a367b7384c45da 100644
--- a/files/zh-cn/web/api/xmlserializer/index.md
+++ b/files/zh-cn/web/api/xmlserializer/index.md
@@ -2,71 +2,65 @@
 title: XMLSerializer
 slug: Web/API/XMLSerializer
 ---
-
{{APIRef("XMLSerializer")}}

+{{APIRef("XMLSerializer")}}`XMLSerializer`接口提供{{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法来构建一个代表 {{Glossary("DOM")}} 树的 XML 字符串。
 
-
XMLSerializer接口提供{{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法来构建一个代表 {{Glossary("DOM")}} 树的 XML 字符串。

+## 方法
 
-
方法

+- {{domxref("XMLSerializer.serializeToString", "serializeToString()")}}
+  - : 返回 DOM 子树序列化后的字符串。
+- {{domxref("XMLSerializer.serializeToStream", "serializeToStream()")}} {{ non-standard_inline }}{{ deprecated_inline }}
+  - : 将指定元素的每个子树按照特定的字符集序列化成字节流。
 
-

- 
{{domxref("XMLSerializer.serializeToString", "serializeToString()")}}

- 
返回 DOM 子树序列化后的字符串。

- 
{{domxref("XMLSerializer.serializeToStream", "serializeToStream()")}} {{ non-standard_inline }}{{ deprecated_inline }}

- 
将指定元素的每个子树按照特定的字符集序列化成字节流。

-

+## 示例
 
-
示例

+### 把 XML 序列化为字符串
 
-
把 XML 序列化为字符串

+首先，最基本的例子是将整个 document 对象序列化为一个 XML 字符串。
 
-
首先，最基本的例子是将整个 document 对象序列化为一个 XML 字符串。

-
-
 var s = new XMLSerializer();
+```js
+ var s = new XMLSerializer();
  var d = document;
  var str = s.serializeToString(d);
- saveXML(str);

-
-
这里新建了一个 XMLSerializer 对象实例，然后将待序列化的 {{domxref("Document")}} 对象实例传入返回等价 XML 的 {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法。

+ saveXML(str);
+```
 
-
向一个基于 XML 的 DOM 对象中

+这里新建了一个 `XMLSerializer` 对象实例，然后将待序列化的 {{domxref("Document")}} 对象实例传入返回等价 XML 的 {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法。
 
-
本例使用 {domxref("Element.insertAdjacentHTML()")}} 方法将一个新的 DOM {{domxref("Node")}} 插入 基于序列化 {{domxref("Document")}} 对象创建的 XML 中。

+### 向一个基于 XML 的 DOM 对象中
 
-

-
注意： 在真实场景下，你通常应该通过调用 {{domxref("Document.importNode", "importNode()")}} 方法将新节点加入 DOM 中，然后通过调用以下方法将目标节点添加到 DOM 树：

+本例使用 {domxref("Element.insertAdjacentHTML()")}} 方法将一个新的 DOM {{domxref("Node")}} 插入 基于序列化 {{domxref("Document")}} 对象创建的 XML 中。
 
-
    
- 
  • {{domxref("Document")}} 和 {{domxref("Element")}} 方法 {{domxref("ParentNode.append", "append()")}} 和 {{domxref("ParentNode.prepend", "prepend()")}}
    • 
- 
  • {{domxref("ChildNode.replaceWith", "Node.replaceWith()")}} 方法 (替换现有节点)
    • 
- 
  • {{domxref("Document.insertAdjacentElement()")}} 和 {{domxref("Element.insertAdjacentElement()")}} 方法。
    • 
-

-

+> **备注：** 在真实场景下，你通常应该通过调用 {{domxref("Document.importNode", "importNode()")}} 方法将新节点加入 DOM 中，然后通过调用以下方法将目标节点添加到 DOM 树：
+>
+> - {{domxref("Document")}} 和 {{domxref("Element")}} 方法 {{domxref("ParentNode.append", "append()")}} 和 {{domxref("ParentNode.prepend", "prepend()")}}
+> - {{domxref("ChildNode.replaceWith", "Node.replaceWith()")}} 方法 (替换现有节点)
+> - {{domxref("Document.insertAdjacentElement()")}} 和 {{domxref("Element.insertAdjacentElement()")}} 方法。
 
-
因为insertAdjacentHTML() 的第二个参数是一个字符串而不是 Node 节点对象，所以这里先要使用 XMLSerializer 将节点转换为字符串。

+因为`insertAdjacentHTML()` 的第二个参数是一个字符串而不是 `Node` 节点对象，所以这里先要使用 `XMLSerializer` 将节点转换为字符串。
 
-
var inp = document.createElement('input');
+```js
+var inp = document.createElement('input');
 var XMLS = new XMLSerializer();
 var inp_xmls = XMLS.serializeToString(inp); // 先将一个 DOM 节点转换为字符串。
 
 // 将新建的节点添加到 DOM 中。
-document.body.insertAdjacentHTML('afterbegin', inp_xmls);

+document.body.insertAdjacentHTML('afterbegin', inp_xmls);
+```
 
-
以上代码通过调用 {{domxref("Document.createElement()")}} 方法新建一个 {HTMLElement("input")}} 对象 , 然后通过 {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法将该对象序列化为 XML.

+以上代码通过调用 {{domxref("Document.createElement()")}} 方法新建一个 {HTMLElement("input")}} 对象 , 然后通过 {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法将该对象序列化为 XML.
 
-
做完以上工作之后，使用 insertAdjacentHTML() 方法将 <input> 元素加入 DOM.

+做完以上工作之后，使用 `insertAdjacentHTML()` 方法将 `` 元素加入 DOM.
 
-
规范

+## 规范
 
 {{Specifications}}
 
-
浏览器兼容性

+## 浏览器兼容性
 
-
{{Compat("api.XMLSerializer")}}

+{{Compat("api.XMLSerializer")}}
 
-
参见

+## 参见
 
-
+- [Parsing and serializing XML](https://developer.mozilla.org/en-US/Parsing_and_serializing_XML)
+- {{domxref("XMLHttpRequest")}}
+- {{domxref("DOMParser")}}