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的漸變色的設置