前端 canvas踩坑，关于绘制图形斜边更粗的乌龙

最新推荐文章于 2024-05-11 06:59:08 发布
最新推荐文章于 2024-05-11 06:59:08 发布
阅读量426 收藏
点赞数
分类专栏： 实战踩坑 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44252316/article/details/106807103
版权
本文记录了一次在使用canvas绘制图形时遇到的斜边线条显得更粗的陷阱。作者通过实践发现，当顶点接近画布边界且线条有一定粗度时，线条超出画布的部分会使斜边看起来比其他边更粗。解决方案是避免将顶点设置在画布端点，预留一些空间以防止线条超出。
摘要由CSDN通过智能技术生成

之前一直不太有写博客的习惯，一般写到自己的文档笔记里方便查看，今天开始就慢慢倒着把踩的坑解决的问题搬过来记录一下
最近在实习，不得不说参与实战真的能让自己对技术的理解深很多，之前听课一知半解听了就忘的东西现在都慢慢熟练使用了

最近用canvas做了个预览图生成，可以根据我输入的点来绘制一些基础的图形，但今天自己测试的时候发现一个问题，这个三角形的最后一条斜边路径怎么比别的边粗？

在这里插入图片描述
而正方形又很正常
在这里插入图片描述
我不信邪的再试了几个，发现只要是斜边就很粗，搜了半天也没搜出来相关的问题
在这里插入图片描述
在这里插入图片描述

最后多试了几个后，发现不是bug，是我的画布大小问题
我的画布大小定的200*200 ，而线条还有一定的粗细，当我顶点定（0，0）（200，200）这些端点的时候，线条因为比较粗，粗的部分会出框，造成这些斜线比直线粗的

