Javascript高级编程学习笔记(91)—— Canvas(8) 阴影
阴影
2D上下文将会根据以下属性为形状或路径绘制阴影
- shadowColor: 用于设置阴影颜色,默认为黑色
- shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0
- shadowOffsetY: 形状或路径y轴方向的阴影偏移量,默认为0
- shadowBlur: 模糊的像素数,默认为0, 即不模糊
这些属性都可以通过 context 对象来修改,只要在绘制之前为其设置值,就能自动产生阴影
var context = drawing.getContext("2d"); // 设置阴影
context.shadowColor = "rgba(0, 0, 0, 0.5)";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4; // 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50); // 绘制蓝色矩形
context.fillStyle = "rgba(0, 0, 255, 1)";
conttext.fillRect(30, 30, 50, 50);
需要注意的是不同浏览器对阴影的支持存在差异
而且就算能完整支持的浏览器,不同浏览器之间的行为也存在着差异
Javascript高级编程学习笔记(91)—— Canvas(8) 阴影的更多相关文章
- Javascript高级编程学习笔记(94)—— Canvas(11) 合成
合成 除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中; globalAlpha 用于指定所有绘制的透明度 globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结 ...
- Javascript高级编程学习笔记(93)—— Canvas(10) 模式及图像数据
模式 模式其实就是重复的图像,用来填充或描边图形 要创建一个新模式,可以调用 createPattern()并传入两个参数 一个HTML img元素 用于表示如何重复的字符串 "repeat ...
- Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像
绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...
- Javascript高级编程学习笔记(89)—— Canvas(6) 变换
变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的 ...
- Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径
绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...
- Javascript高级编程学习笔记(86)—— Canvas(3)绘制矩形
绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...
- Javascript高级编程学习笔记(85)—— Canvas(2)2D上下文
2D上下文 使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径; 2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0) 后续所有操作的计算都基于原点,x ...
- Javascript高级编程学习笔记(84)—— Canvas(1)基本用法
Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...
随机推荐
- 玩转Spring MVC(二)----MVC框架
早期程序员在编写代码时是没有一个规范的,系统的业务逻辑和数据库的访问时混合在一起的,不仅增加了大量的重复工作,而且增加了后期维护的难度. 后来,人们逐渐发现某些通用的功能是可以单独的封装起来的,这样就 ...
- 究竟谁在绑架中国的4G政策?
2009年中国正式发放3G牌照以来,尽管在开始阶段受到了应用不足的困扰,但是随着智 能手机的迅速推广,3G移动通信也开始在中国得到了飞速的发展.就在消费者以及市场 逐步接受并广泛应用该技术之际,4G通 ...
- traceback模块
traceback模块被用来跟踪异常返回信息 如下例所示: import traceback try: raise SyntaxError, "traceback test" ex ...
- DOM常见操作
一.查找 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性 ...
- POJ_2653_Pick-up sticks_判断线段相交
POJ_2653_Pick-up sticks_判断线段相交 Description Stan has n sticks of various length. He throws them one a ...
- BZOJ_3477_[Usaco2014 Mar]Sabotage_二分答案
BZOJ_3477_[Usaco2014 Mar]Sabotage_二分答案 题意: 约翰的牧场里有 N 台机器,第 i 台机器的工作能力为 Ai.保罗阴谋破坏一些机器,使得约翰的工作效率变低.保罗可 ...
- spss汉化详解
今天写一下关于SPSS的汉化以及激活码 下载spss: 安装过程比较简单,主要就是激活码: 9DNCAF2O3QVDV7FBIO696OO6GWLNXZPPRYTPWF2PPX7C8T6Y24LMVV ...
- jackson json转对象 json转集合 对大小写支持
@JsonAutoDetect(fieldVisibility = Visibility.ANY, getterVisibility = Visibility.NONE, isGetterVisibi ...
- json与javabean之间的转化
接着上一个http://www.cnblogs.com/ya-qiang/p/9009134.html随笔,继续介绍json与java对象之间的转化 一.java普通对象和json字符串的互转 jav ...
- 前端随笔 - JavaScript中的闭包
前阵子重新复习了一下js基础知识,第一篇博客就以分享闭包心得为开始吧. 首先,要理解闭包,就必须要了解一个概念:作用域链. 作用域链 作用域代表着可访问变量的集合,变量分为全局变量和局部变量两种,在函 ...