前端面试题（含题解）|一起学习

最新推荐文章于 2025-12-15 07:24:15 发布

原创最新推荐文章于 2025-12-15 07:24:15 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用HTML5的CanvasAPI绘制三角形和正方形，通过moveTo(),lineTo()和stroke()方法完成图形绘制。同时，文章提到了HTML5新增的表单属性，并展示了通过CSS创建最大正方形的方法，利用padding-bottom实现比例布局。

canvas 如何绘制一个三角形|正方形?

HTML5引入什么新的表单属性？

通过CSS如何实现一个最大的正方形？

canvas 如何绘制一个三角形|正方形?

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。

这两个函数加起来就是画一条直线。

画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y），然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend），这样一条线就画出来了。

每次与前面一个坐标相连。

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

<!DOCTYPE HTML5><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画布</title>
</head> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");//三角形
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(50,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();//正方形
var cxt2=c.getContext("2d");
cxt2.moveTo(60,10);
cxt2.lineTo(100,10);
cxt2.lineTo(100,50);
cxt2.lineTo(60,50);
cxt2.lineTo(60,10);
cxt2.stroke();
</script></body></html>

HTML5引入什么新的表单属性？

datalist datetime output keygen date month week time number range emailurl

通过CSS如何实现一个最大的正方形？

用 padding-bottom 撑开边距

section {
width:100%;
padding-bottom: 100%;
background: #333;
}

注：如有任何不妥之处，请评论或私信告知，谢谢！