目录
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;
}
注:如有任何不妥之处,请评论或私信告知,谢谢!