H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

一：

1.鼠标监视坐标值

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=UTF-8> 
 4     <title>canvas的演示</title>
 5     <script src="D:jqueryjquery-1.12.4.min.js""></script>
 6 </head>
 7 <body>
 8     <canvas id="tt" width="100" height="100" onmousemove="mousexy(event)">不支持H5</canvas>
 9     <div id="xy"></div>
10     
11     <script type="text/javascript">
12         var c=document.getElementById("tt");
13         var tt=c.getContext("2d");
14         
15         function mousexy(n){
16             x=n.clientX;
17             y=n.clientY;
18             document.getElementById("xy").innerHTML="x:"+x+"y:"+y;
19         }
20     </script>
21 </body>
22 </html>

2.运行结果

3.画矩形

　　两种方式：

　　其中，rgb支持透明度，0.5是透明度为0.5，所以可以看到底下的另一个矩形的颜色

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=UTF-8> 
 4     <title>canvas的演示</title>
 5     <script src="D:jqueryjquery-1.12.4.min.js""></script>
 6 </head>
 7 <body>
 8     <canvas id="tt" width="400" height="400" onmousemove="mousexy(event)">不支持H5</canvas>
 9         
10     <script type="text/javascript">
11         var c=document.getElementById("tt");
12         var tt=c.getContext("2d");
13         //yi
14         tt.fillStyle="red";
15         tt.fillRect(0,0,200,200);
16         //er
17         tt.fillStyle="rgba(0,0,255,0.5)";
18         tt.fillRect(100,100,300,300)
19     </script>
20 </body>
21 </html>

4.运行结果

5.画线

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=UTF-8> 
 4     <title>canvas的演示</title>
 5     <script src="D:jqueryjquery-1.12.4.min.js""></script>
 6 </head>
 7 <body>
 8     <canvas id="tt" width="300" height="300" onmousemove="mousexy(event)">不支持H5</canvas>
 9     
10     <script type="text/javascript">
11         var c=document.getElementById("tt");
12         var tt=c.getContext("2d");
13         
14         //line
15         tt.moveTo(30,30);
16         tt.lineTo(80,290);
17         tt.lineTo(130,10);
18         tt.stroke();
19         
20     </script>
21 </body>
22 </html>

6.运行结果

7.画圆

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8> 
 4     <title>canvas的演示</title>
 5     <script src="D:jqueryjquery-1.12.4.min.js""></script>
 6 </head>
 7 <body>
 8     <canvas id="tt" width="300" height="300">不支持H5</canvas>
 9     
10     <script type="text/javascript">
11         var c=document.getElementById("tt");
12         var tt=c.getContext("2d");
13         
14         tt.fillStyle="blue";
15         tt.beginPath();
16         tt.arc(100,100,50,0,Math.PI*2,true);
17         tt.closePath();
18         tt.fill();
19     </script>
20 </body>
21 </html>

8.运行结果

9.渐近色

 1 <!DOCTYPE html> 
 2 <head>
 3     <meta charset=UTF-8> 
 4     <title>canvas的演示</title>
 5     <script src="D:jqueryjquery-1.12.4.min.js""></script>
 6 </head>
 7 <body>
 8     <canvas id="tt" width="400" height="400">不支持H5</canvas>
 9     
10     <script type="text/javascript">
11         var c=document.getElementById("tt");
12         var tt=c.getContext("2d");
13         
14         //
15         var change=tt.createLinearGradient(100,100,200,50);
16         change.addColorStop(0,"yellow");
17         change.addColorStop(1,"blue");
18         tt.fillStyle=change;
19         tt.fillRect(100,100,200,50);
20                 
21     </script>
22 </body>
23 </html>

10.运行效果

11.图形载入

　　目前在谷歌浏览器上不可以展示，图中使用的是I浏览器

 1 <!DOCTYPE html> 
 2 <head>
 3     <meta charset=UTF-8> 
 4     <title>canvas的演示</title>
 5     <script src="D:jqueryjquery-1.12.4.min.js""></script>
 6 </head>
 7 <body>
 8     <canvas id="tt" width="400" height="400">不支持H5</canvas>
 9     
10     <script type="text/javascript">
11         var c=document.getElementById("tt");
12         var tt=c.getContext("2d");
13         
14         //
15         var img=new Image();
16         img.src="logo.png";
17         tt.drawImage(img,100,100);
18 
19     </script>
20 </body>
21 </html>

12.运行效果

相关阅读:
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result
smarty {for}{forelse}
整理了一份比较全面的PHP开发编码规范.
安装SQL server 提示重新启动计算机失败
 使用自定义《UIActivity》进行内容分享－b
五子棋－b
iOS面试题16719－b
iOS 图片填充 UIImageView
将UIImage保存到iOS照片库和对应程序沙盒中－b
IOS webview中cookie的读取与保存－b
原文地址：https://www.cnblogs.com/juncaoit/p/7067603.html