Html5画图

设置画布的属性(宽和高必须是html里面的属性)：

设置两个画布和一张隐藏的图片

    <canvas width="1400" height="600" id="can" style="border: 1px solid rgb(0, 0, 0);"></canvas>
    <canvas width="400" height="200" id="mc" style="border: 1px solid red;"></canvas>
    <img id="myimg" style="display: none;" src="../img/005.jpg" width="1000" height="auto；" alt="图片没了！">

JS公共代码：

    var a = document.getElementById("can") //获得画布对象
    var b = a.getContext("2d"); //创建绘画对象(js画笔)

画一个圆弧：

    b.arc(180, 180, 150, 0, (Math.PI / 180) * 180, false); //画一个圆弧((x,y,起始角度,终止角度,顺时针或者逆时针(默认是false顺时针，true是逆时针))所有角度用的都是布尔值)
    b.stroke(); //填充路径

画一个圆弧并进行填充：

    b.arc(180, 180, 150, 0, (Math.PI / 180) * 180, false); //画一个圆弧
    b.stroke(); //填充路径
    b.fillStyle = "#f00"; //填充的颜色
    b.fill(); //进行内部颜色的填充

进行图片渲染：

    var mymg = document.getElementById("myimg"); //获取图片对象
    mymg.onload = function() { //需要等照片执行完全之后，在进行执行这张图片的加载
        b.drawImage(mymg, 30, 30); //图片的名字，图片的左上角的位置
    }

用文件内部的图片进行渲染：

    var mymg = new Image(); //建立一个新的图片
    mymg.src = "../img/005.jpg"; //新图片的路径
    mymg.onload = function() { //需要等照片执行完全之后，在进行执行这张图片的加载
        b.drawImage(mymg, 0, 0);
    }

笑脸制作：

    b.beginPath(); //开始画圆圈
    b.arc(300, 300, 200, 0, (Math.PI / 180) * 360, false);
    b.closePath(); //结束画图
    b.stroke(); //进行路径填充
    b.beginPath();
    b.arc(200, 250, 40, 0, (Math.PI / 180) * 180, true);
    b.arc(200, 250, 40, (Math.PI / 180) * 180, 0, false);
    b.closePath();
    b.stroke();
    b.beginPath();
    b.arc(400, 250, 40, 0, (Math.PI / 180) * 180, true);
    b.arc(400, 250, 40, (Math.PI / 180) * 180, 0, false);
    b.closePath();
    b.stroke();
    b.beginPath();
    b.arc(300, 350, 40, 0, (Math.PI / 180) * 180, false);
    b.arc(300, 350, 40, (Math.PI / 180) * 180, 0, true);
    b.closePath();
    b.stroke();

设置渲染到画布上的大小：

    var mymg = new Image(); //建立一个新的图片
    mymg.src = "../img/005.jpg"; //新图片的路径
    mymg.onload = function() { //需要等照片执行完全之后，在进行执行这张图片的加载
        b.drawImage(mymg, 30, 30, 1000, 500); //设置渲染到画布上的大小
    }

图形切片：

    var mymg = new Image(); //建立一个新的图片
    mymg.src = "../img/005.jpg"; //新图片的路径
    mymg.onload = function() { //需要等照片执行完全之后，在进行执行这张图片的加载
        b.drawImage(mymg, 0, 0, 1000, 1000, 0, 0, 500, 500); //先切原图片，再进行渲染到画布上。
    }

线性渐变：

   var c = b.createLinearGradient(0, 0, 500, 500); //设置起始点和终止点
    c.addColorStop(0, 'red'); //进行颜色设置，(0-1是从起始点到终止点)
    c.addColorStop(.5, 'rgb(0,255,0)');
    c.addColorStop(1, "rgb(0,0,255)");
    b.fillStyle = c; //设置填充颜色样式，用设置的样式进行颜色填充
    b.fillRect(0, 0, 1000, 500); //画布的展示大小

径向渐变：

   var c = b.createRadialGradient(200, 200, 50, 200, 200, 180); //前三个是内部的圆圈的设置，后三个是最外部的圆圈的设置
    c.addColorStop(0, 'rgb(255,0,0)'); //进行颜色的设置
    c.addColorStop(0.5, 'rgb(0,255,0)');
    c.addColorStop(1, 'rgb(0,0,255)');
    b.fillStyle = c; //设置填充颜色样式，用设置的样式进行颜色填充
    b.fillRect(0, 0, 400, 400); //画布的展示大小

