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>

[ html canvas 透明度 globalApha ] canvas绘图属性 透明度 globalApha 属性演示的更多相关文章

  1. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  2. canvas元素大小与绘图表面大小

    原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...

  3. HTML5 Canvas：初始Canvas

    Canvas ,HTML 5中引入它,可以做很多事情:画图.动画.游戏开发等等. Canvas 元素 Canvas 中文翻译为:画布. <canvas id=”yourCanvasId” wid ...

  4. 初识canvas，使用canvas做一个百分比加载进度的动画

    canvas作为H5中重要的新增特性,使开发者可以用它来创作各种令人惊叹的作品.先来看一下浏览器对canvas的支持情况. <canvas> 标签定义图形,比如图表和其他图像,我们使用脚本 ...

  5. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  6. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...

  7. 记录一下ionic canvas图片,还有canvas里面的图片跨域的问题

    import { Component, Inject, forwardRef } from '@angular/core'; import { IonicPage, NavController, Na ...

  8. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...

  9. canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  10. HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)

    前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: <!doctype html> ...

随机推荐

  1. STM32 程序所占用空间计算 && FLASH存储的起始地址计算

    程序编译完成,会乘车program size .. 对STM32容量选型或者 计算FLASH 充当EEPROM起始地址时会用到此参数. 按照下面截图  程序空间 = (16700+732+4580)/ ...

  2. MyBatis知多少（25）动态SQL

    使用动态查询是MyBatis一个非常强大的功能.有时你已经改变WHERE子句条件的基础上你的参数对象的状态.在这种情况下的MyBatis提供了一组可以映射语句中使用,以提高SQL语句的重用性和灵活性的 ...

  3. linux 硬盘分区，分区，删除分区，格式化，挂载，卸载笔记

    linux 虽然一直都有在玩,但是对硬盘操作确实不是很熟悉今天有空,就整理了下. 1, 创建分区 先查看下是否有磁盘没有分区 fdisk -l 其中第一个框和第二个框,是已经分好区的磁盘,第三个硬盘没 ...

  4. Eclipse中使用Junit编写测试用例

    Eclipse自带Junit插件,不用安装就能在项目中编写测试用例,非常方便. 在项目中添加Junit库 在编写测试用例之前,需要先引入Junit.对项目根目录右键,选择Properties,Java ...

  5. centos nfs配置--转载

    http://www.centos.org/docs/5/html/Deployment_Guide-en-US/s1-nfs-client-config.html 18.6. NFS Server ...

  6. Appium移动自动化测试（四）--one demo

    继续更新. -------------------------------------------- 第四节  安装Appium Client Appium Client是对webdriver原生ap ...

  7. 我写的一个ExcelHelper通用类，可用于读取或生成数据

    读取或生成EXCEL数据的方法有很多,一般常见的有: 1.通过OFFICE EXCEL组件,优点:读取与生成EXCEL文件方便,缺点:服务器上必须安装OFFICE软件,且进程无法及时释放 2.通过第三 ...

  8. MySQL5中大数据错误：Packet for query is too large (****** > ******). You can change this value on the server by setting the max_allowed_packet' variable.;

    使用的MySQL数据库版本:5.5 插入或更新字段有大数据时(大于1M),会出现如下错误: ### Cause: com.mysql.jdbc.PacketTooBigException: Packe ...

  9. IIS app pools, worker processes, app domains

    Copy from  http://stackoverflow.com/questions/14105345/iis-app-pools-worker-processes-app-domains I ...

  10. Winform开发框架之插件化应用框架实现

    支持插件化应用的开发框架能给程序带来无穷的生命力,也是目前很多系统.程序追求的重要方向之一,插件化的模块,在遵循一定的接口标准的基础上,可以实现快速集成,也就是所谓的热插拔操作,可以无限对已经开发好系 ...