开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

创建一个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>

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

相关搜索:如何在画布中绘制三角形使用画布在图像中绘制线条如何使用pdfjs在整个pdf中旋转单页？如何使用箭头键在画布上绘制？如何使用HTML画布在图像顶部进行绘制？如何从异步任务中在画布上绘制？使用Tkinter在画布上绘制、调整大小和移动三角形(Python)如何在Android画布中绘制一个填充三角形？如何使用单个函数在画布上绘制多个图像？JavaScript:如何使用fillRect在画布上绘制多个矩形？如何使用按键代码和clearRect()在画布中修复此圆的绘制使用相同的鼠标输出(同时)在多个HTML画布中绘制如何使用osg api在osgearth上绘制三角形如果用户使用angular在画布上绘制内容，如何将画布数据加载到字符串中？如何使用Javascript在画布上创建和绘制图像数组？如何使用C#在画布上用WPF绘制透明的PNG 使用javascript在HTML5画布中绘制“牛眼”使用循环在c中绘制带编号的三角形。如何在角料表中对单表使用2页分页？如何检测透明区域点击或用户在画布中绘制透明区域？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在编程中发现数学之美——使用python和Processing绘制几何图形

在几何课上，你学的所有东西都是关于空间里的形状和尺寸。一般来说你先学习一维的直线，然后学习二维的圆、正方形或三角形，然后学习三维的物体如立方体和球体。当今时代，利用很多先进的技术和免费的软件可以很容易地创建几何图形，但是要处理和改变你的图形，可能就有点挑战性了。

01

手把手教你写一个经典躲避游戏

因为作者只是个普普通通的页面仔，并不是从属于游戏行业的开发者。平时会写一些小游戏也只是兴趣使然，脑子里经常会蹦出一些小点子。所以很多知识也只是自己摸索拼拼凑凑来的。

02

Python 分形算法__代码里开出来的数学之花

分形几何是几何数学中的一个分支，也称大自然几何学，由著名数学家本华曼德勃罗（法语：BenoitB.Mandelbrot）在 1975 年构思和发展出来的一种新的几何学。

02

什么是WebGL和为什么用Three.js | 《Three.js零基础直通02》

Three.js是一个在浏览器里创造3D内容的 JavaScript库，它让我们能够更加轻松的为网页创建3D体验。

03

OpenGL ES——一个平平无奇的三角形

