canvas特效代码详解（1）

canvas是一个就基于像素的画图h5元素。

具体的知识点详见：http://www.cnblogs.com/flyingLcode/p/7719026.html

下面以一些基础的代码加深对canvas的理解

绘制路径以及添加文本

（这里以时钟为例）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             canvas{
 8                 border: 1px solid #000;
 9                 margin: 200px 400px;
10             }
11         </style>
12     </head>
13     <body>
14         <canvas id="canvas" width="400" height="400"></canvas>
15         <script type="text/javascript">
16             var canvas = document.getElementById("canvas");
17             if(canvas.getContext){
18                 var context = canvas.getContext("2d");
19 //                开始路径
20                 context.beginPath();
21 //                外圆
22                 context.arc(100,100,99,0,2*Math.PI,false);
23 //                内圆
24                 context.moveTo(194,100);
25                 context.arc(100,100,94,0,2*Math.PI,false);
26 //                时针
27                 context.moveTo(100,100);
28                 context.lineTo(35,100);
29 //                分针
30                 context.moveTo(100,100);
31                 context.lineTo(100,15);
32 //                描边路径。调用stroke()方法把图形绘制到画布上去
33                 context.stroke();
34 //                使用fillText()方法绘制文本
35                 context.font = "bold 14px Arial";
36                 context.textAlign = "center";
37                 context.textBaseline = "middle";
38                 context.fillText("12", 100, 20);
39             }
40         </script>
41     </body>
42 </html>

效果如下

绘制及清除矩形 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             canvas{
 8                 border: 1px solid #000;
 9                 margin: 200px  300px;
10             }
11         </style>
12     </head>
13     <body>
14         <canvas id="canvas" width="400" height="400"></canvas>
15         <script type="text/javascript">
16             var canvas = document.getElementById("canvas")
17 //            确定浏览器支持canvas元素
18             if(canvas.getContext){
19                 var context = canvas.getContext("2d");
20 //                绘制红色矩形
21                 context.fillStyle = "#ff0000";
22                 context.fillRect(50,50,200,200);
23 //                绘制蓝色矩形
24                 context.fillStyle = "rgba(0,0,255,0.9)";
25                 context.fillRect(140,140,200,200);
26 //                在两个矩形重叠的地方切一个小矩形
27                 context.clearRect(160,160,80,80);
28             }
29         </script>
30     </body>
31 </html>

效果如下：

设置矩形的阴影

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             canvas{
 8                 border: 1px solid #000;
 9                 margin: 300px 300px;
10             }
11         </style>
12     </head>
13     <body>
14         <canvas id="canvas" width="200" height="200"></canvas>
15         <script type="text/javascript">
16             var canvas = document.getElementById("canvas")
17             if(canvas.getContext){
18                 var context = canvas.getContext("2d");                
19 //                绘制红色矩形
20                 context.fillStyle = "#ff0000";
21                 context.fillRect(10,10,20,20);
22 //                绘制蓝色矩形
23                 context.fillStyle = "rgba(0,0,255,0.9)";
24                 context.fillRect(30,30,20,20);
25 //                设置阴影，必须写在要设置的元素之前
26                 context.shadowOffsetX = 5;
27                 context.shadowOffsetY = 5;
28                 context.shadowColor = "rgba(0,0,0,0.5)";
29                 context.shadowBlur = 4;
30 //                绘制矩形
31                 context.fillStyle = "yellowgreen";
32                 context.fillRect(50,50,20,20);
33 //                绘制矩形
34                 context.fillStyle = "black";
35                 context.fillRect(70,70,20,20);                                
36             }
37         </script>
38     </body>
39 </html>

效果如下：

绘制图像

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             canvas{
 8                 border: 1px solid #000;
 9             }
10         </style>
11     </head>
12     <body>
13         <canvas id="canvas" width="840" height="400"></canvas>
14         <script type="text/javascript">
15             var canvas = document.getElementById("canvas");
16             var context = canvas.getContext("2d");
17             
18             var img = new Image;
19 //            使用onload方法
20             img.onload = function(){
21                 context.drawImage(img,20,20);
22             }
23             img.src = 'img/1.jpg';
24         </script>
25     </body>
26 </html>

效果如下：

 绘制渐变矩形

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             canvas{
 8                 border: 1px solid #000;
 9                 margin: 100px 500px;
10             }
11         </style>
12     </head>
13     <body>
14         <canvas id="canvas" width="400" height="400"></canvas>
15         <script type="text/javascript">
16             var canvas = document.getElementById("canvas");
17             var context = canvas.getContext("2d");
18 //            调用createLinearGradient()方法
19             var gradient = context.createLinearGradient(55,55,10,55,55,30);
20 //            使用addColorStop()方法来指定色标
21             gradient.addColorStop(0,"red");
22             gradient.addColorStop(1,"black");
23 //            绘制绿色矩形
24             context.fillStyle = "green";
25             context.fillRect(10,10,50,50);
26 //            绘制渐变矩形
27             context.fillStyle = gradient;
28             context.fillRect(30,30,50,50);
29         </script>
30     </body>
31 </html>

效果如下

 

posted @ 2017-10-24 21:38  flying-code  阅读(769)  评论(0)    收藏  举报