html5图像组合
一 图像组合
1.绘制阴影
在绘制阴影效果时，需要使用Canvas的多个属性配合完成
shadowBlur设置阴影的迷糊级数
shadowOffsetX设置形状与阴影的水平距离
shadowOffsetY设置形状与阴影的垂直距离
shadowColor设置阴影的颜色
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" height="300" width="400"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx= c.getContext("2d");
ctx.save(); //保存上下文对象
ctx.shadowBlur=10; //设置阴影的模糊级别
ctx.shadowOffsetX=20; //设置阴影与矩阵的水平距离
ctx.shadowOffsetY=20; //设置阴影与矩阵的垂直距离
ctx.shadowColor="black"; //设置阴影颜色
ctx.fillStyle="blue"; //设置填充颜色
ctx.beginPath(); //设置阴影颜色
ctx.fillRect(20,20,200,200); //绘制一个矩形
ctx.restore(); //获取保存的上下文对象
ctx.fillStyle="black"; //重新设置填充颜色
ctx.beginPath(); //设置阴影颜色
ctx.fillRect(300,20,200,200) ; //绘制第二个矩形
</script>
</body>
</html>
显示：
shadowOffsetX和shadowOffsetY的值对阴影的效果？
shadowOffsetX和shadowOffsetY表示阴影与对象的水平和垂直距离，如果值是正数，阴影显示在图像的右边和下边；如果值是负 数，阴影显示在对象的左边和上边。
2.透明效果
主要通过设置globalAlpha属性控制重叠图形的透明度，该值介于0和1之间，0表示完全透明，1表示完全不透明
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" height="300" width="400"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx= c.getContext("2d");
ctx.fillStyle="red"; //设置填充颜色
ctx.fillRect(20,20,300,200); //绘制不透明矩形框
ctx.globalAlpha=0.2 //设置透明度
ctx.fillStyle="blue"; //设置填充颜色
ctx.fillRect(100,100,300,200);//绘制第二个矩形框
ctx.fillStyle="green"; //设置填充颜色
ctx.fillRect(150,150,200,200);//绘制第三个矩形框 </script>
</body>
</html>
显示：
二 使用图像
1.插入图形
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.6.1.html</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image(); //创建一个图片数组
img.src="img01.png"; //设置图片路径
img.onload=function(){ //为图片加载一个onload事件
cxt.drawImage(img,0,0); //加载图片
};
</script>
</body>
</html>
onload事件：会在图像或者页面加载完成后立即发生
2.平铺图像
需要用到Canvas的createPattern函数，该函数有两个参数，一个是需要平铺的图像，二是以哪种方式进行平铺，repeat（在水平和垂直方向重复），repeat-x（在水平方向重复），repeat-y（在垂直方向重复），no-repeat（不重复）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.6.2.html</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var image = new Image();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
image.src = "002.png";
image.onload = function () {
var ptrn = ctx.createPattern(image, "repeat");
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 600, 600);
}; </script>
</body>
</html>
3.裁剪图像
该函数的多个重载方法
<html>
<head>
<meta charset="utf-8">
<title>4.6.3.html</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="img01.png";
img.onload=function(){
cxt.drawImage(img,100,100,100,100,0,0,100,100);
};
</script>
</body>
</html>
4.像素级操作
根据各点像素颜色分配的不同，呈现出不同的图像
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.6.4.html</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.src="img01.png";
img.onload=function(){
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// 反转颜色
for (var i=0;i<imgData.data.length;i+=4) {
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);
};
</script>
</body>
</html>
html5图像组合的更多相关文章
- html5图像、图片处理【转】
本文主题 情人节在网上看到国外JS牛人利用HTML5技术实现的一朵玫瑰花,深切的感受到HTML5技术的强大.本着学习的态度看了一下那朵玫瑰花的源代码,其中用到的HTML5技术是canvas标签,于是灵 ...
- 课题：html5图像羽化（不规则区域羽化，feather，html5羽化）
下午搜索了一堆相关文章,没有找到符合要求的. 对一张图片应用不规则区域的羽化,该怎么做呢? 首先去查了下 羽化的原理,然而没有什么用, 然后就开始从表现层去研究怎么模拟? idea 1: blur滤镜 ...
- 搭建属于你的家庭网络实时监控–HTML5在嵌入式系统中的应用·高级篇
*本文已刊登在<无线电>2014年第6期 <搭建属于你的在线实时採集系统>中已经对HTML5平台有了初步的认识,并基于此向大家展示了怎样将採集到的数据上传至网络.实现实时观測. ...
- HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- 分享10款功能强大的HTML5/CSS3应用插件
1.纯CSS3美化Checkbox和Radiobox按钮 外观很时尚 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框.CSS ...
- 分享10款激发灵感的最新HTML5/CSS3应用
1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path ...
- HTML5和CSS3不仅仅是两项新的Web技术标准
HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已 ...
- HTML5 简介、浏览器支持、新元素
什么是 HTML5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供 ...
- 分享10款效果惊艳的HTML5图片特效
在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...
随机推荐
- Hibernate 系列 04 - Hibernate 配置相关的类
引导目录: Hibernate 系列教程 目录 前言: 通过上一篇的增删改查小练习之后,咱们大概已经掌握了Hibernate的基本用法. 我们发现,在调用Hibernate API的过程中,虽然Hib ...
- SQL中几个常用的排序函数
最近使用窗口函数的频率越来越高,这里打算简单介绍一下几个排序的函数,做一个引子希望以后这方面的问题能够更深入的理解,这里先简单介绍一下几个简单的排序函数及其相关子句,这里先从什么是排序开始吧 ...
- 使用ganglia监控hadoop及hbase集群
一.Ganglia简介 Ganglia 是 UC Berkeley 发起的一个开源监视项目,设计用于测量数以千计的节点.每台计算机都运行一个收集和发送度量数据(如处理器速度.内存使用量等)的名为 gm ...
- python中的ValueError
在初学时候,会遇到这种错误,修改了代码,一一比对了代码,发现代码,没有错误,可是就是运行不了. 我们先从错误的语句来入手!(这显示了英语很重要) ValueError: need more tha ...
- monkeyrunner之坐标或控件ID获取方法-续
在之前的文章中,介绍过控件坐标和ID的获取方法,这里,我们再介绍一个新的工具-uiautomatorviewer. Uiautomatorviewer是Android sdk自带的工具,位置在sdk/ ...
- Re 模块
re模块提供方法如compile, search, findall, match和其他的方法.这些函数是使用REGEX语法建立了一个模式来处理文本的. 第一个方法:search. 一个基本的搜索工作原 ...
- [LeetCode] Flatten 2D Vector 压平二维向量
Implement an iterator to flatten a 2d vector. For example,Given 2d vector = [ [1,2], [3], [4,5,6] ] ...
- c#与JavaScript实现对用户名、密码进行RSA非对称加密
博主最近手上这个项目呢(就是有上百个万恶的复杂excel需要解析的那个项目,参见博客:http://www.cnblogs.com/csqb-511612371/p/4885930.html),由于是 ...
- 数据集偏斜 - class skew problem - 以SVM松弛变量为例
原文 接下来要说的东西其实不是松弛变量本身,但由于是为了使用松弛变量才引入的,因此放在这里也算合适,那就是惩罚因子C.回头看一眼引入了松弛变量以后的优化问题: 注意其中C的位置,也可以回想一下C所起的 ...
- poj 1251 Jungle Roads (最小生成树)
poj 1251 Jungle Roads (最小生成树) Link: http://poj.org/problem?id=1251 Jungle Roads Time Limit: 1000 ...