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 原作很强悍 导航 前言 基本知识 绘 ...
随机推荐
- 《DSP using MATLAB》 Problem 3.19
先求模拟信号经过采样后,对应的数字角频率: 明显看出,第3种采样出现假频了.DTFT是以2π为周期的,所以假频出现在10π-2kπ=0处. 代码: %% ----------------------- ...
- 原子性、可见性、synchronized 有好理解
原子性.可见性.synchronized 有好理解: from: https://blog.csdn.net/wohaqiyi/article/details/67635010 1.原子性 (1)原子 ...
- 构建一个dbt 数据库适配器
脚手架新的适配器 首先,将odbc适配器模板复制到同一目录中的新文件. 更新dbt / adapters / factory.py以将新适配器包含为类型.还要将类型添加到dbt / contracts ...
- dgraph 数据加载
dgraph 可以方便的进行大量的数据加载 下载rdf 文件 wget "https://github.com/dgraph-io/tutorial/blob/master/resource ...
- sdut2408 pick apples （贪心+背包）山东省第三届ACM省赛
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/svitter/article/details/24642587 本文出自:http://blog.c ...
- PHP查找中文字符的解决方案
在PHP中查找中文字符,有两种方案.1.中文字符是gbk(gb2312)有两种解决方法第一种:将PHP保存为ASCII编码,然后使用strpos查找,如:strpos($curl_res, ‘哈哈’) ...
- MySQL5.5.19安装
本文详细介绍了Windows下安装MySQL5.5.19的全过程,希望对初学者有帮助. http://dl.pconline.com.cn/html_2/1/79/id=465&pn=0.h ...
- 加快QT工程编译速度
转载:学海方舟 利用Qt Creator编译工程大家都觉得慢,特别是整个工程重新编译时,那问题来了怎么加快编译速度呢 ,其实方法很简单,利用我们的强大的多核CPU来实现多核编译: 在编译参数中加入“- ...
- Jsoncpp 使用方法大全
Json(JavaScript Object Notation )是一种轻量级的数据交换格式.简而言之,Json组织形式就和python中的字典, C/C++中的map一样,是通过key-value对 ...
- python 可视化 散点图。柱状图、等高线
matplolib.org可查到更多画图方法等 散点图 import matplotlib.pyplot as plt import numpy as np #n个点 n = 1024 #平均值是0, ...