<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #mycanvas{

            border: 1px solid #9c9898;

            background: blue;

        }

    </style>

    <script language="JavaScript">

        window.onload=function(){

            var canvas = document.getElementById("mycanvas");

            var contex = canvas.getContext("2d");

            //绘制矩形

            contex.beginPath();

            contex.rect(50,50,100,50);

            contex.lineWidth=5;

            contex.strokeStyle="blue";

            contex.stroke();

            contex.fillStyle="red";

            //设置阴影在fill方法之前

            contex.shadowColor="black";//阴影颜色

            contex.shadowBlur=0;//模糊度，越大越模糊

            contex.shadowOffsetX=50;//偏移量;

            contex.shadowOffsetY=10;

            contex.globalAlpha=1;//透明度 介于0-1 0 完全透明

            contex.fill();

            //绘制圆

            contex.beginPath();

            var centx=320;

            var centy=400;

            var r=100;

            contex.arc(centx,centy,r,0,2*Math.PI);

            contex.lineWidth=10;

            contex.strokeStyle="black";

            contex.stroke();

            contex.fillStyle="green";

            contex.fill();

        }

    </script>

</head>

<body>

    <canvas id="mycanvas" width="800" height="800"></canvas>

</body>

</html>

html 绘图阴影和透明度的更多相关文章

  1. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  2. Android 画布绘图

    我们已经介绍了Canvas,在那里,已经学习了如何创建自己的View.在第7章中也使用了Canvas来为MapView标注覆盖. 画布(Canvas)是图形编程中一个很普通的概念,通常由三个基本的绘图 ...

  3. 【开源】XPShadow， 用阴影让UWP更有层次感

    UWP采用的是纯扁平化的设计,个人感觉极端了点,整个世界都是平的,导致App分不清层次,看不出重点.其实扁平化是趋势,android, ios都在搞,问题是android, ios都可以很轻松的实现阴 ...

  4. Highmaps网页图表教程之绘图区显示标签显示数据标签定位

    Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. H ...

  5. Android Canvas 绘图

    画布(Canvas)是图形编程中一个很普通的概念,通常由三个基本的绘图组件组成:       Canvas  提供了绘图方法,可以向底层的位图绘制基本图形.       Paint  也称为" ...

  6. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

  7. iOS 设置View阴影

    iOS 设置View投影 需要设置 颜色 阴影半径 等元素 UIView *shadowView = [[UIView alloc] init]; shadowView.frame = CGRectM ...

  8. Android开发 控件阴影详情

    如何给控件设置阴影? <com.google.android.material.tabs.TabLayout android:id="@+id/tablayout" andr ...

  9. iOS总结_UI层自我复习总结

    UI层复习笔记 在main文件中,UIApplicationMain函数一共做了三件事 根据第三个参数创建了一个应用程序对象 默认写nil,即创建的是UIApplication类型的对象,此对象看成是 ...

随机推荐

  1. 2017 CCPC 湘潭邀请赛

    都tm快一年了我还没补这套题……再不补怕是要留给退役后乐 Problem A 把$n * (n + 1)$的矩阵补成$(n + 1) * (n + 1)$的,然后高斯消元. Problem B 一看题 ...

  2. 洛谷—— P1022 计算器的改良

    P1022 计算器的改良 题目背景 NCL是一家专门从事计算器改良与升级的实验室,最近该实验室收到了某公司所委托的一个任务:需要在该公司某型号的计算器上加上解一元一次方程的功能.实验室将这个任务交给了 ...

  3. Ubuntu下触控板手势调节软件xSwipe

    楼主进了一台Thinkpad T450s,触控板支持4点触控,安装了ubuntu14.04 LTS之后,触控板只剩下双指滑动了,略有不爽,各种google,百度. 真找到办法了. 首先得知了touch ...

  4. 【bzoj4152】【The Captain】最短路（堆优化）（浅尝ACM-B）

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62834538 Description 给定平面上 ...

  5. [POI2007]Tourist Attractions

    题目大意: 给你一个$n(n\leq 2\times 10^4)$个点,$m(m\leq 2\times 10^5)$条边的带边权的连通图.其中有$k(k\leq 20)$个关键点.关键点之间有$g$ ...

  6. Flash3D学习计划(一)——3D渲染的一般管线流程

    一:什么是渲染管线 渲染管线也称为渲染流水线,是显示芯片内部处理图形信号相互独立的并行处理单元.一个流水线是一序列可以并行和按照固定顺序进行的阶段.每个阶段都从它的前一阶段接收输入,然后把输出发给随后 ...

  7. Linux查看哪些进程用了Swap分区

    如果系统的物理内存用光了,则会用到swap.系统就会跑得很慢,但仍能运行;如果Swap空间用光了,那么系统就会发生错误.通常会出现“application is out of memory”的错误,严 ...

  8. Systems Performance: Enterprise and the Cloud 读书笔记系列

    http://blog.csdn.net/xiaonanAndroid/article/category/2557735

  9. XCode工程内多Targets教程

    作者  透明de面具 原帖地址  http://www.cocoachina.com/bbs/read.php?tid-10972-fpage-0-toread--page-1.html    相信很 ...

  10. 设计模式之状态模式(PHP实现)

    github地址:https://github.com/ZQCard/design_pattern /** * 在状态模式(State Pattern)中,类的行为是基于它的状态改变的.这种类型的设计 ...