HTML5使用Canvas来绘制图形

一、Canvas标签：

1、HTML5<canvas>元素用于图形的绘制，通过脚本（通常是javascript）来完成。

2、<canvas>标签只是图形容器，必须使用脚本来绘制图形。

3、可以通过多种方法通过Canvas绘制路径、盒、圆、字符以及添加图像。

二、Canvas绘制图形

1、绘制矩形

2、绘制圆形

3、moveTo和lineTo

4、使用bezierCurveTo绘制贝塞尔曲线

5、绘制线性渐变

6、绘制径向渐变

7、绘制变形图形

8、绘制图形合成gloablCompositeOperation属性

使用不同的 globalCompositeOperation 值绘制矩形。橙色矩形是目标图像。粉色矩形是源图像。

定义和用法

globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

属性值：

值	属性
source-atop	在先绘制的图形顶部显示后绘制的图形。后绘制的图形位于先绘制的图形之外的部分是不可见的。
source-in	只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明。
source-out	只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明。
source-over	在先绘制的图形上显示后绘制的图形。相交部分由后绘制的图形填充(颜色,渐变,纹理)覆盖
destination-atop	在后绘制的图形顶部显示先绘制的图形。源图像之外的目标图像部分不会被显示。
destination-in	在后绘制的图形中显示先绘制的图形。只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明
destination-out	只有后绘制的图形外的目标图像部分会被显示，源图像是透明的。
destination-over	相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖.
lighter	相交部分由根据先后图形填充来增加亮度。
copy	显示后绘制的图形。只绘制后绘制图形。
xor	相交部分透明

以上效果图的代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <script src="../js/jquery-1.12.4.min.js"></script>
 7     <script>
 8         $(function(){
 9             var options = new Array(
10                     "source-atop",
11                     "source-in",
12                     "source-out",
13                     "source-over",
14                     "destination-atop",
15                     "destination-in",
16                     "destination-out",
17                     "destination-over",
18                     "lighter",
19                     "copy",
20                     "xor"
21             );
22             var str="";
23             for(var i=0;i<options.length;i++){
24                  str = "<div id='p_"+i+"' style='float:left'>"+options[i]+"<br/><canvas id='canvas"+i+"' width='120px' height='100px' style='border:1px solid #ccc;margin:10px 2px 20px;'></canvas></div>";
25                 $("body").append(str);
26                 var cas = document.getElementById('canvas'+i);
27                 var ctx = cas.getContext('2d');
28                 ctx.fillStyle = "orange";
29                 ctx.fillRect(10,10,50,50);
30                 ctx.globalCompositeOperation = options[i];
31                 ctx.beginPath();
32                 ctx.fillStyle = "pink";
33                 ctx.arc(50,50,30,0,2*Math.PI);
34                 ctx.fill();
35             }
36         })
37     </script>
38 </head>
39 <body></body>
40 </html>

图形合成

9、给图形绘制阴影

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>canvas基础api</title>
 6     <style>
 7         canvas{
 8             border:1px solid #ccc;
 9             margin:50px;
10         }
11     </style>
12     <script src="../js/jquery-1.12.4.min.js"></script>
13     <script>
14         $(function(){
15             //获取标签
16             var cas = document.getElementById('canvas');
17             //获取绘制环境
18             var ctx = cas.getContext('2d');
19             ctx.fillStyle ="#eef";
20             ctx.fillRect(0,0,300,300);
21             ctx.shadowOffsetX = 10;
22             ctx.shadowOffsetY = 10;
23             ctx.shadowColor = "rgba(100,100,100,0.5)";
24             ctx.shadowBlur = 7;
25             for(var j=0;j<3;j++){
26                 ctx.translate(80,80);
27                 create5star(ctx);
28                 ctx.fill();
29             }
30             function create5star(ctx){
31                 var dx =0;
32                 var dy=0;
33                 var s=50;
34                 ctx.beginPath();
35                 ctx.fillStyle ='rgba(255,0,0,0.5)';
36                 var x =Math.sin(0);
37                 var y =Math.cos(0);
38                 var dig = Math.PI/5*4;
39                 for(var i=0;i<5;i++){
40                     x=Math.sin(i*dig);
41                     y=Math.cos(i*dig);
42                     ctx.lineTo(dx+x*s,dy+y*s)
43                 }
44                 ctx.closePath();
45                 ctx.fill();
46             }
47 
48         })
49     </script>
50 </head>
51 <body>
52     <canvas id="canvas" width="300" height="300">您的浏览器不支持canvas</canvas>
53 </body>
54 </html>

五角星阴影

10、canvas使用图像

语法：ctx.drawImage(imgobj,left,top,width,height)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>canvas基础api</title>
 6     <style>
 7         canvas{
 8             border:1px solid #ccc;
 9         }
10     </style>
11     <script src="../js/jquery-1.12.4.min.js"></script>
12     <script>
13         $(function(){
14             //获取标签
15             var cas = document.getElementById('canvas');
16             //获取绘制环境
17             var ctx = cas.getContext('2d');
18             //导入图片
19             var img = new Image();
20             img.src="../images/002.png";
21             //图片加载完之后，再开始绘制图片
22             img.onload = function(){
23                 //绘制图片ctx.drawImage(imgobj,left,top,width,height)
24                 ctx.drawImage(img,100,50,300,200)
25             }
26 
27         })
28     </script>
29 </head>
30 <body>
31     <canvas id="canvas" width="500" height="300">您的浏览器不支持canvas</canvas>
32 </body>
33 </html>

使用图片