canvas创建三角形

谁借莪１个温暖的怀抱￠ 2022-11-13 00:50 181阅读 0赞

![在这里插入图片描述][20210324190213577.png]

var bg = document.getElementById('canvas1');
    var ctx = bg.getContext('2d');
    //填充三角形（等边）
    ctx.beginPath();
    var height = 200*Math.sin(Math.PI/3);//计算等边三角形的高
    ctx.moveTo(100,0); //从A（100,0）开始
    ctx.lineTo(0,height);//从A(100,0)开始，画到B (0,173)结束
    ctx.lineTo(200,height); //B(0,173)-C(200,173)
    //ctx.fillStyle='#00ff00';//以纯色绿色填充
    var grd = ctx.createLinearGradient(0,0,200,0);//使用渐变颜色填充,从(0,0)到(200,0) （左到右）
    grd.addColorStop(0,"#4CE8B2"); //起始颜色
    grd.addColorStop(1,"#EFD458"); //终点颜色
    ctx.fillStyle=grd; //以上面定义的渐变填充
    ctx.fill(); //闭合形状并且以填充方式绘制出来

![在这里插入图片描述][20210324190542532.png]

<canvas id="canvas1"></canvas>
    <script type="text/javascript">
    function hT(id,x1, y1, x2, y2, x3, y3, color, type){ 
      var canvas = document.getElementById(id);
      var ctx = canvas.getContext("2d");
       ctx.beginPath();
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.lineTo(x3, y3);
       ctx[type + 'Style'] = color;
       ctx.closePath();
       ctx[type]();
    }
    //hT("canvas1",77,3,4,132,151,133, "red", "stroke") // 空心
    hT("canvas1",77,3,4,132,151,133, "red", "fill") //实心
    </script>

[20210324190213577.png]: /images/20221022/ea419f5199d74a81ba12202a05e7ab31.png
[20210324190542532.png]: /images/20221022/45445e1af4b245e6934bde1ee1ae2193.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 canvas 绘制一个三角形

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

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

相关 canvas创建三角形

![在这里插入图片描述][20210324190213577.png] var bg = document.getElementById('canvas1');

谁借莪１个温暖的怀抱￠/ 2022年11月13日 00:50/ 0 赞/ 182 阅读

相关使用threejs和canvas创建中文文字精灵

在 `threejs` 和 `jquery` 的支持下，可以在三维空间里创建文字精灵，精灵模型始终面向用户，支持中文。参考代码如下： // 创建文字精灵 va

╰+攻爆jí腚メ/ 2022年10月11日 12:21/ 0 赞/ 165 阅读

相关如何使用 JavaScript 和 Canvas 创建星形图案

![c2fcb7f4bb409d3a8d7f6be5657b2cc8.png][] 英文 | https://javascript.plainenglish.io/ho

淩亂°似流年/ 2022年09月13日 13:25/ 0 赞/ 142 阅读

相关 HTML5中canvas画图之根据触摸点画三角形

上一篇博文中说了利用canvas画固定的三角形，现在来试下触摸屏幕，然后根据触摸点画三角形。每触摸一下屏幕就画一个点。刚刚我醉死了，绘制路径的时候竟然把后面的lineTo写成了

谁借莪１个温暖的怀抱￠/ 2022年08月23日 05:50/ 0 赞/ 190 阅读

相关课上作业：创建一个三角形类

修改后的程序如下： //扩展程序：创建一个三角形类 //修改create\_object函数，使得程序支持三角形的创建 //和求面积、打印等操作 \inc

左手的ㄟ右手/ 2022年08月05日 00:47/ 0 赞/ 172 阅读

相关三角形

![20160406155010732][] 博客首发，重在体验 include<stdio.h> int main() { double

爱被打了一巴掌/ 2022年07月26日 04:07/ 0 赞/ 178 阅读

相关 canvas之二：绘制三角形

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

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

相关 canvas绘制三角形

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

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