1<! DOCTYPE html>234<title>insert you title</title>5<meta name= ' description ' content= ' This is my page ' >6<meta name= ' keywords ' content= ' keyword1,keyword2,keyword3 ' >7<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">8<link rel= ' stylesheet ' type= ' text/css ' href= './css/index.css '/>9<script type= ' text/javascript ' src= './js/jquery-1.12.1.min.js ' ></script>Ten<style type= ' text/css ' > One html,body,canvas,div,select,option { Amargin:0; padding:0; - } - the HTML { -height:100%; - } - + Body { -Background: #666; + } A at #can { -Display:block; MARGIN:25PX Auto; Background: #FFF; border-radius:2px; - } -</style> -<script type= ' Text/javascript ' > -$ (document). Ready (function(){ in varcan = $ (' #can '). Get (0 ); - varOcan = Can.getcontext (' 2d ' ); to Ocan.beginpath (); +Ocan.fillstyle = ' #F00 '; -Ocan.fillrect (100, 100, 100, 100 ); the Ocan.save (); *Ocan.globalalpha =. 5; $Ocan.fillstyle = ' #0F0 ';Panax NotoginsengOcan.fillrect (150, 150, 100, 100 ); - Ocan.restore (); the Ocan.closepath (); + } ) A</script> the +<body> -<canvas id= ' can ' width= ' height= ' > detects that your browser version is too low please upgrade your browser to get a better user experience ...</canvas> $</body> $
[HTML canvas transparency Globalapha] Canvas drawing properties Transparency Globalapha Properties Demo