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

本文转载自查看原文 2017-06-22 22:38 3170 HTML5

一：

1.鼠标监视坐标值

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=UTF-8> 
 4     <title>canvas的演示</title>
 5     <script src="D:\jquery\jquery-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:\jquery\jquery-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:\jquery\jquery-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:\jquery\jquery-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:\jquery\jquery-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:\jquery\jquery-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.运行效果

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 MFC画图（画线、画矩形、画刷画笔的使用） h5 canvas 画图 matlab画矩形和matlab画圆 Swift 渐变色小程序canvas绘制渐变色（简单入门） QML渐变色 CSS实现不规则图形，填充渐变色 wpf之渐变色LinearGradientBrush css 边框渐变色 echarts的渐变色的设置