已经自学了大概3个月了吧,都是零零碎碎的时间学的,前面很多简单的东西一看就懂了,就认为自己写得到,没问题。但昨天尝试仿一个网站的时候遇到太多瓶颈,做无缝轮播图的时候卡住了,结果查了大量的相关资料还是弄得不够完美,我想就是因为基础不劳吧,今天开始每天至少抽出一小时的时间来打好基础,从头看起,再简单的代码也要自己动手敲出来并记录心得,不然等于白学。
元素
要点1:html元素是指开始标签到结束标签的所有代码,包括标签。而元素的内容是开始标签到结束标签之间的内容。<br>是没有内容的空元素,空元素在开始标签就关闭了,不过未来建议写成<br/>两者效果一样。标签拥有属性:<a href="www."></a>。属性总是在开始标签中规定:name=value;比如href=“www.”这是a标签的href属性。<h1 align="center"></h1>;这是h1标签的对齐方式align属性,属性值是center居中对齐。<body bgcolor="yellow"></body>同样背景颜色属性。class,id,style,title属性经常用到,其中title属性是当鼠标移到元素内容上时会显示的信息。<hr/>标签是分割线,别和<br/>换行符搞混。记住:HTML 代码中的所有连续的空行(换行)也被显示为一个空格。文本格式有很多:http://www.w3school.com.cn/html/html_formatting.asp浏览详细。大致有:文本格式化(包含斜体,变大,变小,上标(上移)下移等等)。预格式文本<pre></pre>保留代码样式。删除字下划线等等。
接下来是重点内容: 画布
1.con.fillStyle = "red",con.fillRect(0, 0, 100, 100);con.fillStyle = "rgba(255,0,0,0.2)";定义填充的颜色。(其中0.2是透明度0-1越来越明显,大于1为全显示,小于0为全透明)
同理con.strokeStyle = "blue";定义外框的颜色。一般写在要定义的内容上面才有效比如:
con.fillStyle = "red";
con.strokeStyle = "blue";
con.fillRect(0, 120, 100, 100);
con.strokeRect(120, 120, 100, 100);
con.clearRect(50, 50, 240, 120);是清楚画布的像素,相当于是在画布上画一个空白区域
context.arc(x,y,r,sAngle,eAngle,counterclockwise);画一个弧线,通常用来画圆
例如:con.beginPath();
con.arc(200, 150, 100, 0, Math.PI * 1.5, false);
/*con.closePath();*/
con.fillStyle = ‘rgba(0,255,0,0.25)‘;
con.stroke()
x,y是圆心坐标。r圆的半径单位像素。sAngle和eAngle分别是初始角度和结束角度,右边水平为0°。counterclockwise是顺逆时针,ture为逆时针,false为顺时针。
上面的例子填充的是绿色,但是圆的方法为stroke画线,所以颜色无效,为默认颜色,并且是个没填充的圆,还缺了90度的线-.-。