HTML5之Canvas画正方形
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5之Canvas画正方形</title> 6 7 <script type="text/javascript"> 8 function drawFour(id) 9 { 10 //获取canvas元素 11 12 var canvas=document.getElementById("canvas"); 13 if(canvas == null) 14 return false; 15 //获取上下文 16 var context = canvas.getContext('2d'); 17 //设定填充图形的样式 18 context.fillStyle = "#EEEEFF"; 19 //绘制图形 20 context.fillRect(0,0,800,800); 21 context.fillStyle = "yellow"; 22 //设定图形边框的样式 23 context.strokeStyle = "blue"; 24 //指定线宽 25 context.lineWidth = 150; 26 context.fillRect(50,50,500,500); 27 context.strokeRect(50,50,500,500); 28 } 29 </script> 30 </head> 31 <body onLoad="drawFour('canvas')"> 32 33 34 35 <canvas id="canvas" width="1200" height="560" /> 36 37 </body> 38 39 40 </html>
分析说明：
（1）获取Canvas元素
var canvas =
document.getElementById("canvas");
（2）取到上下文
var context = canvas.getContext('2d');
（3）填充绘制边框
context.fillStyle = "#EEEEFF";//填充的样式
（4）设定绘图样式
strokeStyle：图形边框的样式
（5）指定线宽
context.lineWidth = 150;
（6）指定颜色值
（7）绘制正方形
context.fillRect(50,50,500,500);
context.strokeRect(50,50,500,500);
效果图：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~