本来以为自己熟悉HTML,CSS,JS以及JQ了,结果发现还差太多

  已经自学了大概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度的线-.-。

 
时间: 2024-12-24 14:45:33

本来以为自己熟悉HTML,CSS,JS以及JQ了,结果发现还差太多的相关文章

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

CSS+JS实现的div层定位功能和自动消失

CSS顶部固定功能,有空的时候研究了一下CSS的定位功能,做了这个大家熟悉的顶部固定功能,鼠标移上去顶部会消失,并可判断浏览器是否支持audio元素!顶部元素在时间控制下也可自动消失. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

web服务器/cgi/html/css/js

随着Internet技术的兴起,在嵌入式设备的管理与交互中,基于Web方式的应用成为目前的主流,这种程序结构也就是大家非常熟悉的B/S架构,即在嵌入式设备上运行一个支持脚本或CGI功能的Web服务器,能够生成动态页面,在用户端只需要通过Web浏览器就可以对嵌入式设备进行管理和监控,非常方便实用.本节主要介绍这种应用的开发和移植工作. Web 典型的嵌入式Web服务器有Boa (www.boa.org)和thttpd (http://www.acme.com/software/thttpd/)等,

7. 获取对象的熟悉以及CSS熟悉

HTML: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>attribute</title> <script type="text/javascript" async="" src="http://ajax.google

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件

有网友碰到过这样的问题:如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件,问题详细内容为: 如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件 ? ,我搜你通过互联网收集了相关的一些解决方案,希望对有过相同或者相似问题的网友提供帮助,具体如下: 解决方案1: /.*\.(?:(?!(jpg|css|js|html|htm|png)).)+/ --- 共有 3 条评论 --- 皮总find . -ty

WordPress引入css/js方法总结

WordPress引入css/js方法很多,条件很多.如何全局加载,或仅在某些页面精准加载,什么时候需要先注册脚本再加载,本文希望找到最简单的方式,并给出探索更多方法的途径. 在前台加载css/js 用wp_enqueue_script()函数加载js,用wp_enqueue_style()加载css,加载资源的位置(action)只有一个——wp_enqueue_scripts. 用wp_enqueue_系列函数可以更好的处理脚本样式表的依赖关系,防止重复加载,以twentyfifteen主题

asp.net MVC发布iis无法加载css,js和图片

今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual studio运行的时候就已经不能加载css和js文件,那种情况一般都是路径的问题,改下页面代码就行,网上教程不少,而这个其实是一个CMS的开源系统.Orchard,国庆实在无聊,就想玩下这个asp.net MVC框架的CMS,而且是微软推荐的开源CMS,提到了就来说说这个吧,和国内的其他CMS对比起来

springMvc整合Freemarker引入CSS,JS文件404的问题

在spring webmvcjar包中有个spring.ftl的文件 如下图: 你可以把他拷出来,放到你的目录下,也可以不拷出来,具体的用法就是 在你的freemaker模版开头加上 <#import "spring.ftl" as spring/> 如果你烤出了spring.ftl文件,像找存在感的话,比如拷到 当前项目路径的plugins文件下 那么就加上这个路径就好了<#import "plugins/spring.ftl" as sprin