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.运行效果
分类:
H5
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题: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模型构建本地知识库+联网搜索详细步骤