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

一:

1.鼠标监视坐标值

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

2.运行结果

3.画矩形

  两种方式:

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

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

4.运行结果  

5.画线

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

6.运行结果  

7.画圆

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

8.运行结果  

9.渐近色

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

10.运行效果  

11.图形载入

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

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

12.运行效果  

 

  

posted @   每天进步多一点  阅读(668)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示