使用Canvas API 可以将一个图形重叠绘制在另外一个图形上，也可以给图形添加阴影效果。

1、Canvas 图形组合

通过 globalCompositeOperation = 属性 来指定重叠效果

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             var context = canvas.getContext("2d");
             var oprtns = new Array(
                 "source-atop",
                 "source-in",
                 "source-out",
                 "source-over",
                 "destination-atop",
                 "destination-in",
                 "destination-out",
                 "destination-over",
                 "lighter",
                 "copy",
                 "xor"
             );
             i=8;
             context.fillStyle = "blue";
             context.fillRect(10,10,60,60);
             context.globalCompositeOperation = oprtns[i];
             context.beginPath();
             context.fillStyle = "red";
             context.arc(50, 50, 30, 0, Math.PI*2,false);
             context.fill();
         }
     </script>
 </head>
 <body onload="draw('canvas')">
     <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

2、给图形绘制阴影

相关属性：shadowOffsetX,shadowOffsetY,shadowOffsetColor,shadowBlur

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             var context = canvas.getContext("2d");
             context.fillStyle = "#eeeeef";
             context.fillRect(0,0,500,500);
             context.shadowOffsetX = 10;
             context.shadowOffsetY = 10;
             context.shadowColor = "rgba(255,100,100,0.9)";
             context.shadowBlur = 7.5;

             context.translate(0,50);
             for(var i=0;i<3;i++){
                 context.translate(70,100);
                 create5Start(context);
                 context.fill();
             }
         }
         function create5Start(context){
             var dx = 100;
             var dy = 0;
             var s = 50;
             context.beginPath();
             context.fillStyle = "rgba(255,0,0,0.5)";
             var x = Math.sin(0);
             var y = Math.cos(0);
             var dig = Math.PI /5 *4;
             for(var i=0; i<5;i++){
                 x = Math.sin(i*dig);
                 y = Math.cos(i*dig);
                 context.lineTo(dx+x*s,dy+y*s);
             }
             context.closePath();
         }
     </script>
 </head>
 <body onload="draw('canvas')">
 <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

3、使用图像

有3中绘制方式：

context.drawImage(img,x,y)

context.drawImage(img,x,y,w,h)

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)

 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             var context = canvas.getContext("2d");
             context.fillStyle = "#eeeeef";
             context.fillRect(0,0,500,500);
             image = new Image();
             image.src = "1.jpg";
             image.onload = function(){
                 drawImage(context,image);
             }
         }
         function drawImage(context, image){
 //           context.drawImage(image, 100,100);
 //            context.drawImage(image, 0,0,200,200);
             context.drawImage(image,100,100,200,200,100,100,100,100);
         }
     </script>

 </head>
 <body onload="draw('canvas')">
     <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

[html] 学习笔记-Canvas图形绘制处理的更多相关文章

  1. Web前端学习笔记——Canvas

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  3. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  4. 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^

    对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...

  5. 动画学习之WIFI图形绘制

    Android原生动画概述: 对于APP开发中涉及到的一些动画基本上都可以用Android提供的各种原生动画类来实现,所以在学习自定义动画之前首先来对原生动画进行一个基本的了解,这里不详细对每一个原生 ...

  6. [Android学习笔记]Canvas的使用

    Canvas文档 http://developer.android.com/training/index.html 在绘制view时候,重写onDraw(canvas)方法,可能需要在canvas上绘 ...

  7. canvas图形绘制

    前面的话 前面分别介绍了canvas的基础用法和进阶用法,本文将使用canvas的各种语法进行图形绘制 绘制线条 [绘制线条] 下面来尝试绘制一段线条 <canvas id="draw ...

  8. ‎Cocos2d-x 学习笔记(25) 渲染 绘制 Render

    [Cocos2d-x]学习笔记目录 本文链接:https://www.cnblogs.com/deepcho/p/cocos2dx-render.html 1. 从程序入口到渲染方法 一个Cocos2 ...

  9. 动画学习之Music图形绘制

    今天来实现一个类似于网易云音乐类似的动态效果,在用网易云音乐听歌时会有一个类似这样的效果,如下: 而咱们这次要实现的效果如下: music图形的绘制: 在实现动画之前先来将静态的图形绘制出来, 如下: ...

随机推荐

  1. [Programming WCF Services]Chapter 1. WCF Essentials - EndPoint

    1.配置文件方式设置EndPoint(ABC) 1.1.基本配置 <system.serviceModel> <services> <service name=" ...

  2. Sematic库系列一

    最近在做项目时采用了sematic css 库,由于这个库的资料太少,在做项目中遇到很多问题,在这里做一些记录 1. 下拉框demo HTML 代码 <div class="field ...

  3. CodeForces 450B Jzzhu and Sequences

    矩阵快速幂. 首先得到公式 然后构造矩阵,用矩阵加速 取模函数需要自己写一下,是数论中的取模. #include<cstdio> #include<cstring> #incl ...

  4. js arguments.callee & caller的用法及区别

    在函数内部,arguments.callee该属性是一个指针,指向拥有这个arguments对象的函数; 而函数对象的另一个属性:caller,这个属性保存着调用当前函数的函数的引用,如果是在全局作用 ...

  5. java调用C/C++写的dll（转）

    源:java调用C/C++写的dll Java语言本身具有跨平台性,如果通过Java调用DLL的技术方便易用,使用Java开发前台界面可以更快速,也能带来跨平台性. Java调用C/C++写好的DLL ...

  6. windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器

    在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...

  7. 如何针对已经安装好的Apache/PHP/Mysql/Nginx程序查看他们的编译参数

    我们经常要对我们已经安装好的程序进行查看他当时的一些编译参数,特别是针对要安装多台服务器来说,而且要保证其他服务器上的软件版本和安装参数必须一致时,这种查看就是很有必要的了.具体查看各程序的编译参数命 ...

  8. iOS开发——闪光灯

    还是那句很欠揍的话,没啥难度,直接上代码. // //  ViewController.m //  Demo—闪光灯 // //  Created by yyt on 16/4/21. //  Cop ...

  9. MUI开发注意事项

    mui开发注意事项,有需要的朋友可以参考下. mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的 ...

  10. Thinking in scala (2)---- 最大公约数

    gcd.scala object gcd{ def main(args:Array[String]){ println( gcd1(args(0).toInt,args(1).toInt)) prin ...