专栏首页Devops专栏Canvas使用fill()填充绘画三角形以及使用closepath()解决缺角问题

Canvas使用fill()填充绘画三角形以及使用closepath()解决缺角问题

路径的绘制的方法

  • 描边 stroke()
  • 填充 fill()

首先绘画三条直线拼接出一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var context = myCanvas.getContext('2d');

            context.moveTo(100,100); // 起点
            context.lineTo(200,100); // 第一条线
            context.lineTo(200,200); // 第二条线
            context.lineTo(100,100); // 第三条线

            /*描边*/
            context.stroke();
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

使用fill()填充颜色

// 填充颜色
context.fill();

浏览器显示如下:

可以看到使用fill()就可以填充颜色。下面再来看一个缺角的闭合问题。

设置每条直线的宽度20px进行描边,出现缺角现象

/*描边*/
context.lineWidth = 20;
context.stroke();

浏览器显示如下:

出现这个的原因跟前面篇章中说到画线的中轴线位置是在刻度位置的问题一样。那么有没有办法解决这个缺角的问题呢?

使用closepath()自动结束路径来绘画最后一条到起点的线,解决缺角的问题

context.closePath(); // 结束路径,自动闭合

浏览器展示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset

    上面绘画了三条平行线设置了末端样式,下面给三条平行线进行打折,使用lineJoin的方式设置拐点的样式。

    Devops海洋的渔夫
  • Canvas 使用createLinearGradient绘制颜色渐变的矩形

    之前我使用遍历的方式绘制了一个线的颜色渐变,这种方式其实不好,本章节来看看使用createLinearGradient方法来设置颜色渐变。

    Devops海洋的渔夫
  • Canvas介绍以及快速入门

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径...

    Devops海洋的渔夫
  • 【怕啥弄啥系列】Canvas - 基础图形绘制

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

    神仙朱
  • ​新预训练模型CodeBERT出世,编程语言和自然语言都不在话下,哈工大、中山大学、MSRA出品

    在这篇名为《CodeBERT: A Pre-Trained Model for Programming and Natural Languages》的论文中,来...

    昱良
  • 转载:python的编码处理(一)

    最近业务中需要用 Python 写一些脚本。尽管脚本的交互只是命令行 + 日志输出,但是为了让界面友好些,我还是决定用中文输出日志信息。 

    黯然销魂掌
  • Rxjava源码解析笔记 | 创建Observable 与 Observer/Subscriber 以及之间订阅实现的源码分析

    接下来是Rxjava的SDK中subscribe()的传入参数 是Observer时候(observable.subscribe(observer);)的源码...

    凌川江雪
  • 教你一招 | Python3新特性(一) :字符串

    从python2转到python3的第一个问题就是字符串的问题,我花了些时间把我能想到的和字符串处理有关的东西都整理如下。 1、Python2的字符串编码 在p...

    CDA数据分析师
  • BASH输出着色显示

    通过将其输出着色,可以使BASH脚本更漂亮。使用ANSI转义序列设置文本属性,例如前景色和背景色。

    用户1679793
  • –[ mpvue ] 微信小程序与Vue的巧妙碰撞

    大象无痕

扫码关注云+社区

领取腾讯云代金券