canvas基础用法（1）

首先创建一个canvas容器

const ca = document.createElement('canvas')
ca.width = window.innerWidth
ca.height = window.innerHeight
const ctx = ca.getContext('2d')
document.body.append(ca)

画线

function drawLine() {
    ctx.beginPath();
     ctx.lineCap="round";
    //lineJoin="bevel|round|miter";//拐角样式
    //lineCap="butt|round|square";//线的端点样式
    // ctx.miterLimit=5;//斜角最大长度
    ctx.moveTo(200, 200);//起点
    ctx.lineTo(250, 200);//途经点
    ctx.lineTo(250, 250);//途经点
    ctx.closePath()//结束
    ctx.lineWidth = 5//线宽
    ctx.strokeStyle = 'green';//颜色
    ctx.stroke();//描边
}

绘制矩形

function drawReact() {
    ctx.fillStyle="#399"//填充颜色
    ctx.fillRect(10,10,30,30)//实心矩形
    ctx.lineWidth=2
    ctx.strokeStyle="#399"
    ctx.strokeRect(100,100,130,130)//空心矩形
    ctx.clearRect(80,80,120,120)//清除矩形区域
}

画圆

function drawArc(){
    ctx.beginPath();//避免被之前的路径影响，重新决定起点

    ctx.arc(115,50,40,0,1*Math.PI);
    ctx.fill()//填充，设置颜色如上
    ctx.stroke();//描边
}

一波操作下来：

文字

function writeText(){
//阴影
    ctx.shadowOffsetX=-4;
    ctx.shadowOffsetY=-4;
    ctx.shadowColor='black';
    ctx.shadowBlur=4;
    

    ctx.font='32px 宋体'
    ctx.fillStyle = 'pink';
    ctx.textAlign ="left";
    ctx.fillText("Hello World",10,150);
    ctx.strokeText("Hello World",30,180);

}

图片

function drawImg(){
    //drawImage(img,x,y);
    //drawImage(img,x,y,width,height);
    //drawImage(img,sx,sy,swidth,sheight,x,y,width,height);//s代表裁剪
    var img=new Image()
    img.src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
    ctx.drawImage(img,460,10,40,40);
    
     //用图片填充
    var pat=ctx.createPattern(img,"repeat");
    //createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
    ctx.rect(500,500,600,600);
    ctx.fillStyle=pat;
    ctx.fill();
}

arcTo(x1, y1, x2, y2, radius)：从上一个点开始绘制一条弧线，到(x2, y2)，并以给定的半径穿过(x1, y1)。

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x, y)为圆心，r = radius画弧线，startAngle和 endAngle是起始角度和结束角度，用弧度表示， 最后一个参数counterclockwise表示是否按逆时针方向画图，true为逆时针方向，false为顺时针方向。默认是false即顺时针方向。

rect(x, y, width, height)：从(x, y)开始绘制一个宽等于width高等于height的矩形，这个矩形是路径，与之前用strokeRect()绘制的独立矩形不一样。

quadraticCurveTo(cx, cy, x ,y)：从上一点开始绘制一条二次贝塞尔曲线，(x, y)是结束点，(cx, cy)是控制点。

bezierCurveTo(c1x, c1y, c2x, c2y,x, y)：从上一点开始绘制一条三次贝塞尔曲线，(x, y)是结束点，(c1x, c1y), (c2x, c2y)是控制点。