一 图像组合

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图像组合的更多相关文章

  1. html5图像、图片处理【转】

    本文主题 情人节在网上看到国外JS牛人利用HTML5技术实现的一朵玫瑰花,深切的感受到HTML5技术的强大.本着学习的态度看了一下那朵玫瑰花的源代码,其中用到的HTML5技术是canvas标签,于是灵 ...

  2. 课题：html5图像羽化（不规则区域羽化，feather，html5羽化）

    下午搜索了一堆相关文章,没有找到符合要求的. 对一张图片应用不规则区域的羽化,该怎么做呢? 首先去查了下 羽化的原理,然而没有什么用, 然后就开始从表现层去研究怎么模拟? idea 1: blur滤镜 ...

  3. 搭建属于你的家庭网络实时监控–HTML5在嵌入式系统中的应用&#183;高级篇

    *本文已刊登在<无线电>2014年第6期 <搭建属于你的在线实时採集系统>中已经对HTML5平台有了初步的认识,并基于此向大家展示了怎样将採集到的数据上传至网络.实现实时观測. ...

  4. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  5. 分享10款功能强大的HTML5/CSS3应用插件

    1.纯CSS3美化Checkbox和Radiobox按钮 外观很时尚 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框.CSS ...

  6. 分享10款激发灵感的最新HTML5/CSS3应用

    1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path ...

  7. HTML5和CSS3不仅仅是两项新的Web技术标准

    HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已 ...

  8. HTML5 简介、浏览器支持、新元素

    什么是 HTML5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供 ...

  9. 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...

随机推荐

  1. SQL优化技术分析-3：SQL语句索引的利用

    使用索引来更快地遍历表.默认情况下建立的索引是非聚集索引,但有时它并不是最佳的.在非聚集索引下,数据 在物理上随机存放在数据页上.合理的索引设计要建立在对各种查询的分析和预测上.一般来说: 有大量重复 ...

  2. 如何做好一个Sprint Demo

    我列出了一些关于如何做好一个Demo(演示)的建议.我想通过以下四个步骤可以做出一个较好的Demo. 第一步:准备Demo故事 以真实用户使用软件的方式进行Demo.关键点不在于演示软件如何工作,而是 ...

  3. SQL中EXISTS的使用

    1.简介 不相关子查询:子查询的查询条件不依赖于父查询的称为不相关子查询. 相关子查询:子查询的查询条件依赖于外层父查询的某个属性值的称为相关子查询,带EXISTS 的子查询就是相关子查询 EXIST ...

  4. python 多进程使用总结

    python中的多进程主要使用到 multiprocessing 这个库.这个库在使用 multiprocessing.Manager().Queue时会出问题,建议大家升级到高版本python,如2 ...

  5. tftp-nfs开发环境搭建

    嵌入式开发通常使用主机-开发板的开发模式,在裸板开发中,我们通常使用串口调试工具传递文件,比如windows平台的超级终端,SecuCRT以及Linux平台的ckermit(题外话:ckermit比w ...

  6. 树莓派3B更新软件

    因为软件是要不断更新的,所以半个月或者一个月要升级一下软件 升级软件非常简单 在终端或者SSH里输入 sudo apt-get update && apt-get upgrade -y ...

  7. centos mysql开启远程访问

    登录MySQL:  mysql -u root -p db; 如需修改密码,第一次:  mysqladmin -u root password NEWPASSWORD 已设置过:  mysqladmi ...

  8. sql select 1-10的数字

    SELECT V FROM (   VALUES (1), (2), (3), (4), (5),          (6), (7), (8), (9), (10) ) [1 to 10](V)

  9. MYSQL基础操作

    MYSQL基础操作 [TOC] 1.基本定义 1.1.关系型数据库系统 关系型数据库系统是建立在关系模型上的数据库系统 什么是关系模型呢? 1.数据结构可以规定,同类数据结构一致,就是一个二维的表格 ...

  10. [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)

    Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义:   文本:由0个或 ...