H5canvas解析

canvas详解

canvas本身并不具备绘画能力，它本身只是一个画布，是一个容器。绘图能力是基于html5的getContext(“2d”)返回的CanvasRenderingContext2D对象来完成的。

<canvas id="payAbilityLoginTree" width="1000" height="800"></canvas>

需注意，必须指定canvas画布的大小，canvas本身是受自身的width、height属性来决定是否重绘的，而不是style属性的宽高，只是默认情况下，canvas的宽高跟style属性的宽高一致。

canvas是一个二维网络，以画布左上角（0,0）为坐标原点，x轴向右延伸，y轴向下延伸。所以canvas画布中的坐标全为正数，没有负数。

1. strokeRect(x,y,width,height):绘制无填充矩形
2. arc(x,y,r,sAngle,eAngle,counterclockwise):绘制圆
3. fillStyle=color|gradient|pattern:填充绘画的颜色、渐变或模式
4. moveTo(x,y):把路径移动到画布中的指定点，不创建线条
5. lineTo(x,y):添加一个新点
6. stroke():绘制已定义的路径，即线条绘制
7. fill():填充当前绘图（主要是颜色填充）
8. drawImage(img,x,y,width,height):绘制图像
9. scale(scalewidth,scaleheight):缩放当前绘图
10. save():保存当前环境的状态。

该方法的使用是将之前绘图的属性进行缓存，使之后的绘图能够独立出来

restore():返回之前保存过的路径状态和属性。

即是消除save()的影响，让绘图回到原先的状态。

beginPath(): 开始一条新的路径，该方法将消除方法调用前的绘图影响。

通常我们在一个新的绘图前都会使用该方法，目的是杜绝之后的stroke或fill填充当前图形。

closePath():创建当前点到开始点的路径，即闭合路径，常用在三角形的第3边绘制。

isPointInPath(x,y):判断指定的点是否在当前路径上。

clearRect(x,y,width,height)：清除画布指定区域的绘图。该方法很重要，在canvas中只有该方法可以清除绘图，在重绘时常常用到。

实例

html：

<canvas id={
   this.props.canvasId} width={
   this.props.width} height={
   this.props.height}></canvas>

const data = {
   
    desc: "自定义图形", //第一行描述文字
    count: 2321341,    //第二行描述文字
    percent: 60,      //圆环中心显示数字
    pieData: [{
    desc: '圆环', name: "A", value: "0.6" }, {
    desc: '圆环',name: "B", value: "0.4" }],//环图数据
    x: 250,         //图形中心点在画布的x轴坐标
    y: 250          //图形中心点在画布Y轴坐标
}

constructor(props) {
   
        super(props)