HTML5画布(基础篇11-10)
1 <script type="text/javascript"> 2 $(function(){ 3 var s = $("#myCanvas")[0]; 4 var canvas = s.getContext("2d"); 5 //画直线 6 canvas.strokeStyle = "#FF0000"; 7 canvas.moveTo(100,100); 8 canvas.lineTo(300,400); 9 canvas.stroke(); 10 canvas.beginPath(); 11 canvas.moveTo(100,100); 12 canvas.lineTo(400,300); 13 canvas.stroke(); 14 //2、画矩形 15 var c = s.getContext("2d"); 16 //填充颜色 17 c.fillStyle="blue"; 18 c.beginPath(); 19 //方式一(填充) 20 c.fillRect(10,10,30,30); 21 c.beginPath(); 22 //方式二(填充) 23 c.rect(300,300,100,100); 24 c.fill(); 25 c.beginPath(); 26 //线条颜色 27 c.strokeStyle="yellow"; 28 c.strokeRect(50,50,30,30); 29 //3、画圆 30 c.beginPath(); 31 //线条宽度 32 c.lineWidth = 3; 33 //线条颜色 34 c.strokeStyle="black"; 35 // 参数: x,y,r,开始弧度,结束弧度,顺逆时针 36 c.arc(200,200,30,0,360*Math.PI/180,false); 37 //空心元 38 c.stroke(); 39 //实心圆 40 c.fill(); 41 //4、html5没有提供画圆角矩形API 但是通过arcTo方法可以实现这个效果 42 c.beginPath(); 43 c.moveTo(200,200); 44 c.lineTo(250,200); 45 c.arcTo(300,200,300,250,30); 46 c.lineTo(300,300); 47 c.stroke(); 48 49 }); 50 </script>
对于画圆角矩形而言:arcTo()的5个参数分别代表 A点的坐标 B的坐标 以及半径
标签:
HTML5
【推荐】100%开源!大型工业跨平台软件C++源码提供,建模,组态!
【推荐】AI 的力量,开发者的翅膀:欢迎使用 AI 原生开发工具 TRAE
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
· InnoDB为什么不用跳表,Redis为什么不用B+树?
· 记一次 C# 平台调用中因非托管 union 类型导致的内存访问越界
· [EF Core]聊聊“复合”属性
· 那些被推迟的 C# 14 特性及其背后的故事
· 我最喜欢的 C# 14 新特性
· 博客园出海记-开篇:扬帆启航
· 微软开源的 MCP 教程「GitHub 热点速览」
· 记一次 .NET 某汽车控制焊接软件 卡死分析
· C#中的多级缓存架构设计与实现深度解析
· 技术人日常避坑手册:高效工作,少踩坑