zoukankan      html  css  js  c++  java
  • canvas的描述

    // 1、找到DOM节点
    const canvas = document.getElementById('canvas');
    // 2、画笔 --- canvas的上下文对象
    const ctx = canvas.getContext('2d');

    // 3、设置颜色 ---- 调色
    ctx.fillStyle = "red"; // 填充颜色的设置
    ctx.strokeStyle = 'blue'; // 轮廓(边框)颜色的设置

    // 4、线条的设置
    ctx.lineWidth = 10; // 线宽的设置
    ctx.lineCap = 'butt/round/square'; // 线条边缘设置--- 不设置、手机加圆壳、手机加方壳
    ctx.lineJoin = 'miter/bevel/round'; // 线条相交样式--- 尖尖的、平平的、圆圆的

    // 5、绘制矩形 -- 确定区域
    ctx.rect(x, y, w, h);
    // ctx.fillRect(x, y, w, h) 无需单独再上色,确定区域并且直接上色
    // ctx.strokeRect(x, y, w, h)

    // 6、绘制圆弧
    // startAngle endAngle ---- 用的不是角度,用的是弧度
    // bool false--- 顺时针 true----逆时针 默认值为false --- 可选参数
    ctx.arc(x, y, r, startAngle, endAngle[, bool])

    // 7、绘制线段
    ctx.moveTo(x, y); // 从哪里开始画
    ctx.lineTo(x1, y1); // 画到那里去

    // 8、绘制贝塞尔曲线
    ctx.bezierCurveTo(x0, y0, cx0, cy0, x1, y1); // 起始点、控制点、终止点
    ctx.quadraticCurveTo(cx1, cy1, x2, y2); // 控制点、终止点-上一个的终止点作为它的起始点

    // 9、线性渐变
    var lg = ctx.createLinearGradient(x, y, w, h) // 确定渐变区域
    lg.addColorStop(0,"#f00");
    lg.addColorStop(1,"#fff");
    ctx.fillStyle = lg; //调色 --- 调的是渐变色
    ctx.strokeStyle = lg;

    // 10、径向渐变
    var rg = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
    rg.addColorStop(0,"#f00");
    rg.addColorStop(1,"#fff");
    ctx.fillStyle = rg; //调色 --- 调的是渐变色
    ctx.strokeStyle = rg;

    // 11、图像
    ctx.drawImage(img, x, y) // 图片img放到那里去
    ctx.drawImage(img, x, y, w, h) // 图片img放到那里去,宽高为多少
    ctx.drawImage(img, x0, y0, fw, fh, x, y, w, h) // 截取img,从哪里开始,截取多少,放到那里去,宽高为多少

    // 12、开始和结束绘制
    ctx.beginPath(); // 重新开始绘制 --- 画完洗了画笔,重新开始绘制
    ctx.closePath(); // 结束

    // 13、保存和恢复状态
    ctx.save();
    ctx.restore();

    // 14、绘制图像的先后顺序影响图像的显示 ---- 图像组合
    ctx.globalCompositeOperation = typeo
    /**
    source-over(默认值):在原有图形上绘制新图形
    destination-over:在原有图形下绘制新图形
    source-in:显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色
    destination-in:显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色
    source-out:只显示新图形非交集部分
    destination-out:只显示原有图形非交集部分,是将交集的部分转化为透明 --------- 刮刮乐
    source-atop:显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色
    destination-atop:显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色
    lighter:原有图形和新图形都显示,交集部分做颜色叠加
    xor:重叠部分不显示
    copy:只显示新图形
    */

    // 填充或者绘制边框 --- 上色
    ctx.fill();
    ctx.stroke();

    用canvas绘制一个静态的圆弧进度条

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <canvas id="canvas" width="500" height="500">您的浏览器不支持canvas</canvas>
    </body>
      <script>
        const canvas=document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
    
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
        ctx.lineWidth = 15;//绘制圆环
        ctx.strokeStyle = 'red'; 
        ctx.stroke();
        // ctx.font = "italic 30px 微软雅黑";
        // ctx.fillText('信封', 120, 100)
    
        // 绘制进度环
        var startAngle = 3 / 2 * Math.PI; //开始位置弧度
        var percentage = 50;  //完成进度值 
        var diffAngle = percentage / 100 * Math.PI * 2; //完成进度弧度值
        ctx.beginPath();
        ctx.arc(100, 100, 50, startAngle, diffAngle + startAngle, false);
        ctx.strokeStyle = 'green';
        ctx.stroke();
    
        // 绘制文字
        ctx.fillStyle = '#ff0';
        ctx.textAlign = 'center';
        ctx.font = '24px serif';
        ctx.fillText(percentage + '%', 100+2, 100+5);
      </script>
    </html>
  • 相关阅读:
    Redis 启动失败
    Java本机直接内存溢出
    Java元数据区域(MetaSpace)OOM
    Java虚拟机本地方法栈溢出例子
    Java堆溢出实例
    C# DllImport CallingConvention选择
    光源选型
    条型光的光路分析
    VS安装包官方下载网址
    win7装.net framework4.6注意事项
  • 原文地址:https://www.cnblogs.com/toughy/p/11283413.html
Copyright © 2011-2022 走看看