HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 阴影
* shadowColor: 阴影的颜色
* shadowOffsetX: 横向偏移
* shadowOffsetY: 纵向偏移
* shadowNlur: 模糊程度
*/
cxt.shadowColor = "red";
cxt.shadowOffsetX = 20;
cxt.shadowOffsetY = 20;
cxt.shadowBlur = 0;
cxt.fillRect(200, 200, 400, 200);
</script>
HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur的更多相关文章
- HTML5 给图形绘制阴影(绘制五角星示例)
几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...
- HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5☞canvas
<canvas>便签用于绘制图像,图表.不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本JavaScript来完成实际的绘图任务.既然你 ...
- 玩转html5<canvas>画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- html5 canvas的教程
原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路 ...
- html5 canvas 详细使用教程 转
分类: html5(9) 原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘 ...
随机推荐
- hdu1097
hdu1097 求a^b的末位数 打表O(1) import java.util.*; public class Main { static int [][]a = new int[15][15]; ...
- 表单添加缩略图及截图js代码
此为表单提交是上传截图的代码,待优化: // 添加小程序图片 function addAvatar(obj){ var file = obj.files[0]; limit($('.avatar_bo ...
- streamsets k8s 部署试用
使用k8s 进行 streamsets的部署(没有使用持久化存储) k8s deploy yaml 文件 deploy.yaml apiVersion: extensions/v1beta1 kind ...
- 在oracle的连接(join)中使用using关键字
如果是使用natraul join,并且两张表中如果有多个字段是具有相同的名称和数据类型的,那么这些字段都将被oracle自作主张的将他们连接起来. 但实际上我们有时候是不需要这样来连接的.我们只需要 ...
- android 工具类 数据库管理
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xuduzhoud/article/details/27540301 数据库工具类,优雅的管理andr ...
- 使用gitblit搭建一个简单的局域网服务器
使用gitblit搭建一个简单的局域网服务器 1.使用背景 现在很多使用github管理代码,但是github需要互联网的支持,而且私有的git库需要收费.有一些项目的代码不能外泄,所以,搭建一个局域 ...
- vue-progressbar 知识点
使用步骤: 安装 import.Vue.use() 组件里,created() 和 mounted() 复制官方github地址上的代码 官方github地址:https://github.com/h ...
- v-if 与 v-show 区别
使用 v-if 时,如果在初始化渲染的时候条件为false, 那么不会做任何事情. v-if 首次局部编译不会发生,直到条件变为true. v-if 切换显示内容的消耗更高,而 v-show 在初始化 ...
- 【python】专用下划线标识符说明
__xxx__:系统定义名字 __xxx:类中私有变量名 说明:__xxx看做“私有的”,在模块或者类外是不可以使用.
- 【android】 adb logcat命令查看并过滤android输出log
cmd命令行中使用adb logcat命令查看android系统和应用的log,dos窗口按ctrl+c中断输出log记录. logcat日志中的优先级/tag标记: android输出的每一条日志都 ...