如何使用画布在单页中绘制三个三角形？

使用画布在单页中绘制三个三角形可以通过以下步骤实现：

创建一个HTML文件，并在文件中添加一个画布元素：

<canvas id="myCanvas" width="400" height="400"></canvas>

在JavaScript中获取画布元素，并获取其上下文：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

绘制第一个三角形：

ctx.beginPath();
ctx.moveTo(50, 50); // 设置起点
ctx.lineTo(150, 50); // 绘制第一条边
ctx.lineTo(100, 150); // 绘制第二条边
ctx.closePath(); // 封闭路径
ctx.fillStyle = "red"; // 设置填充颜色
ctx.fill(); // 填充三角形

绘制第二个三角形：

ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(300, 50);
ctx.lineTo(250, 150);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();

绘制第三个三角形：

ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(200, 200);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();

完整的HTML文件代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>绘制三角形</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(150, 50);
        ctx.lineTo(100, 150);
        ctx.closePath();
        ctx.fillStyle = "red";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(200, 50);
        ctx.lineTo(300, 50);
        ctx.lineTo(250, 150);
        ctx.closePath();
        ctx.fillStyle = "green";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(100, 200);
        ctx.lineTo(200, 200);
        ctx.lineTo(150, 300);
        ctx.closePath();
        ctx.fillStyle = "blue";
        ctx.fill();
    </script>
</body>
</html>

这样就可以在单页中绘制三个三角形了。

如何使用画布在单页中绘制三个三角形？

javascript、html、css、canvas

</p></html>我在三角形计算器中有一些代码，生成用于绘制三角形的CSS代码。但是我想用画布的方法在三角形中画出不同的形状。如何将CSS中的编程代码更改为canvas？

浏览 8提问于2016-09-06得票数 1

1回答

AngularJS应用程序不同页面上相同的元素id

angularjs、ionic-framework

画布的布局和样式在每一页上完全相同，但是按钮在每个画布上画一个不同的东西，例如在第1页上画一只狗，第2页画一只猫，第3页画一只鸡。正因为如此，我在这三个页面之间使用相同的元素ID，例如'#myCanvas‘作为画布。我有一个叫“抽屉”的Javascript对象，当按下相关的按钮时，它会将相关的东西绘制到“#myCanvas”。在转换到AngularJS时

浏览 4提问于2015-08-01得票数 1

回答已采纳

1回答

当用户在屏幕上移动手指时，在画布上绘制多个矩形

android

我使用下面的代码在用户触摸屏幕时在画布上绘制矩形，其中第一个坐标是用户第一次触摸屏幕的位置，它起作用了。问题:我只能画一个矩形，当我想画第二个矩形时，第一个矩形就消失了(我想画很多个)。第二个问题:如何用同样的方法画三角形和圆？

浏览 0提问于2017-01-12得票数 1

2回答

如何在统一5中绘制二维三角形？

unity3d、2d、draw

我试图使用或 (脚本)绘制2D三角形，但没有成功(我没有看到任何三角形)。我只有相机，画布和面板，我也试着把它应用在空画布的子对象上，我应该如何应用这些脚本？我试过不同的变体。这是画三角形的好方法，还是有更好的方法？另外，我在某个地方读到GL类在iOS和/或Mac上不起作用，是真的吗？

浏览 3提问于2015-03-20得票数 1

回答已采纳

2回答

Java -获取绘制组件的名称

java、events、click、mouse

我有一个Java应用程序，它包含五个按钮：单击这四个按钮中的任意一个将导致在绘图画布上绘制相应的形状。这是用来绘制形状的代码：现在，在画布类中，我有许多鼠标侦听

浏览 3提问于2012-11-20得票数 0

回答已采纳

1回答

自定义子视图-在ExpandableListview中-在滚动条出现后重绘错误/没有重绘

android、android-listview

