使用canvas绘制一个三角形

￡神魔★判官ぃ 2022-12-13 14:26 176阅读 0赞

**绘制一个三角形的例子：**

<template>
      <div class> 
        <canvas id="tutorial2" width="150" height="150"></canvas>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      mounted() { 
        var canvas2 = document.getElementById("tutorial2");
        if (canvas2.getContext) {
          var ctx2 = canvas2.getContext("2d"); // 获得上下文对象（画笔）
          ctx2.beginPath() // 新建一条路径
          ctx2.moveTo(10,10) // 画笔移动到（10,10）
          ctx2.lineTo(10,50) 
          ctx2.lineTo(30,25)
          ctx2.fill() // 通过填充路径的内容区域生成实心的图形。当你调用fill()函数时，所有没有闭合的形状都会自动闭合，
                      // 所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
        }
      }, 
    };
    </script>
    <style lang="less" scoped>
    </style>

效果：

![2020091917432129.png][]

**当将 ctx2.fill()方法改成 ctx2.stroke()时，是通过**线条来绘制图形轮廓。效果如下：

![2020091917564083.png][]

[2020091917432129.png]: /images/20221123/eae0442aaa5843bea1625e24905a7fcd.png
[2020091917564083.png]: /images/20221123/0f156e7d4ef04cfb9cbac7385b72a49f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 webgl学习：绘制一个三角形

近在学习three.js，为了更好的理解threejs，特别来学习一下webgl。webgl是更为底层的方法，但是在某些情况three未提供方法的情况下，便可以使用。 ...

雨点打透心脏的1/2处/ 2024年04月17日 05:51/ 0 赞/ 30 阅读

相关 CSS绘制一个三角形

目录等腰梯形普通三角形（等腰三角形）等边三角形平行四边形 -------------------- 我们先来看这样一个图形，为什么呢？因为绘制梯形、三角形或

墨蓝/ 2023年01月04日 11:49/ 0 赞/ 223 阅读

相关使用canvas绘制笑脸

笑脸示例代码： <template> <div class="div"> <canvas id="tutorial3" width="15

╰半夏微凉°/ 2022年12月13日 14:27/ 0 赞/ 90 阅读

相关使用canvas绘制一个三角形

绘制一个三角形的例子： <template> <div class> <canvas id="tutorial2" width="15

￡神魔★判官ぃ/ 2022年12月13日 14:26/ 0 赞/ 177 阅读

相关 canvas 绘制一个三角形

代码： <template> <div class="div"> <canvas id="tutorial3" width="350"

悠悠/ 2022年12月12日 02:13/ 0 赞/ 170 阅读

相关使用canvas绘制一个圆或者圆弧

[`arc(x, y, radius, startAngle, endAngle, anticlockwise)`][arc_x_ y_ radius_ startAngle_

待我称王封你为后i/ 2022年12月10日 02:25/ 0 赞/ 212 阅读

相关 canvas之二：绘制三角形

我们当然不能满足于能在画布上画那么一条直线，接下来我们就要画一个更高级的一点的东西：三角形！同样，先上图和代码： ![SouthEast][] 源代码： <!DOC

本是古典何须时尚/ 2022年07月24日 06:24/ 0 赞/ 466 阅读

相关使用sass绘制三角形

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 用border生成三角形的@mixin： //

水深无声/ 2022年01月13日 08:09/ 0 赞/ 243 阅读

相关使用CSS3绘制一个实心三角形

效果如下： ![20181126095235664.png][] 实现这一过程其实很简单： 1、先创建一个盒子 <div id="trangle"></d

末蓝、/ 2021年09月17日 02:40/ 0 赞/ 419 阅读

相关 canvas绘制三角形

主要还是利用画直线的方法 lineTo moveTo 实例1 window.onload=function(){ var ca

左手的ㄟ右手/ 2021年07月24日 23:45/ 0 赞/ 498 阅读