最低0.47元/天 解锁文章
我们会有猫的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Canvas—描边与填充
Meskjei的博客
07-03 3028
文章目录描边strokestrokeStylestrokeRect填充fillfillRectfillStyle 描边 stroke Canvas中常用的stroke方法就是描边方法，它用以描绘轮廓。 const myCanvas = document.getElementById('myCanvas'); const ctx = myCanvas.getContext('2d'); ctx.mo...
canvas绘制图形——直线、多边形、七巧板
TalonZhang的博客
09-28 1110
前言 canvas 是 html5 中的一个新元素，主要用于图形的绘制，通过 JavaScript 来控制。<canvas> 标签定义一个图形容器，也可以叫做画布，通过 js 脚本可以绘制出各种各样的图像。 创建canvas 创建 canvas 只需要添加 canvas 标签就可以了，在创建时，除 id 外一般还会定制画布尺寸（width height）。定义画布尺寸不建议使用 css...
使用HTML的canvas，给表格画斜线
dre的博客
08-13 1万+
使用HTML的canvas，给表格中画斜线 给表格加斜线 table,td{ border:2px solid black; border-collapse:collapse; } #header{ width:80px; height:40px; } function line(header,line_width,line_color,line_number
最全鸿蒙HarmonyOS实战-ArkUI组件（Canvas）_鸿蒙 canvas(3)，HarmonyOS鸿蒙开发中常见的一些问题面试专题
最新发布
2401_84851371的博客
05-11 992
build() {//可以在这里绘制内容//将离屏绘值渲染的图像在普通画布上显示})在Canvas上加载Lottie动画时，需要先按照如下方式下载Lottie，具体使用：https://ohpm.openharmony.cn/#/cn/detail/@ohos/lottie。
canvas绘制直线、折线、矩形与多边形
热门推荐
zhang_cherry的博客
01-09 1万+
1、canvas的width和height属性与style中的width和height的区别 canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。 特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。 <canvas id="canvas" width="200px" height="200px" style="border: #138
HTML5 Canvas绘制的红色倾斜线条划过动画js特效
ICode联盟
12-05 170
下载地址 一款很酷的网页背景，HTML5 Canvas绘制的红色倾斜线条划过动画特效 dd:
html5 canvas涂鸦画板绘制图形效果
09-08
Canvas API提供了多种方法用于绘制和操作图形，如`fillRect()`（填充矩形）、`strokeRect()`（描边矩形）、`beginPath()`（开始新的路径）、`moveTo()`（移动到某点）、`lineTo()`（绘制线到某点）、`arc()`（绘制...
vue+canvas绘制图形
01-09
总之，"vue+canvas绘制图形"项目展示了如何利用Vue的组件化思想和Canvas的绘图能力，创建出具有动态效果和用户交互的前端应用。通过学习和实践这种方式，开发者可以提高自己的前端技能，为网页带来更丰富的视觉体验...
HTML5 canvas自由绘制图形工具特效代码
03-20
HTML5的canvas元素是网页开发中的一个强大工具，它提供了在网页上动态绘制图形的能力。这个"HTML5 canvas自由绘制图形工具特效代码"是利用canvas元素实现的一个交互式画板应用，用户可以自由地在画板上绘制各种形状...
html5 canvas绘制几何图形动画特效
11-08
它提供了`<canvas>`标签，该标签在页面上创建一个矩形区域，然后可以通过JavaScript的Canvas API在这个区域内绘制各种图形。 2. **绘图上下文** 在`<canvas>`元素中，我们首先获取绘图上下文（`2D Rendering ...
JavaScript实现使用Canvas绘制图形的基本教程
10-21
本篇文章主要介绍了JavaScript实现使用Canvas绘制图形的基本教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
HTML5绘制斜线
05-26
用canvas简单绘制了一个斜线，实现比较简单，但是希望对学习有所帮助
canvas绘制直线，斜线
qq_21277357的博客
01-01 388
【代码】canvas绘制直线，斜线。
html5dw斜线,HTML5 Canvas绘图
weixin_32413177的博客
06-03 662
1.画布基本知识基础画图：cxt.fillRect画出一个矩形js:function pageLoad(){var cnv=document.getElementById("cnvMain");var cxt=cnv.getContext("2d");cxt.fillStyle="#ccc";cxt.fillRect(30,30,80,80);}以上代码实现在页面加载之后画出一个80*80的...
canvas绘图
疏狂吧
11-04 1113
引入：canvas标签 &amp;amp;amp;amp;amp;lt;canvas width=&amp;amp;amp;amp;quot;500px&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;500px&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;/canvas&amp;a
canvas+javaScript+html——绘制矩形、斜线、圆、字体、渐变
十二tel
06-14 1707
通过canvas画布绘制如下图形：效果如图：代码如下：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas&lt;/title&gt; &lt;script type="te
HTML 画斜线（非HTML5 Canvas）
anxin591025的专栏
09-04 6121
首先你要在见面的开头标签中加入对象： xmlns:v="urn:schemas-microsoft-com:vml"。大家一看便知晓，是一个microsoft组件标签。 　　其次我们要重定义一个样式：v\:*   { BEHAVIOR:   url(#default#VML); color: #FF0000; }    最后我们利用中的form,to属性来操作折线的起使和结束的位置，如：
html5 斜边,html5 之 Canvas
weixin_39779467的博客
06-27 212
canvas 基本概念1.canvas只是一个容器(画布)，我们可以规定他的大小当浏览器不支持canvas, 这里才会显示。2.canvas必须使用脚本来绘画// 首先，找到canvasvar c = document.getElementById('myCanvas')// 然后，创建 context 对象(getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形...
html5之canvas绘制图形的简单使用
winson的专栏
09-11 3358
本篇简单介绍一下h5新增元素canvas的使用。 1、canvas绘制矩形 canvas绘制矩形 body { margin: 0; padding: 0; } js: /** * Created by winson on 2016/9/11.
HTML5Canvas基础教程：绘制图形与文本
基础教程教程.pdf”是一份针对初学者的HTML5 Canvas教程，涵盖图形绘制API和代码示例，旨在教授如何利用Canvas进行基本的绘图操作，如画线、路径、图形、渐变、模式、图像和文本处理。教程适合对JavaScript有一定...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值