组项可以在右侧(如在图像上)包含一个橙色三角形。这个三角形是从View派生的，并通过重写的onDraw方法在画布上绘制自己。除两个“例外情况”外，这很好;)。在用户滚动列表并在滚动条消失后，滚动条所在的空间不会被重新绘制(缓存？)正确无误。我在下面的图片上说明了这个问题： (不幸的是，我不允许发布图片.)当然，我做了一些关于自定义视图和列表视图绘制/视图/缓存问题的研究。不幸的是，我没有找到一个匹配的答案。问题：你能想象问题的根源

浏览 3提问于2011-07-12得票数 0

回答已采纳

3回答

如何找到单应性

computer-vision、transform、transformation、homography

我需要找到单应性矩阵，它将2d图像坐标转换为真实世界坐标(2D)。我得到的是一面墙的图像和墙上三个不重叠的三角形。The length of each side of the triangle is 1 meter (在墙上)，我也知道图像中三角形的所有角落位置。如何使用这些三角形信息计算homography矩阵？如果我假设三角形的左下角在墙上是(0,0)，那么我可以在此基础上找到三角形的

浏览 1提问于2016-01-27得票数 1

1回答

来自画布的图像

html5-canvas

我尝试从画布获取数据并设置img元素的src属性。这里的问题是，画布有一个用css设置的背景图像，而不是画布方法。有没有办法或方法来提取背景图像，以便toDataURL方法可以捕捉到它？谢谢

浏览 1提问于2011-07-30得票数 1

回答已采纳

1回答

在Firefox中滚动时，呈现到DIV标记的特定区域

javascript、firefox、webgl

使用覆盖整个视图的画布，我想把一个旋转的三角形画到由div容器标记的区域。我的代码是错的，还是Firefox实现不够快，无法在滚动时将三角形呈现在正确的位置？算法：为渲染三角形分配

浏览 5提问于2012-02-02得票数 0

1回答

Javascript中的CIE (色度/开尔文温度)色域

javascript、css、colors、temperature

如何在Javascript中使用CIE (色度/开尔文温度)色域？但我还需要像这样的整个CIE色域曲线。

浏览 1提问于2015-11-26得票数 0

1回答

“有趣的”Flash/Flex行为:增加绘制10,000个三角形的时间

apache-flex、flash、adobe

这是一个测试程序，用来测量Flash绘制一个三角形10,000次所需的时间。应用程序(下面的代码)每N秒调用一次runTimeTest()，它绘制三角形10,000次。

浏览 6提问于2009-11-02得票数 1

2回答

是否有任何框架可用于使用CSS绘图？

css、jquery、html5、canvas

让我解释一下：所以我第一次搜索"CSS分形“。没有骰子。然后是JS Fractals。jQuery可以一整天从DOM中添加和删除数千个元素。在我看来-考虑到通过纯CSS存在三角形-有可能形成一个很好的绘图机制(2D和3D)，无网格画布。任

浏览 0提问于2012-01-06得票数 4

回答已采纳

1回答

绘制图元时擦除RenderTarget的一部分？

c#、graphics、xna

