【HTML】canvas学习小结

1. 绘制基本图形

-----上下文----------------------------------------------------------

canvas.getContext('2d') 获取上下文

ctx.save()　　保存当前上下文

ctx.restore()　　恢复至上次保存的上下文

-----路径 ----------------------------------------------------------

ctx.beginPath()　　开始绘制新路径

ctx.closePath()　　结束当前路径

ctx.moveTo(x,y)　　移动绘制点至x,y

ctx.lineTo(x,y)　　从当前点绘制到x,y的线

------样式-------------------------------------------------------------

ctx.fillStyle　　设置图形填充的颜色

ctx.strokeStyle　　 设置图形边框的颜色

-----线条样式 -----------------------------------------------------------

ctx.lineWidth　　设置图形边框的宽度

ctx.lineCap　　线条末端样式，可为round / butt / sqare

ctx.lineJoin　　两条线交汇边角的类型,可为bevel|round|miter

ctx.lineLimit　　两线夹角长度，只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

-----填充&绘制---------------------------------------------------------- 

ctx.fill()　　填充图形

ctx.stroke()　　绘制图形，一般填充在绘制前面，避免填充遮挡宽度

-----转换---------------------------------------------------------- 

ctx.translate(x,y)　　将图形起始坐标移至x,y　　

ctx.rotate(angle)　　将图形旋转angle角度（弧度制）

ctx.scale(x,y)　　将图形X轴缩放x倍，Y轴缩放y倍

ctx.transform(a,b,c,d,e,f)　　将图形进行矩阵变换，a,b水平缩放、倾斜，c,d垂直倾斜、缩放，e,f水平、垂直移动图形，矩阵变换可叠加

ctx.setTransform(a,b,c,d,e,f)　　将图形变换矩阵重置为指定矩阵

1.1 绘制线条

    var canvas = document.getElementById('demo');
    canvas.width = 800;
    canvas.height = 800;
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(200,200);
    ctx.lineTo(100,300);
    ctx.lineWidth = 15;
    ctx.lineCap = "round";
    ctx.strokeStyle = "#CC0000"; // 设置线的颜色
    ctx.lineJoin = "miter"; //两条线交汇边角的类型,可为bevel|round|miter
    ctx.lineLimit = 15;//两条线交汇处内角和外角之间的距离，只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

    ctx.closePath();
    ctx.stroke();

1.2 绘制矩形

ctx.rect(x1, y1, x2, y2);　　绘制左上角坐标x1,y1 右下角坐标x2,y2的矩形

ctx.fillRect(x1, y1, x2, y2);　　绘制左上角坐标x1,y1 右下角坐标x2,y2的填充矩形

ctx.strokeRect(x1, y1, x2, y2);　　绘制左上角坐标x1,y1 右下角坐标x2,y2的无填充矩形

ctx.clearRect(x1, y1, x2, y2);　　清楚左上角坐标x1,y1 右下角坐标x2,y2的矩形内图像　　

    ctx.rect(0,20,100,100);

    ctx.fillStyle = "red";
    ctx.fillRect(120,20,100,100);

    ctx.strokeStyle = "black";
    ctx.lineWidth = 10;
    ctx.strokeRect(250,20,300,100);
    
    ctx.fill();
    ctx.stroke();

    ctx.clearRect(100,50,50,50);//清除某个矩形区域的内容

1.3 绘制圆形&扇形

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);　　x和y参数是圆心坐标，radius是半径，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）

  

    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.arc(100,100,50,Math.PI * 0.5,Math.PI * 2,true);

    ctx.closePath();//不结束路径，就只绘制弧线
    ctx.stroke();

1.4 绘制五角星

        ctx.beginPath();
        for(var i = 0 ; i < 5 ; i ++){
            ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI) * 20,
                -Math.sin((18 + i*72)/180 * Math.PI) * 20);
            ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI) * 20 * 0.5,
                -Math.sin((54+ i*72)/180 * Math.PI) * 20 * 0.5);            
        }
        ctx.closePath();

 

1.5 绘制渐变色

createLinearGradient（x1,y1,x2,y2）　　绘制从x1,y1起始，x2,y2终止的线性渐变，例如（0,0,0,100）从上至下的线性渐变，（0,0,100,0）从左至右

addColorStop(stop,color)　　从stop(介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置)换颜色渐变

createRadialGradient（x1,y1,x2,y2）　　绘制从x1,y1起始，x2,y2终止的线性渐变，例如（0,0,0,100）从上至下的线性渐变，（0,0,100,0）从左至右

    var myGradient = ctx.createLinearGradient(0, 0, 500, 0); //从上至下的线性渐变

    myGradient.addColorStop(0, "#000"); 
    myGradient.addColorStop(1, "#fff");

    ctx.fillStyle = myGradient;
    ctx.fillRect(10,10,500,500);    

    var myGradient = ctx.createRadialGradient(400, 400, 0,400, 400,200); //从上至下的径向渐变

    myGradient.addColorStop(0, "#000"); 
    myGradient.addColorStop(1, "#fff");

    ctx.fillStyle = myGradient;
    ctx.fillRect(10,10,600,600);

1.6 阴影

ctx.shadowOffsetX　　阴影距形状的水平距离

ctx.shadowOffsetY　　阴影距形状的垂直距离

ctx.shadowBlur　　阴影的模糊级别

ctx.shadowColor　　阴影的颜色

    ctx.shadowOffsetX = 10; // 设置水平位移
    ctx.shadowOffsetY = 10; // 设置垂直位移
    ctx.shadowBlur = 5; // 设置模糊度
    ctx.shadowColor = "rgba(0,0,0,0.2)"; // 设置阴影颜色

    ctx.fillStyle = "#CC0000"; 
    ctx.fillRect(10,10,200,100);

1.7 绘制文本

ctx.font　　当前字体属性

ctx.textAlign　　对齐方式，包括center|end|left|right|start

ctx.textBaseline　　当前文本基线 ，包括alphabetic|top|hanging|middle|ideographic|bottom

ctx.fillText()　　绘制“被填充的”文本

ctx.strokeText(text,x,y,maxWidth)　　绘制文本（无填充），text文本，x,y文本坐标，maxWidth 文本最大宽度

ctx.measureText(text,x,y,maxWidth)　　返回包含指定文本宽度的对象

    // 在位置 250 创建红色基线
    ctx.strokeStyle="red";
    ctx.moveTo(250,20);
    ctx.lineTo(250,200);
    ctx.stroke();

    // 创建渐变
    var gradient=ctx.createLinearGradient(0,0,800,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");

    ctx.fillStyle = gradient;
    ctx.font="30px Arial";
    // 显示不同的 textAlign 值
    ctx.textAlign="start";
    ctx.fillText("textAlign=start",250,60,120);

    ctx.textAlign="end";
    ctx.fillText("textAlign=end",250,90);

    ctx.textAlign="left";
    ctx.fillText("textAlign=left",250,120);

    ctx.textAlign="center";
    ctx.fillText("textAlign=center",250,150);

    ctx.textAlign="right";
    ctx.strokeText("textAlign=right",250,180);