HTML5之画布

HTML5中的画布是什么？

HTML5 的 canvas 元素（简称画布）是使用 JavaScript 在网页上绘制图像的元素。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 canvas 元素

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

创建 canvas 元素时最好使用行类样式给画布设置宽和高，因为使用css样式指定宽、高 时将整个画布做了拉伸，影响使用效果。而且在canvas 标签对中未有提示文字时，在网页中它将会是一个单标签。

通过JavaScript 来绘制

<script type="text/javascript">
		// 获取canvas  拿到画布
        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 设置颜色

Gradients 渐变

• 1.线性渐变

  // 起始位置截至位置
  var linGrad = context.createLinearGradient(0,450,1000,450);
  // 0-1渐变色的位置分配
  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 个圆的圆心位置x,y,和半径
  var g = ctx.createRadialGradient(260,320,40,200,400,200);
  // 两个圆在同一个位置，但是半径不同   起始圆到结束圆的边渐变
  // var g = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
  // 位置不相同，结束圆大于起始圆
  // var g = ctx.createRadialGradient(50, 50, 20, 100, 100, 100);
  // 结束圆小于起始圆
  // var g = ctx.createRadialGradient(50, 50, 100, 100, 100, 20);
  // 两个圆相离
  // var g = ctx.createRadialGradient(20, 20, 10, 100, 100, 50);
  // 光圈
  //var g = ctx.createRadialGradient(100, 100, 30, 100, 100, 100);
  g.addColorStop(0.0, 'yellow');
  g.addColorStop(0.9, 'orange');
  g.addColorStop(1.0, 'rgba(0,0,0,0)');
  ctx.fillStyle = g;
  ctx.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();
}