<!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. Xcode_9_beta.xip 更新下载

    Xcode_9_beta.xip 更新下载 Xcode_9_beta.xip 链接: pan.baidu.com/s/1dFJ33tJ 密码: 89mv

  2. 洛谷 P3636 曲面

    题目背景 xht喜欢研究数学函数,他特别喜欢反比例函数. 题目描述 我们知道,反比例函数xy=a的图象是双曲线. xht于是想:把它推广到三维是什么样的呢? 定义曲面C(k)为方程xyz=k所确定的曲 ...

  3. Java多线程设计模式(4)线程池模式

    前序: Thread-Per-Message Pattern,是一种对于每个命令或请求,都分配一个线程,由这个线程执行工作.它将“委托消息的一端”和“执行消息的一端”用两个不同的线程来实现.该线程模式 ...

  4. iOS音频的后台播放总结

     在没有网络的情况下,音频的后台播放比较简单,google一下可以搜到很多资料,但是如果每次歌曲的请求都是通过网络,就不成了,有时可以也扛不了几首,这里总结下实现方法,可以实现像电台一样的功能,后台播 ...

  5. ARM常用汇编指令介绍

    b     跳转指令(跳转范围为32Mb) bl    带返回地址的跳转,指令自动将下一条指令的地址复制到R14寄存器,然后跳转到指定地址去执行,执行完后返回到下一条指令处执行 pc    寄存器R1 ...

  6. IntelliJ IDEA控制台Console里没有查找快捷键

    问题描述:之前的项目一直用的 Eclipse,习惯了其快捷键的使用,现在的项目换到IntelliJ IDEA,为了尽快上手,就把快捷键Keymap修改为Eclipse方式.发现在控制台Console里 ...

  7. 【微信】微信小程序 微信开发工具中新创建的json文件，编译报错VM1781:2 pages/module/module.json 文件解析错误 SyntaxError: Unexpected end of JSON input

    如果新创建报错:编译报错VM1781:2 pages/module/module.json 文件解析错误  SyntaxError: Unexpected end of JSON input 解决方法 ...

  8. wsdl2java在mac中点配置

    1.打开终端,默认是用户目录,输入以下命令: ls -a 显示隐藏文件 2.打开.bash_profile,输入以下命令 open .bash_profile 配置JAVA_HOME,AXIS2_HO ...

  9. Linux增加挂载盘

    命令:fdisk /dev/sdb, m 命令:m,n,e,1,p,w 命令:mkfs -t ext4 /dev/sdb,y 挂载命令:mount -t ext4 /dev/sdb /data 获取U ...

  10. 【Android高级】NDK/JNI编程技术基础介绍

    作为一个Andoird的Java程序猿,会受到Java语言的局限.由于作为一面门向对象的语言不能像C/C++那样轻易调用与硬件有关的操作.因此JNI就搭建了这样一个桥梁,使Java和C/C++语言之间 ...