canvas之二：绘制三角形

本是古典何须时尚 2022-07-24 06:24 442阅读 0赞

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

![SouthEast][]

源代码：

<!DOCTYPE html>  
<html>  
<head lang="en">  
<meta charset="UTF-8">  
<title></title>  
</head>  
<body>  
<canvas id="canvas" width="1024" height="768" style="border:1px solid \#aaa;display:block;margin:50px auto;"></canvas>  
<script type="text/javascript">  
window.onload = function()\{  
var canvas = document.getElementById("canvas");  
var context = canvas.getContext("2d");  
  
canvas.width = 1024;  
canvas.height = 768;  
  
context.moveTo(100,100);  
context.lineTo(700,700);  
context.lineTo(100,700);  
context.lineTo(100,100);  
  
  
context.fillStyle = "rgb(2,100,30)";  
context.fill();  
  
context.lineWidth = 5;  
context.strokeStyle = "\#005588";  
context.stroke();  
\}  
</script>  
</body>  
</html>

代码详解：

1.我们的三角形的3个角分别在(100,100),(700,700),(100,700),最后我们的画笔还要回到原点(100,100)这样才能完成一个完整三角形的绘制。

2.我们使用context.fill()把整个三角形填充为指定颜色，context.fillStyle = "rgb(2,100,30)"设置填充的颜色。

3.同样，使用context.stroke()把三角形的轮廓绘制出来。

[SouthEast]: /images/20220722/a671a87fac42460bb87e8b382eda3277.png

发表评论取消回复

表情：

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

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

相关阅读

相关 canvas 绘制时钟（二）(2021/5/8)

<canvas id="canvas" width="800" height="600"></canvas> <script> var

叁歲伎倆/ 2023年01月19日 08:12/ 0 赞/ 125 阅读

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

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

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

相关 canvas 绘制一个三角形

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

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

相关 canvas创建三角形

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

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

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 197 阅读

相关 canvas之二：绘制三角形

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

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

相关【OpenGL】绘制三角形

绘制三个点上一节我们已经成功绘制出了一个点，那如何绘制三个点呢？很简单，给 VBO 填充数据时填充三个点的数据 void init() {

淡淡的烟草味﹌/ 2022年06月10日 10:51/ 0 赞/ 166 阅读

相关 css绘制三角形

.triangle-up { width: 0; height: 0; border-left: 50

淩亂°似流年/ 2022年04月12日 12:57/ 0 赞/ 263 阅读

相关 canvas入门学习（二）-简单图形绘制

以下是利用canvas绘制的简单图形：线段，矩形，三角形，五角星，仅供小白参考。 <!DOCTYPE html> <html> <he

一时失言乱红尘/ 2021年09月15日 10:20/ 0 赞/ 370 阅读

相关 canvas绘制三角形

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

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