单词总结

    stroke    描边,笔画
    rect(rectangular)    矩形        
    canvas    画布        
    gradient    渐变        
    linearGradient    线性渐变
    bevel    斜角
    miter    斜接        
    curve    曲线        
    measure    测量
    quadratic    二次的
    angle    角度
    radius    半径
    radial    径向的，发射状的
    anticlockwise    逆时针
    gravity    重力
    invert    反转
    blur    模糊    
    offset    偏移        
    clip    裁剪

简介

Canvas （画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图

Canvas与SVG的比较

1. Canvas 是一个基于 JavaScript 的绘图 API，而 SVG 使用一个 XML 文档来描述绘图。
2. Canvas不支持事件处理器，SVG支持事件处理器
3. Canvas适合图像密集型的游戏，其中的许多对象会被频繁重绘,SVG最适合带有大型渲染区域的应用程序

Canvas的简单应用

<!--        Canvas对象只有两个属性——    width和height,    id属性并不是<canvas>元素所特有的而是全局属性        -->
<canvas    id="myCanvas"    width="150"    height="150"></canvas>            

<script    type="application/javascript">
        var    canvas    =    document.getElementById("myCanvas");    //获取canvas元素
        var    ctx    =    canvas.getContext("2d");        //getContext方法指定参数2d，表示该canvas对象用于生成2D图案
        ctx.beginPath();    //    开始路径
        ctx.moveTo(20,    20);    //    路径起点，坐标为(20,20)
        ctx.lineTo(200,    20);    //    绘制到(200,20)的线
        ctx.lineWidth    =    1.0;    //    设置线宽
        ctx.strokeStyle    =    "#CC0000";    //    设置线的颜色
        ctx.stroke();    //    对线进行着色，使线可见
}
</script>