当前位置: 58彩票app下载 > 前端应用 > 正文

环形图绘制

时间:2020-01-05 08:33来源:前端应用
1. 制图三角形 首要选取几个知识点 fill是填充面(实心),stroke是画线(空心) script type="text/javascript" //首先,找到 canvas 元素: var canvas = document.getElementById('myCanvas'); //然后,创建 con

图片 1

1. 制图三角形

首要选取几个知识点

fill是填充面(实心),stroke是画线(空心)
    <script type="text/javascript">
        //首先,找到 <canvas> 元素:
        var canvas = document.getElementById('myCanvas');
        //然后,创建 context 对象:
        //getContext("2d") 对象是内建的 HTML5 对象,
        //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
        var context = canvas.getContext('2d');

        //canvas 是一个二维网格。
        //canvas 的左上角坐标为 (0,0)
        context.beginPath();
        //moveTo(x,y) 定义线条开始坐标
        context.moveTo(0,0);
        //lineTo(x,y) 定义线条结束坐标
        //绘制三角形
        context.lineTo(0,100);
        context.lineTo(100,100);
        context.lineTo(0,0)
        context.strokeStyle = "#0000FF";
        context.stroke();
//      context.lineWidth = 10;
//      context.fillStyle = "#008000";
//      context.fill();

1、lineCap:怎么样绘制每一条线段末端的天性。有3个恐怕的值,分别是:butt(线段末端以方形甘休卡塔尔国, round and square。暗中认可值是 butt。

2. 画圆

2、圆弧初阶点与甘休点的安装

lineCap:线帽 有多少个参数
  • butt 默许。向线条的每种末端增添平直的边缘。
  • round 向线条的种种末端增多圆形线帽。
  • square 向线条的各样末端增多星型线帽。

在本里中装置情势 ctx.arc(110, 110, 100, 0.75 * Math.PI, 0.75 * Math.PI

context.arc(参数1,参数2,参数3,参数4,参数5,参数6);
  • 参数1 参数2 圆形原点的坐标
  • 参数3 半径
  • 参数4 制图圆形的发端角度
  • 参数5 绘制圆形的完工角度
  • 参数6 顺时针 | 逆时针 参数是布尔:true 逆时针,false 顺时针
    context.arc(200,100,100,0,Math.PI,false);
        //画圆 
        context.beginPath(); // 重新开启一个新的图层
        context.arc(200,100,100,0,Math.PI,false);
        context.lineCap = "round";
        context.lineWidth = 15;
        context.strokeStyle = "aquamarine";
        context.stroke();
  • step * 1.5 * Math.PI, false卡塔尔; // false 是顺时针

3. 矩形

3、LinearGradient的应用方式

context.rect(参数1,参数2,参数3,参数4);
  • 参数1 ,参数2 矩形绘制的起源地点(参数1为X轴的坐标,参数2为Y轴的坐标)
  • 参数3,矩形的宽
  • 参数4矩形的高

完全的代码如下

成立线条渐变 context.createLinearGradient(参数1,参数2,参数3,参数4卡塔尔(قطر‎;
  • 参数1 ,参数2 渐变颜色先导的岗位(参数1为X轴的坐标,参数2为Y轴的坐标)
  • 参数3,参数4 渐变颜色甘休的职责(参数3为X轴的坐标,参数4为Y轴的坐标)
 div  div  !-- 一定要设置width 和 height 否则图形会变形 -- canvas width="220" height="220"/canvas canvas width="220" height="220"/canvas div 正在加载中.../div /div /div

 style .progress_box { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; background: #140c33; } #progress_bg { position: absolute; width: 220px; height: 220px; } #progress_canvas { width: 220px; height: 220px; z-index: 1; } .progress_text { position: absolute; display: flex; align-items: center; justify-content: center; color: #ddd; } .progress_info { font-size: 20px; padding-left: 16px; letter-spacing: 2px; } .progress_dot { width: 16px; height: 16px; border-radius: 50%; background: #fb9126 } /style

 script function drawProgressBg() { var canvas = document.getElementById("progress_bg"); var ctx = canvas.getContext("2d"); ctx.lineWidth = 4; ctx.strokeStyle = "#20183b"; ctx.lineCap = "round"; ctx.beginPath(); ctx.arc(110, 110, 100, 0, 2 * Math.PI, false); ctx.stroke(); } drawProgressBg() function drawCircle(step) { var canvas = document.getElementById("progress_canvas"); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(200, 100, 100, 200); gradient.addColorStop(0, "#2661DD"); gradient.addColorStop(0.5, "#40ED94"); gradient.addColorStop(1.0, "#5956CC"); ctx.lineWidth = 10; ctx.strokeStyle = gradient; ctx.lineCap = "round"; ctx.beginPath(); ctx.arc(110, 110, 100, 0.75 * Math.PI, 0.75 * Math.PI + step * 1.5 * Math.PI, false); // false 是顺时针 ctx.stroke(); } //drawCircle() function countInterval() { var count = 0 var counterTimer = setInterval(function() { if (count = 60) { this.drawCircle(count / 60) count += 2; } else { var text = document.getElementById("progress_text") text.innerHTML = "加载完成" clearInterval(counterTimer) } }, 100) } countInterval() /script
grd.addColorStop(参数1,参数2);
  • 参数1 ,0~1之间的数
  • 参数3,参数4 颜色
        //矩形
        context.beginPath();
        context.rect(0,200,200,100);
        var grd = context.createLinearGradient(0,200,200,200);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(1,"blue");
        context.fillStyle = grd;
        context.fill();

留心:必需求设置 Canvas 的width 和 height 不然图形会变形。

创建一个朝着/圆渐变 context.createRadialGradient(xStart, yStart,radiusStart,xEnd, yEnd,radiusEndState of Qatar;

-xStart, yStart 开头圆的圆心的坐标。
-radiusStart 在此在此之前圆的半径。
-xEnd, yEnd 结束圆的圆心的坐标。
-radiusEnd 停止圆的半径。

        context.beginPath();
        context.rect(0,200,200,100);
        var grd = context.createRadialGradient(200,200,50,200,200,200);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(1,"blue");
        context.fillStyle = grd;
        context.fill();

4. 文本

  • font - 定义字体
  • fillText(text,x,y卡塔尔 - 在 canvas 上制图实心的文书
  • strokeText(text,x,y卡塔尔 - 在 canvas 上制图空心的文件
  • context.textBaseline 垂直对齐方式
  • context.textAlign 水平对齐格局
        // bold 可以省略   Arial 不可以省略
        context.font = "bold 50px Arial";
        context.textBaseline = "middle";
        context.textAlign = "center";
        var grd = context.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"blue");
        grd.addColorStop(0.5,"yellow");
        grd.addColorStop(1,"red");
        context.fillStyle = grd; 
        context.fillText("hello",100,100);

编辑:前端应用 本文来源:环形图绘制

关键词: