前端面试题(含题解)|一起学习

目录

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;
}

注:如有任何不妥之处,请评论或私信告知,谢谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@小默同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值