canvas绘图

首先，设置canvas画布大小canvas.width = 1200; canvas.height = 400;
将canvas转化为2d模型 getContextvar content = canvas.getContext("2d");
1、绘制矩形

	content.fillStyle = "red";
    content.fillRect(0, 0, 300, 200);
    content.fill();

2、绘制圆形

	content.fillStyle="blue";
    content.arc(200,100,100,0,Math.PI/2,true);
    content.fill();

3、绘制线条

 content.fillStyle="blue";
        content.strokeStyle="red";
        content.lineWidth=10;
        content.moveTo(120,100);
        content.lineTo(300,100);
        content.lineTo(150,250);
        content.lineTo(200,50);
        content.lineTo(310,220);
        content.lineTo(120,100);
        content.lineTo(300,100);
        content.stroke();
        content.fill();

4、圆形渐变

    var context = canvas.getContext("2d");
    //圆形渐变
    context.beginPath();
    var rad = context.createRadialGradient(200, 200, 0, 200, 200, 100);
    rad.addColorStop(0.1, "#d5d3ee");
    rad.addColorStop(0.2, "#ffd1fd");
    rad.addColorStop(0.3, "#ffc8b4");
    rad.addColorStop(0.4, "#f5ffdd");
    rad.addColorStop(0.5, "#ffe7bf");
    rad.addColorStop(0.6, "#b6cbff");
    rad.addColorStop(0.7, "#a4ff8c");
    rad.addColorStop(0.8, "#d5f3ff");
    rad.addColorStop(0.92, "#fff7b1");
    rad.addColorStop(0.98, "#ff8b86");
    context.fillStyle = rad;
    context.arc(200, 200, 100, 0, Math.PI * 2, true);
    context.fill();
    context.closePath();

5、线性渐变

        context.beginPath();
        var rad = context.createLinearGradient(100, 100, 200, 300);
        rad.addColorStop(0.1, "#d5d3ee");
        rad.addColorStop(0.2, "#ffd1fd");
        rad.addColorStop(0.3, "#ffc8b4");
        rad.addColorStop(0.4, "#f5ffdd");
        rad.addColorStop(0.5, "#ffe7bf");
        rad.addColorStop(0.6, "#b6cbff");
        rad.addColorStop(0.7, "#a4ff8c");
        rad.addColorStop(0.8, "#d5f3ff");
        rad.addColorStop(0.92, "#fff7b1");
        rad.addColorStop(0.98, "#ff8b86");
        context.fillStyle = rad;
        context.arc(200, 200, 100, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();

6、绘制文字

    var rad = context.createLinearGradient(100, 200, 1100, 400);
    rad.addColorStop(0.1, "#d5d3ee");
    rad.addColorStop(0.2, "#ffd1fd");
    rad.addColorStop(0.3, "#ffc8b4");
    rad.addColorStop(0.4, "#f5ffdd");
    rad.addColorStop(0.5, "#ffe7bf");
    rad.addColorStop(0.6, "#b6cbff");
    rad.addColorStop(0.7, "#a4ff8c");
    rad.addColorStop(0.8, "#d5f3ff");
    rad.addColorStop(0.92, "#fff7b1");
    rad.addColorStop(0.98, "#ff8b86");
    context.fillStyle = rad;
    context.font = "100px STheiti, SimHei";
    context.fillText("canvas绘图--绘制文字", 100, 300);

7、绘制图片

    var img = new Image();
    img.src = "./img/canvas1.jpg";
    context.drawImage(img, 100, 0, 300, 200, 100, 300, 200, 100);