// 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="" height="">您的浏览器不支持canvas</canvas>

</body>

  <script>

    const canvas=document.getElementById('canvas')

    const ctx = canvas.getContext('2d')

    ctx.beginPath();

    ctx.arc(, , , ,  * Math.PI, false);

    ctx.lineWidth = ;//绘制圆环

    ctx.strokeStyle = 'red';

    ctx.stroke();

    // ctx.font = "italic 30px 微软雅黑";

    // ctx.fillText('信封', 120, 100)

    // 绘制进度环

    var startAngle =  /  * Math.PI; //开始位置弧度

    var percentage = ;  //完成进度值

    var diffAngle = percentage /  * Math.PI * ; //完成进度弧度值

    ctx.beginPath();

    ctx.arc(, , , startAngle, diffAngle + startAngle, false);

    ctx.strokeStyle = 'green';

    ctx.stroke();

    // 绘制文字

    ctx.fillStyle = '#ff0';

    ctx.textAlign = 'center';

    ctx.font = '24px serif';

    ctx.fillText(percentage + '%', +, +);

  </script>

</html>

canvas的描述的更多相关文章

  1. SVG和canvas渲染的性能比较

    1.什么是SVG? 描述: 一种使用XML描述的2D图形的语言 SVG基于XML意味着,SVG DOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器. 在 SVG 中,每个被 ...

  2. Android应用程序窗口（Activity）的测量（Measure）、布局（Layout）和绘制（Draw）过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8372924 在前面一篇文章中,我们分析了And ...

  3. android SurfaceView绘制实现原理解析

    在Android系统中,有一种特殊的视图,称为SurfaceView,它拥有独立的绘图表面,即它不与其宿主窗口共享同一个绘图表面.由于拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独 ...

  4. 杂项：HTML5-2/3-新元素

    ylbtech-杂项:HTML5-2/3-新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更 ...

  5. Android视图SurfaceView的实现原理分析(示例,出错代码)

    在Android系统中,有一种特殊的视图,称为SurfaceView,它拥有独立的绘图表面,即它不与其宿主窗口共享同一个绘图表面.由于拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独 ...

  6. android自定义View_1——Custom Drawing

    前言:自定义view重要的部分就是view的展示样式,为了实现view的样式可以重写onDraw()方法. 一:Override onDraw() 1.当覆盖了onDraw()方法后,需要一个Canv ...

  7. SurfaceView之绘制sin曲线

    package com.loaderman.customviewdemo; import android.animation.ValueAnimator; import android.content ...

  8. 什么是H5？

    总听到很多人说H5,现在H5很火,到底H5是什么,以下发表个人对H5的理解. HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年. ...

  9. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

随机推荐

  1. Codeforces Round #622 (Div. 2)C（单调栈，DP)

    构造出的结果一定是一个单峰/\这种样子的 #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ...

  2. python3.0练习100题——001

    自学python3中,现在开始每天在python2.71 100例中做一道题,用python3实现,并写下一些思考-加油(ง •̀灬•́)ง 题目网站(http://www.runoob.com/py ...

  3. codeforces 1284D. New Year and Conference（线段树）

    链接:https://codeforces.com/problemset/problem/1284/D 题意:有n场讲座,有两个场地a和b,如果在a场地开讲座则需要占用[sai,eai],在b场地开讲 ...

  4. 普及C组第三题（8.10）

    2301. [普及组T3或T4]线索 (File IO): input:assassin.in output:assassin.out 时间限制: 1000 ms  空间限制: 262144 KB 题 ...

  5. 第三十九篇 入门机器学习——Numpy.array的基础操作——合并与分割向量和矩阵

    No.1. 初始化状态 No.2. 合并多个向量为一个向量 No.3. 合并多个矩阵为一个矩阵 No.4. 借助vstack和hstack实现矩阵与向量的快速合并.或多个矩阵快速合并 No.5. 分割 ...

  6. 来了，就给自己立个flag

    2019-09-16,刚刚申请的博客园. 不知道不觉,自己已经大四毕业了. 说来惭愧,已经接触IT这方面已经四年了. 但仍然感觉自己像个萌新,啥也不懂,这也不会,那也不会. 8月开始在公司大佬的指导下 ...

  7. Go_sqlx和占位符

    sqlx使用 第三方库sqlx能够简化操作,提高开发效率. 安装 go get github.com/jmoiron/sqlx package main import ( "fmt" ...

  8. UPF set_port_attribute

    『set_port_attribute』, 在IEEE 1801-2015 中该命令定义如下,不是所有的工具都支持所有的option: 这个命令用于描述port 在『未知』区域的power 连接情况, ...

  9. 如何预测股票分析--k-近邻

    在上一篇中,我们学习了线性回归,这一次来看看k近邻的表现 K最近邻(k-Nearest Neighbor,KNN)分类算法,是一个理论上比较成熟的方法,也是最简单的机器学习算法之一.该方法的思路是:在 ...

  10. vs 安装svn插件

    在很多互联网开发的团队里面,用到的代码管理器都是SVN,svn目前有客户端和集成到VS里面两种(不清楚分类是否正确).客户端的在这里我就不写了,我目前用到比较多的都是集成到VS里面的,而且目前用着还是 ...