HTML5之Canvas画布

先上代码：

<canvas width="1000" height="800">浏览器不支持HTML5！</canvas>

  <script type="text/javascript">
        var canvas = document.querySelector("canvas");
        var context = canvas.getContext(\'2d\');

        // 设置阴影
        context.shadowOffsetX = 5.0;
        context.shadowOffsetY = 5.0;
        context.shadowColor = "rgba(50%,50%,50%,0.75)";
        context.shadowBlur = 10.0;
        
        // 画一个矩形图形
        context.fillStyle = \'red\';
        context.fillRect(2, 2, 300, 200);
        
        // 加边框
        context.strokeRect(0, 0, 304, 204);
        
        // 画一个矩形
        context.fillStyle = \'rgba(255,255,0,0.5)\';
        context.fillRect(250, 150, 300, 200);

        // 清除指定区域
        context.clearRect(350, 200, 100, 100);
    </script>

- Rectangles 绘制矩形对象

- context.fillRect(x,y,w,h) // 绘制矩形
- context.strokeRect(x,y,w,h) // 绘制边框
- context.clearRect(x,y,w,h) // 清除指定区域

- Colors 设置颜色

- 指定颜色（红色）

指定方法 颜色值
-----------------------------
Hexa(十六进制) #FF0000
Hexa(short) #F00
RGB rgb(255,0,0)
RGB(percent) rgb(100%,0%,0%)
RGBA rgb(255,0,0,0.7)
RGBA(percent) rgba(100%,0%,0%,0.7)
HSL hsl(0,100%,50%)
HSLA hsla(0,100%,50%,1.0)
SVG(颜色名字) red

- shadow 阴影

  context.shadowOffsetX = 5.0;
  context.shadowOffsetY = 5.0;
  context.shadowColor = "rgba(50%,50%,50%,0.75)";
  context.shadowBlur = 10.0;

- Gradients 渐变

- 1.线性渐变

 // 起始位置截至位置
  var linGrad = context.createLinearGradient(0,450,1000,450);

  // 渐变中节点
  linGrad.addColorStop(0.0,\'red\');
  linGrad.addColorStop(0.5,\'yellow\');
  linGrad.addColorStop(0.7,\'orange\');
  linGrad.addColorStop(1.0,\'purple\');

  // 应用到图形上
  context.fillStyle = linGrad;
  context.fillRect(0,450,1000,450);

- 2. 中心区域渐变

  // 6组数字，代表 2 个圆
  var radGrad = context.createRadialGradient(260,320,40,200,400,200);

  radGrad.addColorStop(0.0, \'yellow\');
  radGrad.addColorStop(0.9, \'orange\');
  radGrad.addColorStop(1.0, \'rgba(0,0,0,0)\');

  context.fillStyle = radGrad;
  context.fillRect(0, 200, 400, 400);

- Paths 绘制路径线条

- 绘制过程
1.开始绘制 beginPath()
2.定义所有节点
3.用stroke实现绘制

CreateLineA();          // 绘制一个 A 型
CreateQua();            // 绘制一条 抛物线
CreateBez();            // 绘制一条 贝塞尔曲线
CreateArc();            // 绘制一个 自定义曲线
CreateRoundedRect();    // 绘制一个 圆角图形
CreateRect();           // 绘制一个 矩形

// 绘制一个 A 型
function CreateLineA() {
    context.fillStyle = \'red\';
    context.strokeRect(0, 0, 300, 300); // 绘制边框
    // 1. 开始绘制beginPath()
    context.beginPath();

    // 2. 定义所有节点
    context.moveTo(100, 200);   // 将笔移动到该坐标
    context.lineTo(150, 50);     // 绘制到指定坐标
    context.lineTo(200, 200);   // 再接着绘制到另一个坐标

    context.moveTo(100, 120);   // 再将笔移动到别的区域
    context.lineTo(200, 120);   // 再绘制一条线
    

    context.textAlign = \'left\';                 // 设置水平对齐
    context.textBaseline = \'alphabetic\';        // 设置垂直对齐
    context.font = \'bold 16px sans-serif\';      // 设置输出字体样式
    context.fillText(\'(100/200)\', 50, 220);     // 在指定坐标输出文字
    context.fillText(\'(150/50)\', 115, 30);
    context.fillText(\'(200/200)\', 150, 220);
    context.fillText(\'(100/120)\', 40, 100);
    context.fillText(\'(200/120)\', 180, 100);

    // 3. 用stroke实现绘制
    context.stroke();
}

// 绘制一条抛物线
function CreateQua() {
    context.strokeRect(320, 0, 300, 300); // 绘制边框

    context.beginPath();
    context.moveTo(350, 250);
    context.quadraticCurveTo(400, 50, 600, 50);
    context.stroke();
}

// 绘制一条贝塞尔曲线
function CreateBez() {
    context.strokeRect(640, 0, 300, 300); // 绘制边框

    context.beginPath();
    context.moveTo(670, 250);
    context.bezierCurveTo(880, 300, 700, 30, 900, 50);
    context.stroke();
}

// 绘制一个 自定义曲线
function CreateArc() {
    context.strokeRect(0, 320, 300, 300); // 绘制边框
    context.beginPath();
    context.moveTo(20, 430);
    context.arcTo(20, 370, 270, 370, 60);
    context.stroke();
}

//  绘制一个 圆角图形
function CreateRoundedRect() {
    context.strokeRect(320, 320, 300, 300); // 绘制边框

    x = 340;
    y = 370;
    w = 250;
    h = 200;
    r = 60;

    context.beginPath();
    context.moveTo(x, y + r);
    context.arcTo(x, y, x + w, y, r);
    context.arcTo(x + w, y, x + w, y + h, r);
    context.arcTo(x + w, y + h, x, y + h, r);
    context.arcTo(x, y + h, x, y, r);
    context.closePath();    // 闭合曲线
    context.stroke();
}

// 绘制一个矩形对象
function CreateRect() {
    context.strokeRect(640, 320, 300, 300); // 绘制边框

    context.beginPath();
    context.rect(660,340,250,250); 
    context.stroke();
}