zoukankan html css js c++ java

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.运行效果

查看全文

相关阅读:
对图像边缘进行随机均匀采样的C#算法实现
 [淡藤]最近几年在Chinapub上买的书
 重新认识C#: 玩转指针
 又是一年春来到
 需求定律在起着作用
 haha, 愚人节听鱼人歌
 名字就叫奥格工作室！
effective c++ 第六章
 com 名字对象(1)IBindCtx
com 名字对象(2)创建名字对象(IMoniker)

原文地址：https://www.cnblogs.com/juncaoit/p/7067603.html