矩形：

    b.lineWidth = 1; //线条宽度，默认是1.0，值必须大于0，较宽的线条在路径上居中，每边各有线宽的一半
    b.fillStyle = "red"; //设置矩形颜色
    b.fillRect(0, 0, 200, 200); //填充矩形(x,y,宽度，高度)
    b.strokeStyle = "#333"; //设置填充的颜色
    b.strokeRect(250, 250, 200, 200); //画矩形(x,y,宽度，高度)

三角形：

   b.beginPath(); //路径开始
    b.moveTo(50, 0); //移动画笔到(x,y)坐标
    b.lineTo(0, 50); //使用直线连接当前端点和指定坐标(x,y)
    b.lineTo(100, 50);
    b.closePath(); //闭合路径(只有闭合路径才生成三角形)
    b.fillStyle = "#333"; //设置填充颜色样式
    b.fill(); //填充灰色
    b.stroke(); //画边框

房子和成绩表：

    a.beginPath(); //路径开始
    a.moveTo(50, 0);
    a.lineTo(0, 40);
    a.lineTo(100, 40);
    a.closePath(); //闭合路径(只有闭合路径才生成三角形)
    a.stroke(); //画边框
    //房子外框
    a.beginPath();
    a.moveTo(12.5, 40);
    a.lineTo(12.5, 120);
    a.lineTo(87.5, 120);
    a.lineTo(87.5, 40);
    a.closePath();
    a.stroke();
    //门
    a.beginPath();
    a.moveTo(50, 120);
    a.lineTo(60, 120);
    a.lineTo(60, 80);
    a.lineTo(40, 80);
    a.lineTo(40, 120);
    a.closePath();
    a.stroke();
    a.beginPath();
    a.moveTo(50, 120);
    a.lineTo(50, 80);
    a.closePath();
    a.stroke();
    //窗户
    a.beginPath();
    a.moveTo(70, 60);
    a.lineTo(70, 70);
    a.lineTo(80, 70);
    a.lineTo(80, 60);
    a.closePath();
    a.stroke();
    a.beginPath();
    a.moveTo(20, 60);
    a.lineTo(20, 70);
    a.lineTo(30, 70);
    a.lineTo(30, 60);
    a.closePath();
    a.stroke();
    //烟囱
    a.beginPath();
    a.moveTo(75, 5);
    a.lineTo(75, 20);
    a.lineTo(85, 29);
    a.lineTo(85, 5);
    a.closePath();
    a.fillStyle = "#333";
    a.fill();
    a.stroke();
    //坐标轴
    a.beginPath();
    a.moveTo(130, 20);
    a.lineTo(130, 120);
    a.lineTo(230, 120);
    a.lineCap = "round";
    a.stroke();
    //红80%
    a.beginPath();
    a.moveTo(140, 40);
    a.lineTo(140, 120);
    a.lineTo(160, 120);
    a.lineTo(160, 40);
    a.closePath();
    a.fillStyle = "#f00"; //填充颜色
    a.fill(); //填充红色
    a.stroke();
    //绿70%
    a.beginPath();
    a.moveTo(170, 50);
    a.lineTo(170, 120);
    a.lineTo(190, 120);
    a.lineTo(190, 50);
    a.closePath();
    a.fillStyle = "#0f0"; //填充颜色
    a.fill(); //填充绿色
    a.stroke();
    //蓝75%
    a.beginPath();
    a.moveTo(200, 45);
    a.lineTo(200, 120);
    a.lineTo(220, 120);
    a.lineTo(220, 45);
    a.closePath();
    a.fillStyle = "#00f"; //填充颜色
    a.fill(); //填充蓝色
    a.stroke();
    //数字
    a.fillStyle = "#333"; //设置填充颜色
    a.font = "13px 宋体"; //设置字体大小和字体类型
    a.fillText("100%", 120, 18); //写字
    a.fillText("80%", 140, 37); //写字
    a.fillText("70%", 170, 47); //写字
    a.fillText("75%", 200, 42); //写字
    a.fillText("1班", 140, 135); //写字
    a.fillText("2班", 170, 135); //写字
    a.fillText("3班", 200, 135); //写字

 

直线：

    b.beginPath();
    b.moveTo(10, 80);
    b.lineTo(100, 80);
    b.lineWidth = 10; //线条的宽度
    b.lineCap = "round"; //线头的形状(butt,round,square,默认是butt)
    b.stroke();