HTML5之Canvas画布

时间：2023-02-03 07:06:14

先上代码：

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

}

相关文章