canvas常用操作

 

创建canvas

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

绘制文字

let text='我是一段文字'
ctx.font = 'bold 14px Microsoft YaHei';
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';//文本基线,fillText在画布上定位时,将使用指定的 textBaseline 值。
ctx.fillStyle = '#FFF';
ctx.font = 'bold 14px Microsoft YaHei';
ctx.measureText(text).width //获取文字宽度-需先设置文字样式
ctx.fillText(text, 0, 0);//(文字,x,y)

绘制图片

let img = new Image();
img.crossOrigin ='anonymous',//解决网络图片跨域，污染画布，
img.src = 'https://xxxx.png';
img.onload = function () {
    ctx.drawImage(img, 6, 54,65,81);//(图片,x,y,宽,高)
}

绘制图片圆形

function circleImg(ctx, img, x, y, r) {
    ctx.save(); 
    var d = 2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.beginPath();
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore();
}

将画布转化成图片

let image = new Image();
image.src = canvas.toDataURL("image/jpg")

 

绘制带边框的有颜色填充的圆形

ctx.beginPath();
ctx.arc(40, 138, 9, 0, Math.PI * 2, true);//画圆形(x,y,半径,起始角,结束角,顺逆时针绘制)
ctx.closePath();
ctx.fillStyle = '#3298FF';
ctx.strokeStyle = '#FBE200';
ctx.lineWidth = 2;
ctx.stroke(); //描边
ctx.fill();

绘制一个有填充色的圆角矩形

/**该方法用来绘制一个有填充色的圆角矩形 
 *@param cxt:canvas的上下文环境 
 *@param x:左上角x轴坐标 
 *@param y:左上角y轴坐标 
 *@param width:矩形的宽度 
 *@param height:矩形的高度 
 *@param radius:圆角的半径 
 *@param fillColor:填充颜色 
 **/
function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
    //圆的直径必然要小于矩形的宽高          
    if (2 * radius > width || 2 * radius > height) {
        return false;
    }
    cxt.save();
    cxt.translate(x, y);
    //绘制圆角矩形的各个边  
    drawRoundRectPath(cxt, width, height, radius);
    cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值  
    cxt.fill();
    cxt.restore();
}
function drawRoundRectPath(cxt, width, height, radius) {
    cxt.beginPath(0);
    //从右下角顺时针绘制，弧度从0到1/2PI  
    cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
    //矩形下边线  
    cxt.lineTo(radius, height);
    //左下角圆弧，弧度从1/2PI到PI  
    cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
    //矩形左边线  
    cxt.lineTo(0, radius);
    //左上角圆弧，弧度从PI到3/2PI  
    cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
    //上边线  
    cxt.lineTo(width - radius, 0);
    //右上角圆弧  
    cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
    //右边线  
    cxt.lineTo(width, height - radius);
    cxt.closePath();
}

 

后续慢慢佛系补充

标签：canvas,cxt,ctx,常用,width,radius,操作,PI,Math
来源： https://www.cnblogs.com/xym0710/p/14898172.html