首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尝试绘制2个三角形

绘制两个三角形可以使用各种编程语言和图形库来实现。下面是一个使用HTML5的Canvas元素和JavaScript绘制两个三角形的示例:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
    <title>绘制两个三角形</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        // 获取Canvas元素
        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(250, 250);
        ctx.lineTo(350, 250);
        ctx.lineTo(300, 350);
        ctx.closePath();
        ctx.fillStyle = "blue";
        ctx.fill();
    </script>
</body>
</html>

这个示例使用了HTML5的Canvas元素和JavaScript的绘图API来绘制两个三角形。第一个三角形的顶点坐标分别为(50, 50),(150, 50),(100, 150),填充颜色为红色;第二个三角形的顶点坐标分别为(250, 250),(350, 250),(300, 350),填充颜色为蓝色。

这只是一个简单的示例,实际上,绘制三角形可以有很多种方式,可以根据具体需求选择合适的方法和工具。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【OpenGL】十三、OpenGL 绘制三角形 ( 绘制单个三角形 | 三角形绘制顺序 | 绘制多个三角形 )

文章目录 一、绘制三角形 二、三角形绘制顺序 1、绘制正面 2、三个点逆时针方向排列 3、三个点顺时针方向排列 4、设置点的正面方向 三、绘制多个三角形 四、相关资源 一、绘制三角形 ---- 三角形绘制绘制一个面...★★ glEnd(); // 将后缓冲区绘制到前台 SwapBuffers(dc); 绘制效果 : 二、三角形绘制顺序 ---- 1、绘制正面 讨论下面的绘制顺序时 ,...; 3、三个点顺时针方向排列 如果将第三个点放到中间 , 此时点的排列是顺时针方向 , 绘制三角形时就会绘制失败 , 绘制出来就是一片空白 ; 设置三个点的代码 : // 第 1 个点 : 设置白色..., OpenGL 绘制出来是空白的 ) : OpenGL 绘制效果 : 按照上述顺时针排列点 , 绘制不出三角形 ; 4、设置点的正面方向 上面将三个点按照顺时针排列 , 绘制不出来 ,...---- 绘制多个三角形时 , 在 glBegin 和 glEnd 之间设置多个三角形点即可 , 系统会按照从上到下 , 每 3 个点组成一个三角形 ; 代码示例 : 注意下面的三角形的点是按照顺时针顺序排列的

2.6K00
  • 【OpenGL】十四、OpenGL 绘制三角形 ( 绘制 GL_TRIANGLE_STRIP 三角形 | GL_TRIANGLE_STRIP 三角形绘制分析 )

    文章目录 一、绘制 GL_TRIANGLE_STRIP 三角形 二、GL_TRIANGLE_STRIP 三角形绘制分析 三、相关资源 一、绘制 GL_TRIANGLE_STRIP 三角形 ---- 该模式绘制首先在...glBegin 方法中设置 GL_TRIANGLE_STRIP 参数 , 然后在 glBegin 和 glEnd 之间设置多个点进行三角形绘制 ; 设置了多个点 , 奇数点 与 偶数点 连接顺序不一样...//glBegin(GL_LINE_LOOP); // 绘制前后连接的点组成的线 , 并且收尾相连 // 绘制三角形面 glBegin(GL_TRIANGLE_STRIP);...glEnd(); // 将后缓冲区绘制到前台 SwapBuffers(dc); } 执行结果 : 二、GL_TRIANGLE_STRIP 三角形绘制分析 ----...GL_TRIANGLE_STRIP 三角形绘制分析 : 给代码中的点标上索引号 ; 有 4 个点 , 绘制三角形个数是 4-2=2 个 ; 奇数索引点 1 : 当前点索引是奇数 1 ,

    1.3K00

    1.opengl绘制三角形

    所以,即使在片段着色器中计算出来了一个像素输出的颜色,在渲染多个三角形的时候最后的像素颜色也可能完全不同。...从CPU把数据发送到显卡相对较慢,所以只要可能我们都要尝试尽量一次性发送尽可能多的数据。当数据发送至显卡的内存中后,顶点着色器几乎能立即访问顶点,这是个非常快的过程。...); ////激活Program对象 glBindVertexArray(VAO); glDrawArrays(GL_TRIANGLES, 0, 3); //绘制三角形 someOpenGLFunctionThatDrawsOurTriangle...();// 绘制物体 glBindVertexArray(0); //绘制完成,便解绑,用来绑定下一个要绘制的物体 这里,我们一直再调用glBindVertexArray()绑定和解绑,是为了方便绘制有多个...)、GL_TRIANGLES(每三个顶点组成一个三角形)、 //GL_TRIANGLE_STRIP(共用多个顶点的一个三角形)、GL_TRIANGLE_FAN(共用一个原点为中心的一个三角形)。

    1.2K30

    2.通过QOpenGLWidget绘制三角形

    参考:1.opengl绘制三角形 1.QOpenGLWidget的早先版本 QGLWidget是遗留Qt OpenGL模块的一部分,和其他QGL类一样,应该在新的应用程序中避免使用。...该函数里面主要绘制部件,比如在全屏视频上面显示滑动条 resizeGL ():当窗口尺寸发生变化时被调用,然后会调用paintGL()函数重新绘制一次(并且第一次显示时也会调用resizeGL() )。...然后在paintGL()中,每次当我们要绘制不同的物体时,便调用bind()来绑定对象、绘制完后,解绑对象,如果还要绘制下个物体,那么就取出对应的VAO,绑定它,绘制完物体后,再解绑。...3.三角形示例 ? ? ?...3个定点,样式为三角形 vao.release(); //解绑 program->release(); //解绑 } void myGlWidget::initializeGL

    2.1K10

    WASM + OpenGL + C++ 入门:绘制三角形

    我在尝试用 C++ 写一段 OpenGL 代码,用 Emscripten 编译成 WASM,运行在浏览器。OpenGL 最后会被 WASM 转换为 WebGL 进行渲染。...安装和入门可以看这篇文章: 《wasm 初探,写个 Hello World》 红色三角形 还是老样子,图形渲染的 helloworld:画一个红色三角形。...// 背景色为 #00FFFF glClear(GL_COLOR_BUFFER_BIT); // 清空颜色缓存 glDrawArrays(GL_TRIANGLES, 0, 3); // 绘制三角形...glDeleteBuffers(1, &vbo); } WebGL 代码对照: 《一起学 WebGL:绘制三角形》 执行下面命令进行编译 emcc red_triangle.cpp -std=...c++11 -s WASM=1 -s USE_SDL=2 -O3 -o index.html 效果 更新三角形顶点位置 再尝试通过 JavaScript 给 wasm 通信,更新三角形的顶部的顶点信息然后重新渲染

    84021
    领券