用Canvas绘制2D平面近大远小的马路斑马线

用Canvas绘制2D平面近大远小的马路斑马线

设置canvas和上下文:

首先,你需要创建一个元素,并获取其2D渲染上下文。

绘制斑马线:

使用fillRect或strokeRect方法绘制斑马线。你可以通过循环和计算来绘制多条具有不同宽度和间隔的斑马线。

添加道路背景(可选):

为了增加效果,你还可以绘制一个道路背景,比如灰色或沥青色。

代码

HTML

html 复制代码
<canvas id="myCanvas" width="1960" height="1080"></canvas> 

JavaScript

javascript 复制代码
const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  
// 定义马路人行道和斑马线属性变量  
const sidewalkLength = 800; // 30米,按100像素/米计算  
const sidewalkWidth = 1000; // 人行道宽度  
const sidewalkColor = '#808080'; // 人行道颜色
const banmaWidth = 20;
const banmaLength = 300;
const banmaGap = 15;
// 绘制马路
ctx.fillStyle = sidewalkColor;  
ctx.fillRect(0, 0, sidewalkLength, sidewalkWidth);
ctx.save();
// 绘制人行道 
ctx.translate(350, 0);
ctx.rotate(Math.PI/2);
ctx.fillStyle = 'white';
for (let i = 0; i * banmaWidth < sidewalkLength; i ++) {
  ctx.fillRect((banmaWidth + banmaWidth + i * 2 ) * i, -i * 2.5, banmaWidth + i * 2, banmaLength + i * 5);
}
ctx.restore();
ctx.font = "15px serif";
ctx.strokeText("模拟近大远小的斑马线", 450, 300);

效果

相关推荐
无双_Joney17 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥18 分钟前
前端必学的 CSS Grid 布局体系
前端·css
EMT19 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare20 分钟前
选择文件夹路径
前端
艾小码20 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月21 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁25 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅25 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸26 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端