前言随着VR/AR技术的普及，人机交互的模式将产生新的变革。OpenGL ES作为移动端上的图像渲染框架，将变得越来越重要。在此将学习OpenGL ES作为Q3的主要目标。在10月1日前，希望能有阶段性成果。快速开始判断设备是否支持OpenGL ES fun checkSupported() : Boolean{ var supportsEs2 = false; val activityManager = getSystemService(ACTIVITY_SE

06

图形学入门（二）：光栅化

光栅化（Rasterize）就是将一些矢量形状转换为位图（Raster Image）形式。经过这样的变换后，这些形状才可以在屏幕上进行显示，也可以被打印机打印出来。

05

《前端图形学实战》几何学在前端边界计算中的应用和原理分析

之所以会开设这个专栏, 是为了弥补部分程序员对代数和几何学的短板(当然也是为了巩固我的数学基础), 同时在实用价值上, 代数和几何学在编程界也起到了非常重要的推动作用, 比如我们看到的各种建模软件, 仿真&设计软件, 内部都涉及了很多数学原理, 在Web界, 我们比较熟悉的可视化图表, 在线设计软件Figma, 各式各样的可视化低代码产品, 都或多或少的应用了几何学原理, 所以要先让自己做出高价值的产品, 让自己的编程水平更进一步, 代数和几何学知识是非常有必要的。

02

《前端图形学实战》几何学在前端边界计算中的应用和原理分析

之所以会开设这个专栏, 是为了弥补部分程序员对代数和几何学的短板(当然也是为了巩固我的数学基础), 同时在实用价值上, 代数和几何学在编程界也起到了非常重要的推动作用, 比如我们看到的各种建模软件, 仿真&设计软件, 内部都涉及了很多数学原理, 在Web界, 我们比较熟悉的可视化图表, 在线设计软件Figma, 各式各样的可视化低代码产品, 都或多或少的应用了几何学原理, 所以要先让自己做出高价值的产品, 让自己的编程水平更进一步, 代数和几何学知识是非常有必要的。

01

Indesing圆形怎么转换成三角形? ID转换形状的使用方法

Indesing中绘制好的圆形想要转为三角形形状，该怎么转换呢？下面我们就来看看详细的教程。

04

OpenGL ES——导入.stl格式的3D模型

前言在上一章中，我们使用OpenGL ES绘制了一个平平无奇的三角形。那么如何绘制3D模型呢？其实，在计算机的世界中，所有的3D模型都是由无数的三角平面拼接而成。通常我们使用.stl格式来记录

04

WebGL 概念和基础入门

本文首发于政采云前端团队博客：WebGL 概念和基础入门 https://www.zoo.team/article/webglabout

03

Python面试算法：绘制谢尔宾斯基三角形

以上就是一个6级的谢尔宾斯基三角形。也就是三角形有6个尺寸，最大的是最外面的一个三角形，最大。再下一个级别的就是里面的4个三角形（中间的是粉色的）。如下图就是左下角的三角形。这是第2级（级别越大尺寸越小）。

02

Fabric.js 清空画布，甚至连画布元素也给你干掉😏

上面的代码可以把清空画布，但如果没有了解过 canvas ，或者不熟悉的工友，看到上面的代码可能会有点懵。

02

OpengL ES _ 入门_02

学习是一件开心的额事情学习目标理解OpenGL的顶点和几种绘制方法用多种方式绘制立方体顶点是啥? 顶点就是坐标位置，不管你是画直线,三角形，正方体，球体，以及3D游戏人物等，都需要顶点来

01

3D 可视化入门：渲染管线原理与实践

玩 3D 游戏的时候，有没有想过这些 3D 物体是怎么渲染出来的？其中的动画是怎么做的？为什么会出现穿模、阴影不对、镜子照不出主角的情况？要想解答这些问题，就要了解实时渲染。其中最基础的，就是渲染管线。

02

几个简单的小例子手把手带你入门webgl

各位同学们大家好，又到了周末写文章的时间，之前群里有粉丝提问，就是shader不是很理解。然后今天他就来了，废话不多说，读完今天的这篇文章你可以学到以下几点：

02

Android 自定义View小实例-实现绘制打折标签

许多商城APP都会有商品打折的需求，而为文字添加下划线直接设置style就可以完成，我们在这里说的如下图，也就是我们demo实现的效果图。

06

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

我在尝试用 C++ 写一段 OpenGL 代码，用 Emscripten 编译成 WASM，运行在浏览器。OpenGL 最后会被 WASM 转换为 WebGL 进行渲染。

02

【OpenGL】十五、OpenGL 绘制三角形 ( 绘制 GL_TRIANGLE_FAN 三角形扇 )

GitHub 地址 : https://github.com/han1202012/OpenGL ( GitHub 源码始终都会随着后续博客的进度更新覆盖 , 可能没有本博客的相关源码 , 推荐下载博客源码快照 ) ;

00

WebGL 纹理颜色原理

01

分享一些有趣的前端图形和页面

可以看到边框是由上下左右4个部分组成的，如果将div1的宽高设置为0，就变成如下效果：

03

【OpenGL】二十、OpenGL 矩阵变换 ( 矩阵缩放变换 | 矩阵旋转变换 | 矩阵平移变换 )

OpenGL 三角形绘制相关参考【OpenGL】十三、OpenGL 绘制三角形 ( 绘制单个三角形 | 三角形绘制顺序 | 绘制多个三角形 ) 博客 ;

00

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

三角形绘制即绘制一个面 , 三个点可以唯一确定一个面 , 四个点及多个点组成的多边形 , 不一定是一个面 ;

00

手 Q 人脸识别动画实现详解

该文介绍了如何通过自定义View和动画实现圆形进度条的绘制，主要利用了Canvas、Path、Paint等类进行实现。同时介绍了如何实现圆形进度条在Canvas上的动画展示，包括自定义动画、ObjectAnimator、属性动画等。同时，还介绍了如何实现圆形进度条和圆形图片的切换，主要利用了自定义属性动画和ObjectAnimator进行实现。该文还介绍了如何实现圆形进度条的长度调节和点击调节，主要利用了自定义调节器和动画监听器进行实现。最后，该文介绍了如何将圆形进度条应用到圆形图片的展示上，主要利用了自定义圆形图片控件和圆形进度条组件进行实现。

04

几何绘图软件尝鲜：让你的学生真正告别三角板量角器尺规作图

今天尝试的软件GeoGebra，是自由且跨平台的动态数学软件，可覆盖数学学习的各个阶段，包含了几何、代数、表格、图形、统计和微积分，非常便于使用。

02

条码软件中绘制图形并填充

专业的条码软件都有图形绘制工具，可以在标签上添加各种图形，比如：三角形、矩形、圆角矩形、圆形、菱形、五角星等。这些图形可以使标签设计更加美观。下面就给大家详细介绍这些图形的绘制和填充。

03

OpenGL 优化项之面剔除和注意点

那么对于 OpenGL 来说，那看不到的另外三个面完全可以不用绘制它，从而提高绘制的性能。

05

blend

看着各位大虾出系列文章貌似挺好玩的，本人耍了2个月的Wpf，有点见解，希望各位看官笑纳。本系列第一章就先来点简单又有用的吧o(∩_∩)o 哈哈..

02

Android仿网易云鲸云音效效果

最近网易云音乐出了一个叫鲸云音效东西，效果怎么样不是很清楚，但是播放界面还带了动效，这个就比较炫酷了，感觉比较有意思，所以也想自己做一个，其中一个我觉得比较好看的效果如下（动图的来源也比较有意思，后面会讲）

02

【十天自制软渲染器】DAY 03：画一个三角形（向量叉乘算法 & 重心坐标算法）

本文主要讲解三角形绘制算法的推导和思路（只涉及到一点点的向量知识），最后会给出代码实现，大家放心的看下去就好。

03

WebGL 单通道wireframe渲染

如果要把一个对象的线框绘制出来，一般的方法是先绘制实体对象，然后通过gl.LINES的模式再绘制一遍模型，此时模型的线框就会被绘制出来。

02

基于图像的单目三维网格重建

代码地址：https://github.com/ShichenLiu/SoftRas

01

OpenGL ES学习001---绘制三角形

PS：OpenGL ES是什么？ OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL三维图形 API 的子集，针对手机、PDA和游戏主机等嵌入式设备而设计。该API由Khronos集团定义推广，Khronos是一个图形软硬件行业协会，该协会主要关注图形和多媒体方面的开放标准。OpenGL ES 是从 OpenGL 裁剪的定制而来的，去除了glBegin/glEnd，四边形（GL_QUADS）、多边形（GL_POLYGONS）等复杂图元等许多非绝对必要的特性。经过

OpenGL 学习系列---基本形状的绘制

在之前的一篇博客中，讲述了 OpenGL 基础绘制流程及相关的代码，其中关于 OpenGL 程序编译部分都是可以在其他项目中接着复用的，接下来会讲到如何去绘制其他的基本图元。

04

玩转Processing生成艺术不可不知的几个创作手法

但仅仅用这些武器弹药，还不够，仅仅能够在画布上打出这些基本图元，威力还不够大，我们需要再使用一些装备增强我们的战斗力，这样我们才能在画布上打出艺术感的画面。

04

用Python中的tkinter模块作图（续）

八、显示文字用create_text在画布上写字。这个函数只需要两个坐标（文字x和y的位置），还有一个具名参数来接受要显示的文字。例如： >>> from tkinter import* >>> t

07

写给 python 程序员的 OpenGL 教程

OpenGL 是 Open Graphics Library 的简写，意为“开放式图形库”，是用于渲染 2D、3D 矢量图形的跨语言、跨平台的应用程序编程接口（API）。OpenGL 不是一个独立的平台，因此，它需要借助于一种编程语言才能被使用。C / C++ / python / java 都可以很好支持 OpengGL，我当然习惯性选择 python 语言。

03

canvas学习总结三：绘制路径-线段

版权声明：本文为原创文章发布于公众号：Modeng , 你可以随意转载但请务必注明出处！！！ https://blog.csdn.net/qq_32135281/article/details/73456669

01

【GAMES101】Lecture 07 深度缓冲 Z-Buffer

对于一个三角形的光栅化我们之前已经解决了，也就是说现在我们可以将一个三角形给绘制在屏幕上了，但是对于多个三角形，也就是多个图形来说应该如何来决定这个绘制的顺序问题

01

Fabric.js 摆正元素的4种方法（带过渡动画）

我不知道 straighten 使用 “摆正” 这个词来翻译正不正确，反正我就是要这么叫！

03

网页|HTML5 也可以画一画（canvas）

在日常生活中总喜欢涂涂画画写写，这样可以使表达更加直观，记录的也更加详细，而在HTML5中同样可以画一画。canvas意为画布，现实生活中用它来作画，在HTML5中的canvas与之类似，可以称它为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。

02

如何用 canvas 画出分形图

分形是一门以非规则几何形态为研究对象的几何学，由曼德勃罗（B.B.Mandelbrot）等人创立并命名。

02

万字长文详解如何用Python玩转OpenGL | CSDN 博文精选

【编者按】OpenGL（开放式图形库），用于渲染 2D、3D 矢量图形的跨语言、跨平台的应用程序编程接口，C、C++、Python、Java等语言都能支持 OpenGL。本文作者以 Python 语法为例，用两万字详解 OpenGL 的理论知识、用法与实际操作，干货满满，一起来看看吧。

02

硬核万字长文：我是如何把Skia的体积“缩小”到1/8的？

作者 | 陈国栋随着移动互联网的一路高歌，越来越多的 App 不满足系统原生的 UI 体系。开启了各种花式的玩法。早几年 ReactNative、Weex 等，企图尝试让系统组件可以像浏览器一样动态加载，从而提高发版本的效率。更早几年还有一众通过在系统 Webview 基础上面搭建起来的动态化方案，包括当下诸多的小程序平台等。Flutter 的发布仿佛给业界带来一丝新的生机，通过 Skia 渲染器完美的保证了在诸多平台渲染的一致性。但也带来专属于 Flutter 本身的一些问题。不过多的讨论关于 Flut

01

图元装配和光栅化

图元可以用 glDrawArrays、glDrawElements、glDrawRangeElements、glDrawArraysInstanced、glDrawElementsInstanced 命令绘制的几何形状对象。

02

【WebGL】初探WebGL,我了解到这些

WebGL基于OpenGL ES（嵌入式系统）一种广泛用于在各种平台上渲染2D和3D图形的标准。它允许开发人员使用JavaScript与用户设备的GPU（图形处理单元）交互，实现硬件加速渲染。

02

已知等边三角形两点坐标，计算第三点坐标

事实上平面中只要确定两个点的坐标，只要这两个点的坐标不重合就能够绘制出等边三角形，并且不仅仅能够绘制出一个而是两个等边三角形。绘制出来的两个等边三角形就好比如菱形一样。

03

Unity Mesh基础系列（一）生成网格（程序生成）

本教程假设你已经熟悉Unity Scripting的基本知识了。如果不清楚的可以看时钟的章节学习Unity的基础知识。而构建分形的章节里也提供了协程的基本介绍。

04

Note of Python Turtl

Turtle 库函数是 Python语言中一个流行的绘图函数库。Turtle 意思是海龟，在Python中显示为一个小箭头，通过它的移动而留下美妙的曲线~~~

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