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

    　　
  • 相关阅读:
    指针和引用的区别
    vs不自动退出控制台程序的办法
    ads出现村田电容电感无法仿真的问题解决（`BJT1' is an instance of an undefined model `BJTM1'）
    解决浏览器跨域的几中方式
    js的事件委托机制
    let和const命令
    JavaScript中闭包的写法和作用详解
    提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
    提升HTML5的性能体验系列之四 使用原生UI
    提升HTML5的性能体验系列之三 流畅下拉刷新和上拉
  • 原文地址：https://www.cnblogs.com/juncaoit/p/7067603.html
Copyright © 2020-2023  润新知