canvas绘图

创建画布

---

在页面中创建canvas元素与创建其他元素一样，只需要添加一个<canvas>标记即可。该元素默认的宽高为300*150，可以通过元素的width属性和height属性改变默认的宽高。

<!-- 画布具有默认宽高 -->
    <canvas class="can" width="800" height="800">

canvas坐标系

在开始绘制任何图像之前，我们先讲一下canvas的坐标系。canvas坐标系是以左上角0,0处为坐标原点，水平方向为x轴，向右为正；垂直方向为y轴，

//语法：
cxt.moveTo(x, y); 

绘制线径

首先，获取canvas元素，然后调用元素的getContext(“2d”)方法，该方法返回一个CanvasRenderingContext2D对象，CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数，使用该对象就可以在画布上绘图了。

• 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置。

• 参数：x,y 都是相对于 canvas坐标系的原点（左上角）。

• 注意： 绘制线段前必须先设置起点，不然绘制无效。如果不进行设置，就会使用lineTo的坐标当作moveTo

• 解释：从上一步设置的绘制起点绘制一条直线到(x, y)点。

• 参数：x,y 目标点坐标。

• 路径的开始和闭合**

 <script>
        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);

        // 3.定义一个起点（绘制一个起点）
        // moveTo(x,y) 用来绘制起点
        myCan.moveTo(200, 200);

        // 4.绘制直线
        // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
        myCan.lineTo(600, 600);

        // 5.填充图形
        myCan.stroke();
    </script>

绘制矩形（rectangle）

<script>
        // console.log(can);
        // 1.获取元素
        var canvas = document.querySelector("#can");
        // 2.获取画笔
        var myCan = canvas.getContext('2d');

        // myCan.rect(x, y, width, height);
        myCan.rect(200, 200, 400, 100);
        myCan.strokeStyle = "pink";
        myCan.lineWidth = 10;
        // 填充
        myCan.stroke();
    </script>

绘制圆形和饼图

    <canvas id="can" width="800" height="800"></canvas>
    <script>

        var can = document.querySelector('#can');
        // 获取画笔
        var mycan = can.getContext('2d');
        // 弧度和角度的转换公式： rad = deg*Math.PI/180; deg=rad*180/Math.PI
        // 语法：cxt.arc(x, y, r, startAngle, endAngle, counterclockwise);

        // 开始路径
        mycan.beginPath();
        mycan.moveTo(400,400);
        var strat = 0 * Math.PI / 180;
        var end = 90 * Math.PI / 180;
        // mycan.arc(400, 400, 200, strat, end, false);
        mycan.arc(400, 400, 200, strat, end, true);
        // 结束路径
        mycan.closePath();
        mycan.stroke();
    </script>

 <canvas id="can" width="800" height="800"></canvas>
    <script>
        var mycan = can.getContext("2d");
        console.log(mycan);


        // 通过数据进行绘制饼图
        var data = [{
            "value": .2,
            "color": "red",
            "title": "应届生"
        }, {
            "value": .3,
            "color": "blue",
            "title": "社会招生"
        }, {
            "value": .4,
            "color": "green",
            "title": "老学员推荐"
        }, {
            "value": .1,
            "color": "pink",
            "title": "公开课"
        }];

        // arc(x,y,r,s,e,t)
        // for
        // 开始弧度
        var stratA = 0;
        // 结束弧度
        var endA = 0;
        // 圆心
        var x = 400;
        var y = 400;
        // 半径
        var r = 200;

        // 弧度和角度的转换公式： rad = deg*Math.PI/180; deg=rad*180/Math.PI
        for (var i = 0; i < data.length; i++) {
            // 每一分数据的 占用的 弧度
            // (data[i].value * 360) * Math.PI / 180
            // 1.开始路径
            mycan.beginPath();
            // 2.绘制起点
            mycan.moveTo(400, 400);
            // 3.根据 value 计算 每条数据所占用的弧度
            var rads = (data[i].value * 360) * Math.PI / 180;
            // 72
            console.log(rads);
            // 4.求出一个结束弧度
            // 72     0     72
            // 180       72   108
            endA = endA + rads;
            //                   72     72
            mycan.arc(x, y, r, stratA, endA);
            mycan.closePath();
            mycan.stroke();
            mycan.fillStyle = data[i].color;
            mycan.fill();
            // 每一份数据的开始弧度 就是 上一份数据的结束弧度
            stratA = endA;
        }
        // 扩展
        mycan.fillStyle = "black";
        mycan.font = "700 30px serif";
        mycan.fillText(data[0].title, 450, 500);
        mycan.fillText(data[1].title, 300, 500);
        mycan.fillText(data[2].title, 300, 300);
        mycan.fillText(data[3].title, 500, 360);
    </script>

绘制文字

 <canvas id="can" width="600" height="600"></canvas>
    <!-- <img src="../img/1.png" alt=""> -->
    <script>
        //  cxt.drawImage(img,x,y,width,height);
        var mycan = can.getContext("2d");

        // 创建元素
        var img = document.createElement("img");
        img.src = "../img/1.png";

        // onload 等待内容 资源文件加载完毕之后执行
        img.onload = function () {
            // mycan.drawImage(img, 0, 0, 600, 600);

            // 9参数可以对 图片进行裁剪
            // sx,sy            裁剪图片的位置 
            // swidth,sheight   裁剪大小
            // x,y,             裁剪之后显示在画布内的方位
            // width,height     裁剪之后显示在画布内的大小
            // cxt.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
            // 先裁剪 然后规定现在画布内的大小
            mycan.drawImage(img, 330, 240, 100, 100, 0, 0, 600, 600)
            mycan.fillStyle = "orange";
            mycan.font = "20px 华文彩云"
            mycan.fillText("", 60, 140);
        }
    </script>