canvas
cancas日常工作遇到的问题以及解决方案
等一杯清茶
一把陈壶,装上二月的新绿。岁月的炉火,烹煮云水涯。日子在茶中,波澜不惊。
展开
-
canvas绘制可缩放的室内地图和路径
最近一直在写canvas绘制室内地图和路径这个功能,大致聊一下这个功能讲了什么。具体是需要用canvas将室内地图绘制出来(这个不难,canvas教程有),并且地图需要能进行放大缩小,同时将地图上的路径进行展示,同样需要能放大缩小。其实不能看出,就是将地图和路径进行同时的放大缩小。我之前的思路是(之前没有要求缩放),创建canvas,然后设置背景(背景就是地图),然后将后端的路径数据展示到前端背景上,具体的实现,之前的博客有说明,可以翻翻看。之后添加一个功能就是要求能将地图和路径能进行缩放,那么再将原创 2021-05-24 14:20:52 · 2116 阅读 · 0 评论 -
canvas根据坐标完成室内地图路线的绘制
canvas根据坐标完成室内地图路线的绘制注释:此版本为低版本,后续会完善,只是提供一个思路html: <canvas id="canvas" width="5083px" height="6579px"></canvas> style: <script> var c=document.getElementById( "canvas"); var ctx=c.getContext( "2d");原创 2021-04-19 10:26:22 · 1468 阅读 · 0 评论 -
canvas总结:绘图表面大小和元素大小
canvas总结:绘图表面大小和元素大小1.默认大小 如果不设置canvas大小,浏览器默认的大小是300*150. 我们可以通过canvas属性设置w、h: <canvas id="canvas" width="600" height="300"></canvas> 也可以通过css设置canvas大小: #canvas { width: 800px; height: 400px; }2.使用原创 2021-04-19 15:33:08 · 938 阅读 · 0 评论 -
为canvas画布动态设置背景图片
为canvas画布动态设置背景图片关键是将canvas和img标签放到同一个盒子里,盒子设置相对位置,并且canvas和img需要设置相同的相对位置<div class="list3"> <canvas id="canvas" width="1276" height="800"></canvas> <img :src=url id="scream" width="1276" height="800"></div><s原创 2021-04-20 14:13:47 · 5777 阅读 · 0 评论 -
在canvas画布中获取鼠标点击的坐标
在canvas画布中获取鼠标点击的坐标思路: 给canvas绑定一个点击事件,结合绑定事件,进行获取坐标 环境: 前端vue,后端django前端: html: <div> <canvas id="canvas" width="" height=""></canvas> </div> js: var c = document.getElementById('canvas')原创 2021-04-26 10:09:40 · 4080 阅读 · 1 评论