我正在使用XNA创建一个类似画图的应用程序。我有一个渲染目标，它充当画布。当用户绘制一些东西时，我使用DrawUserPrimitives和三角形条带绘制相应的三角形，以绘制直线和其他曲线。我想在应用程序中实现一个橡皮擦，这样用户就可以从纹理中擦除三角形。我在过去使用过OpenGL，在这里我只使用了一个混合函数，如下所示：glBlendFunc(GL_ZERO,

浏览 0提问于2012-08-29得票数 0

1回答

在WebGL中与超文本标记语言背景混合

html、webgl、alpha、blending

我正在绘制平面颜色和纹理到WebGL画布。我的颜色和纹理有不同的alpha值，我希望它们正确地混合在一起。我想有透明的背景(他们应该是混合与HTML内容，这是在画布)。在WebGL中，我使用gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.enable(但是当我设置一个JPG图案作为背景时，我绘制了黑色三角形(alpha

浏览 1提问于2012-07-17得票数 5

回答已采纳

1回答

Java -拖动绘制的对象

java、events、mouse、draw、drag

我有一个有五个按钮的应用程序：单击前四个按钮中的任何一个都会在绘图画布(即JPanel)上绘制一个形状。现在，绘制的形状存储在一个名为ArrayList的 stored 中。现在，我想让用户点击任何形状并将其拖动到屏幕上。这就是我的项目是如何按照班级组织的： (1)正方形( ii)矩形( iii)圆圈( iv)三角形( v)绘制画布<

浏览 6提问于2012-11-20得票数 1

回答已采纳

1回答

在墨帆布上绘制形状

c#、asp.net、.net、wpf、shapes

我对编码很陌生，我想寻求一些帮助，指导我如何在墨水帆布上画一个可绘制的三角形。我创造了一个按钮。点击按钮，我应该点击墨水画布，并拖动形成三角形。(与在windows和microsoft words中绘制在油漆应用程序上的任何形状相同。)非常感谢你的时间！

浏览 1提问于2014-09-01得票数 0

4回答

如何在Silverlight中绘制箭头

canvas、silverlight

我需要在画布中的控件之间绘制一个箭头。目前我使用的是Line对象，但它无法在线条的末尾绘制三角形。如何构建一个在X1、Y1和X2、Y2之间绘制箭头的自定义控件？

浏览 0提问于2009-10-13得票数 5

回答已采纳

5回答

如何在不旋转整个画布的情况下旋转三角形？

javascript、html、rotation、html5-canvas

我刚开始使用<canvas>，数学很差。我用这个函数在画布上画了一个简单的等边三角形，这个函数借用了别人的代码(别恨我)： context.beginPath*i), PosY + SideLength * Math.sin(a*i));} 该函数将只知道三角形的中心坐标和指向它的方

浏览 0提问于2016-07-07得票数 5

5回答

Qt/C++：高效绘图

c++、qt、graphics、pixel、qpainter

我设计了一个程序，基本上，它将一个几何形状切割成许多小三角形(在“左画布”中)，对这一堆三角形应用一些简单的数学变换，然后以新的配置重新绘制它们。请参阅下面的屏幕截图。 📷 为了绘制这些三角形，我使用了QPainter::drawPolygon。右边的每个三角形对应左边的一个三角形，所以我知道我想用什么颜色来画它。到目前为止，一切都很好。即使我画出比这个更多的三角形(当我<

浏览 69提问于2012-09-28得票数 18

回答已采纳

2回答

如何从另一个类恢复JToggleButton的状态？

java、design-patterns、swing

我试图用Java编写简单的矢量图形编辑器，却被GUI卡住了……我有两个JPanels:第一个是“画布区域”，第二个是按钮。画布区域是一个单例，所以按下按钮后，它会调用单例的方法，并将元素添加到单例的列表中，然后重新绘制区域。但现在，我想要将这些按钮更改为JToggleButtons，并且不知道如何在单击画布后恢复其状态。我应该使用哪种设计模式(因为我有不好的预感，觉得我做错了)？

浏览 1提问于2010-11-01得票数 2

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何使用画布在单页中绘制三个三角形？

相关·内容

如何使用画布在单页中绘制三个三角形？

AngularJS应用程序不同页面上相同的元素id

当用户在屏幕上移动手指时，在画布上绘制多个矩形

如何在统一5中绘制二维三角形？

Java -获取绘制组件的名称

自定义子视图-在ExpandableListview中-在滚动条出现后重绘错误/没有重绘

如何找到单应性

来自画布的图像

在Firefox中滚动时，呈现到DIV标记的特定区域

Javascript中的CIE (色度/开尔文温度)色域

“有趣的”Flash/Flex行为:增加绘制10,000个三角形的时间

是否有任何框架可用于使用CSS绘图？

绘制图元时擦除RenderTarget的一部分？

在WebGL中与超文本标记语言背景混合

Java -拖动绘制的对象

在墨帆布上绘制形状

如何在Silverlight中绘制箭头

如何在不旋转整个画布的情况下旋转三角形？

Qt/C++：高效绘图

如何从另一个类恢复JToggleButton的状态？

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