canvas画任意角度的扇形，弧形，及扇形弧形填纯色渐变色

前提：

,直径大端向上,小 端向下放在玻璃板上,再放入湿气养护箱中继续养护,临近终凝时间时每隔15min测定一次,当试针沉入试体0.5mm时,即环形附件开始不能在试体上留下痕迹时,为水泥达到终凝状态,由水泥全部加入水中至终凝状态的时间为水泥的终凝时间,用"min"表示。首先打开你的演示文稿. 在页面上右击,弹出菜单,点击背景. 如果想用纯色填充,可以选择其他颜色,自定义背景颜色. 如果想用图片作为背景,则选择填充效果. 可以选择软件自带的图案纹理,也可以添加自己想要 ...。表示纯色填充，通过android:color即可指定shape中填充的颜色。

完成代码

这是一份较粗略的代码，代码如下：

HTML代码：

 <!-- 放弧形的盒子 -->
    <div class="circleBox">
      <!-- 弧形 -->
      <canvas ref="tutorial" width="150" height="150"></canvas>
      <!-- 弧形中间的空白部分 -->
      <div class="circleText">
      </div>
    </div>

JavaScript代码：

  draw () {
      // 获取canvas DOM节点
      var canvas = this.$refs.tutorial
      if(canvas.getContext) {
        // 获取绘画上下文
        var ctx = canvas.getContext("2d")
        // 设置渐变背景
        var lineargradient = ctx.createLinearGradient(0, 0, 150, 150)
        lineargradient.addColorStop(0, 'white')
        lineargradient.addColorStop(1, 'black')
        // 开始绘画
        ctx.beginPath()
        // 画圆的函数，四个参数分别为x, y（坐标）, radius（半径）, angle（环形半径）, direction（环形方向，顺时针或者逆时针）
        // angle是我定义的一个变量，控制角度用的。一个完整的圆是Math.PI*2，angle把2均分之后的对应值
        ctx.arc(75, 75, 50, 0, Math.PI*this.angle*0.1, false)
        // 移动笔触到圆心
        ctx.lineTo(75, 75)
        // 闭合路径
        ctx.closePath()
        // 根据弧度选择填色色彩
        if(this.angle>0 && this.angle<=9) {
          ctx.fillStyle = lineargradient
        } else if(this.angle > 9 && this.angle <= 15) {
          ctx.fillStyle = 'green'
        } else if (this.angle >= 20) {
            ctx.fillStyle = 'orange'
        } else {
          ctx.fillStyle = 'blue'
        }
      // 填色
        ctx.fill()
      }

.circleBox{
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto
}
.circleText{
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
  background-color: #fff;
}

效果图（60deg）：

效果图295deg：

你看，扇形已经出来了，如果想要弧形的话，之前上面的代码有一个类名为circleText的div，它是放在扇形中心的一个圆形白色遮罩，填上它就是弧形了，可以按需求添加删除，添加中间的白色遮罩后效果如图：

原理解析：

画任意角度的扇形弧形的代码已经完全贴完了，这是在Vue中用到的，其他框架或者没有框架，有些地方可能稍后变化，但原理是一样的。

下面稍微讲一些canvas画图的原理，免得以后自己看的时候忘了，有需要的同学也可以顺便看一下。

canvas元素

<canvas ref="tutorial" width="150" height="150"></canvas>

矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等。6)亿图图示专家基本绘图工具让您可以通过直线、曲线、弧线、矩形和椭圆工具等元素绘制出新的图形，并可以保存到图形模板库供日后使用，让用户的思想和创意能够淋漓尽致的体现在绘图过程中。矢量图是使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。

栅格

第二个基准坐标就是图片接触地面(如脚)的那个xy轴，图片大小是128x128像素，所以64,128，就是最低端的中点位置（注意，编写程序里面的xy轴默认原点是在左上角canvas 扇形，也就是从左上角开始往右是+x，往下是+y，64是x，128是y，也就是往右一半再往下到底）如果你更改的图片高度或宽度比128大的话，就要改一下基准坐标，。affine_trans_pixel 和 affine_trans_point_2d的不同在于所使用的坐标系原点不同，affine_trans_pixel 使用的是像素坐标系，即原点位于图像的左上角第一个像素，使用row和column来确定像素位置，而affine_trans_point_2d的原点位于左上角第一个像素的中心，使用x和y来标识坐标位置（实际原点相差（0.5，0.5））。对顶轴p（x，y）关于x轴对称点：p，(x,-y)关于y轴对称点：p``（-x，y）关于原点对称点：p```（-x，-y）在一，三象限上的点记作：a（a，a）在二，四象限角平分线上的点记作：b（a，-a）【知识梳理】（本段引自人民教育网）1．平面直角坐标系的有关概念：平面直角坐标系的有关概念不要死记硬背，应紧密结合坐标系来认识。

还是喜欢先上代码，首先把canvas DOM对象获取到，下面这段代码也可以说是canvas画图的一个基本骨架：

var canvas = this.$refs.tutorial // 用的Vue，所以获取DOM节点使用的是$refs
var ctx = canvas.getContext("2d")

矩形

矩形是canvas内置函数，直接调用就可以了：

ctx.fillRect(20, 20, 100, 100)
ctx.fillStyle = 'green'

同一个canvas对象里可以画很多个矩形，由这个可以延展到，在canvas里面，我们是通过图形组合canvas 扇形，来实现复杂的图形的

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);

此外，canvas还能绘制路径、曲线，给你传送门吧，我再写下去，就跟照搬教程一样了。

Canvas-API

写的不对不好不理解的，请告诉我一下，麻烦了，谢谢

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-117379-1.html