canvas 相关使用说明

• 默认背景色为透明

• canvas 绘制的宽高不受css样式控制，要直接在标签上给设置，或是获取到canvas标签对象(canvasObj)，再设置(canvasObj.width = 1000)

• getContext() 方法返回一个用于在画布上绘图的环境；现在只有“2d”;

• 渐变的效果发生在所规定的坐标之间，之外的就会用相应的纯色填充。

• .save()和.restore()之间定义的方法或定义只作用于他们之间

• 判断点是否在矩形内 ctx.isPointInPath(20, 20) 方法不支持 fillRect(),strokeRect()

• ctx.lineCap='round'; 线条条末端线帽的样式

• ctx.lineJoin='round'; 线条边角，折角的类型

• canvasElement.toDataURL(type, encoderOptions);

返回：一个包含图片展示的 Data URLs(data:[<mediatype>][;base64],<data>)
type: 默认为 image/png
encoderOptions: 当图片格式为 image/jpeg 或 image/webp时，可从 0 到 1 的区间选择图片的质量。超出范围，取默认值0.92。

• 绘制文本：

ctx.font='16px Arial'; // 与css的font属性一致，这里必须要设置字体
ctx.fillStyle="#FF0000"; // 可以是颜色，渐变，图片
ctx.fillText('Hello World!',50,50);

• ctx.drawImage()：将图片绘制到canvas上

注意图片是否已经加载完毕
参数：
1. (Element, 相对画布x位置, 相对画布y位置)
2. (Element, 相对画布x位置, 相对画布y位置, 图宽, 图高)
3. (Element, 图像x位置，图像y位置,裁切图的宽度，裁切图的高度,相对画布x位置，相对画布y位置,图宽，图高)

• Path2D 用于复制重用路径

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var path1 = new Path2D();
path1.rect(10, 10, 100,100);
var path2 = new Path2D(path1);
path2.moveTo(220, 60);
ctx.stroke(path2);

• 设置宽高

window.addEventListener("resize", ()=>{
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}, false);

canvas 转图片

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

/* 利用矩形填充颜色 设置背景 */
ctx.fillStyle='#36fde4';
ctx.fillRect(0, 0 , canvas.width, canvas.height)

ctx.beginPath()
ctx.strokeStyle='#fff';
ctx.moveTo(0,0)
ctx.lineTo(150,150)
ctx.lineTo(300,0)
ctx.stroke()

ctx.font='20px Arial'
ctx.fillStyle='#fff';
ctx.fillText('这是签名',115,50);
/**
    1. 这一步如果不是放在服务中，有可能会报错：canvas没有toDataURL方法
    2. canvas 设置的 css 样式 不会被输出
*/
const dataURL = canvas.toDataURL('image/png')
var imgEle = document.createElement('img')
imgEle.src = dataURL
document.body.appendChild(imgEle)

canvas 环形进度条

<canvas id="canvasId" width="100px" height="100px" style="width: 100px;height: 100px;background-color: red;"></canvas>

function setCircle(percent) {
    if(percent>1 || percent < 0) { 
        console.log('请传入[0-1]范围内的数字,当前传入：',percent);
        return
    }
    var deg = percent*360
    var end = Math.PI/180 * deg - Math.PI/2 
    var ctx = document.getElementById('canvasId').getContext('2d')
    ctx.beginPath();
    ctx.lineCap = "round";
    ctx.lineWidth = 8;
    ctx.strokeStyle = '#F7F7F8';
    /*  圆的中心的 x y 坐标, 圆的半径。
        sAngle	起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。eAngle	结束角，以弧度计。
        counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 */
    ctx.arc(50, 50, 40, 0 , 2*Math.PI);
    ctx.stroke();
    ctx.closePath();
    
    ctx.beginPath();
    ctx.lineCap = "round";
    ctx.lineWidth = 8;
    ctx.strokeStyle = '#00DED6';
    ctx.arc(50, 50, 40, -Math.PI/2 ,end);
    ctx.stroke();
    ctx.closePath();
}