JavaScript学习——初识+canvas

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