DOM:标准化对象模型(Document Object Model),简单而言就是它定义了
网页文件结构(representation)。js是一种基于对象的语言,所以在元素的选取时需要知道对应元素处于什么层次。笔者认为可以类比java的类的
继承,要引用子类需要带出他的父类而已。比如window是对应阶梯的顶层,其中包含了document、event、frame、history、location等,而document里面又包含了form、image等层次。所以当需要利用js在网页中显示字符串时,写法如下
window.document.write("对应字符串")
当js代码与对象在同一页时,可以省略window。
document.write("对应字符串")
可以通过对象名.属性="属性值"来设置元素。函数是通过事件(Event)来调用函数。
当网页要实现相对比较复杂的功能时,往往每一个组件都要加入事件控制,但是如果每一次都是在对应组件的地方进行添加写起来比较麻烦,所以这里引入了JS的addEventListener()函数,用来注册事件的处理函数。如果需要组件函数在网页一加载就执行,可以将函数定义在windo的onload事件中。
<script type="text/javascript">
window.onload = function()
{
btn1.addEventListener("click", sum); //btn1是对应组件的id
}
function sum(){
//对应的函数语句
}
</script>
<button id="btn1">求和</button> <!--在这里就可以不用加onClick事件了-->
"+"号用来连接两个字符串
a = "ab" + "cd"; //a="abcd"
如果有数字又有字符串,就会从左到右先算再连接,或全都连接。表达式中只要有字符串最后的结果一定是字符串
var a = 1 + 20 + "abcd"; //a="21abcd"
var b = "abcd" + 1 + 20; //b="abcd120"
借用一个比较形象的说法canvas像一张画布,而画笔则是JS语句。canvas绘图方式为先定义好图形的样式,之后再绘制到绘图区,所以先指定颜色再确定显示区域。
<canvas id="myCanvas"></canvas>
var canvas = document.getElementById('myCanvas'); //首先要获取DOM的canvas元素
if(canvas.getContext){ //要确定浏览器是否支持canvas,避免出错
var ctx = canvas.getContext('2d'); //创建2D的context对象
ctx.fillStyle = "#FF0000"; //canvas绘图方式为先定义好图形的样式,之后再绘制到绘图区,所以先指定颜色再确定显示区域
ctx.fillRect(0, 0, 150, 75); //绘制区域
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(50, 30, 150, 75);
}else{
document.write("不能识别canvas");
}
获取完对应的DOM元素,用其建立2d的context对象。之后的具体绘制用法归纳如下:
beginPath() | 开始新路径(要绘新图形,先用其将原设置丢弃。 否则程序运行到stroke()会将所有图形重绘) |
moveTo(x, y) | 移动起始点到x, y |
lineTo(x, y) | 绘制目前端点到x, y的直线 |
arc(x, y, r, startAngle, endAngle, antiClockwise) | 绘制圆或弧,角度只能使用弧度 |
fillRect(x, y, w, h) | 绘制填满矩形 |
strokeRect(x, y, w, h) | 绘制矩形轮廓 |
closePath() | 关闭路径(个人感觉没什么用) |
Stroke() | 绘制边框 |
Fill() | 填充图形 |
lineWidth | 线条的宽度,单位为px |
lineCap | 线条端点样式,butt(默认),round, square |
简单提一下RGBA只是在原RGB上面再加上透明度(alpha)。透明度取值范围为0.0~1.0的数值,0完全透明,1完全不透明。对于一个码农来讲确定组件的颜色是一件很麻烦的事,所以可以借助其他工具如:ColorPicker(自己配色,预览)和ColorPic(取色)两个工具(本人还未尝试过)。存在线性和圆形渐变色两种,形式差不多只列出线性渐变
//建立渐变
var lgrad = ctx.createLinearGradient(xs, ys, xe, xe);
lgrad.addColorStop(stop, color);
//再应用渐变
ctx.fillStyle = lgrad;
ctx.finllRect(x, y, w, h);