canvas之二：绘制三角形

最新推荐文章于 2024-04-15 07:51:21 发布

祈晴小义

最新推荐文章于 2024-04-15 07:51:21 发布

阅读量7.4k

点赞数 2

分类专栏： Web前端文章标签：入门教程 canvas 源代码

本文链接：https://blog.youkuaiyun.com/u012124304/article/details/51423598

版权

Web前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API绘制一个填充并描边的三角形，包括设置画布尺寸、移动画笔位置及使用fill和stroke方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

源代码：

<!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>