zoukankan      html  css  js  c++  java
  • [ html canvas 透明度 globalApha ] canvas绘图属性 透明度 globalApha 属性演示

     1 <!DOCTYPE html>
     2 <html lang='zh-cn'>
     3 <head>
     4 <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>
    10 <style type='text/css'>
    11 html,body,canvas,div,select,option {
    12     margin: 0; padding: 0;
    13 }
    14 
    15 html {
    16     height: 100%;
    17 }
    18 
    19 body {
    20     background: #666;
    21 }
    22 
    23 #can {
    24     display: block; margin: 25px auto; background: #FFF; border-radius: 2px;
    25 }
    26 </style>
    27 <script type='text/javascript'>
    28     $( document ).ready( function(){
    29         var can = $( '#can' ).get( 0 );
    30         var oCan = can.getContext( '2d' );
    31         oCan.beginPath();
    32         oCan.fillStyle = '#F00';
    33         oCan.fillRect( 100 , 100 , 100 , 100 );
    34         oCan.save();
    35         oCan.globalAlpha = .5;
    36         oCan.fillStyle = '#0F0';
    37         oCan.fillRect( 150 , 150 , 100 , 100 );
    38         oCan.restore();
    39         oCan.closePath();
    40     } )
    41 </script>
    42 </head>
    43 <body>
    44     <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低请升级您的浏览器以获取更好的用户体验...</canvas>
    45 </body>
    46 </html>
  • 相关阅读:
    hdu 4002 Find the maximum
    hdu 2837 坑题。
    hdu 3123
    zoj Treasure Hunt IV
    hdu 2053 Switch Game 水题一枚,鉴定完毕
    poj 1430 Binary Stirling Numbers
    hdu 3037 Saving Beans
    hdu 3944 dp?
    南阳oj 求N!的二进制表示最低位的1的位置(从右向左数)。
    fzu 2171 防守阵地 II
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5936402.html
Copyright © 2011-2022 走看看