<!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body,canvas,div,select,option {

     margin: 0; padding: 0;

 }

 html {

     height: 100%;

 }

 body {

     background: #666;

 }

 #can {

     display: block; margin: 25px auto; background: #FFF; border-radius: 2px;

 }

 </style>

 <script type='text/javascript'>

     $( document ).ready( function(){

         var can = $( '#can' ).get( 0 );

         var oCan = can.getContext( '2d' );

         oCan.beginPath();

         oCan.fillStyle = '#F00';

         oCan.fillRect( 100 , 100 , 100 , 100 );

         oCan.save();

         oCan.globalAlpha = .5;

         oCan.fillStyle = '#0F0';

         oCan.fillRect( 150 , 150 , 100 , 100 );

         oCan.restore();

         oCan.closePath();

     } )

 </script>

 </head>

 <body>

     <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低请升级您的浏览器以获取更好的用户体验...</canvas>

 </body>

 </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. 配置 Sublime Text 用 Node.js 执行 JavaScript 程序

    1. 首先到 nodejs.org 下载 Node.js 安装包并安装. 2. 打开 Sublime Text 2 编辑器.选择菜单 Tools --> Build System --> ...

  2. 对C#对象的Shallow、Deep Cloning认识【转】

    好像园内比较多博客对 Shallow.Deep Cloning的翻译是深拷贝.浅拷贝,当时我懵了,这个叫法怎么怪怪的. 就好像看军情观察室,台湾评论员,导弹叫飞弹. 至于它们的区别,一张图就可以解释. ...

  3. Legolas工业自动化平台案例 —— 水源地自动化监控系统

    天津港爆炸事件后,除了安置群众.追究事故责任外,人们最关心的莫过于爆炸污染物对于周边环境的影响,其中最重要的一块就是饮用水的安全.所幸的是,水源的安全监测是实实在在有据可依的.环保单位和供水企业在建设 ...

  4. Python 之 lambda 函数

    Python 支持一种单行匿名函数,这种函数称为 lambda,它最初借鉴自 Lisp. >>> add = lambda x, y: x +y >>> add(3 ...

  5. 不同gdb，相同数据集合并

    众所周知,数据处理是GIS中一项重要且繁琐的工作,处理数据的工具和方法也太多了,在做数据处理的时候,经常会遇到这样的问题:对存储在不同gdb中.并且数据集名称相同的数据进行合并处理: 如图:数据组织如 ...

  6. DDD：建模原语 之 四象图（转载的神文）

    “模型.状态和行为特征.场景”和“四象图”,建模观的命名与立象. 建模原语:四象图 作者:achieveidea@gmail.com 命名:模型.结构特征.行为特征.场景(及其规约). 释义:模型,描 ...

  7. [mysql]增加用户 授权 远程登录

    mysql创建用户和授权 1.创建用户: (注意:下面的指令,请在root用户下输入) CREATE USER "用户名" IDENTIFIED BY "密码" ...

  8. VM不能连入局域网

    如果选了Host-only,那么虚拟机与跑虚拟机的宿主就无法连通了. 可以选用Bridged模式,那么虚拟机与跑虚拟机的主机连通了

  9. 前端js的书写规范和高效维护的方案_自我总结使用的方案

    作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...

  10. 【Win10】【译】提交 UWP 应用时遇到意料之外的语言？

    原文链接:http://metronuggets.com/2015/12/03/got-unexpected-extra-languages-in-your-uwp-store-submission/ ...