Home > Developer > Web Develop
| Source-over | Default. Displays the source image on the target image. |
| Source-atop | Displays the source image at the top of the target image. The portion of the source image that is outside the target image is not visible. |
| Source-in | Displays the source image in the target image. Only the portion of the source image within the target image is displayed, and the target image is transparent. |
| Source-out | Displays the source image outside of the target image. Only the source image portion outside the target image is displayed, and the target image is transparent. |
| Destination-over | Displays the target image above the source image. |
| Destination-atop | Displays the target image at the top of the source image. The part of the target image that is outside the source image is not displayed. |
| Destination-in | Displays the target image in the source image. Only the portion of the target image within the source image is displayed, and the source image is transparent. |
| Destination-out | Displays the target image outside the source image. Only the part of the target image that is outside the source image is displayed, and the source image is transparent. |
| Lighter | Displays the source image + target image. |
| Copy | Displays the source image. ignores the target image. |
| Source-over | Use an XOR operation to combine the source image with the target image. |
<! DOCTYPE html>HTML 5 Canvas Globalalpha Property globalalpha=0-1;<! DOCTYPE html>Above 2 paragraph is w3school on the note: Yesterday I wrote, API afterforeign translation may be translated after the result of people feel no language, so more practice to improve
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Canvas compositing</title><Scriptsrc= "Js/modernizr.js"></Script></Head><Body><Scripttype= "Text/javascript">Window.addeventlistener ('Load', eventwindowloaded,false);functioneventwindowloaded () {Canvasapp ();}functionCanvassupport () {returnModernizr.canvas;}functionCanvasapp () {if(!Canvassupport ()) { return; }Else{ varThecanvas=document.getElementById ('Canvas') varContext=Thecanvas.getcontext ("2d")} drawscreen (); functionDrawscreen () {//draw a large square on the screenContext.fillstyle= "Black"; Context.fillrect (Ten,Ten, $, $); //Keep Globalcompositeoperation original value unchanged //now draw a red SquareContext.fillstyle= "#ff0000"; Context.fillrect (1,1, -, -); //now set to Source-overcontext.globalcompositeoperation= "Source-over"; Context.fillrect ( -,1, -, -); //now set to Destination-overcontext.globalcompositeoperation= "Destination-over"; Context.fillrect (1, -, -, -); //Set Globalalpha nowContext.globalalpha= .5; //Set Source-atop nowcontext.globalcompositeoperation= "Source-atop"; Context.fillrect ( -, -, -, -); } }</Script><CanvasID= "Canvas"width= "$"Height= "$">your browser is unable to use canvas if in doubt add qq:1035417613; small white children's shoes; Your support is my greatest happiness!! </Canvas></Body></HTML>HTML5 Canvas Compositing
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
