H5C3 06-绘图

1.canvas绘图

canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。

  浏览器不兼容问题

<canvas id="cavsElem">       你的浏览器不支持canvas，请升级浏览器 </canvas>

2.绘制直线

    1.获取元素   var canvas = document.querySelector('#can');

    2.获取画笔   var myCan=canvas.getContext('2d');

    3.定义一个起点   myCan.moveTo(200,200);

    4.绘制直线         myCan.lineTo(200,600);

    5填充图形        myCan.stroke();

   6.路径的开始和闭合   

       //开始路径： cxt.beginPath();

      //闭合路径： cxt.closePath();

解释：如果绘制路径比较复杂，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。

beginPath: 核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径，跟之前的绘制的墨迹可以进行分开样式设置和管理。

closePath: 如果需要闭合，必须写在stroke()之前，才会起作用。

7.画笔的颜色和粗细

在绘制之前，还可以对画笔的颜色和粗细进行设置进行设置，方法如下：

//语法：
cxt.strokeStyle = “#ff0000”;
cxt.lineWidth = 4;  //值为不带单位的数字，并且大于0

8.填充图形(fill)

//语法：
cxt.fill();
//语法：
cxt.fileStyle = “#0000ff”;

解释：对已经画好的图形进行填充颜色。

在填充之前，可以对所填充的颜色进行设置

 总结canvas绘制的基本步骤：

第一步：获得上下文（笔） =>canvasElem.getContext('2d');

第二步：开始路径规划 =>cxt.beginPath();

第三步：移动起始点 =>cxt.moveTo(x, y);

第四步：绘制线(线条、矩形、圆形、图片...) =>cxt.lineTo(x, y);

第五步：闭合路径 =>cxt.closePath();

第六步：绘制描边 =>cxt.stroke();

案例：通过上面所学的方法绘制一个三角形。

<canvas id="mcanvas">你的浏览器不支持canvas，请升级浏览器</canvas>
    <script>        
        var mcanvas  = document.getElementById("mcanvas");  //获得画布
        var cxt = mcanvas.getContext("2d"); //获得上下文
        mcanvas.width = 900;     //重新设置标签的属性宽高
        mcanvas.height = 600;    //千万不要用 canvas.style.height
​
        //绘制三角形
        cxt.beginPath();        //开始路径
        cxt.moveTo(100,100);    //三角形，左顶点
        cxt.lineTo(300, 100);   //右顶点
        cxt.lineTo(300, 300);   //底部的点
        cxt.closePath();        //结束路径
        cxt.stroke();           //描边路径
​
    </script>

2 绘制矩形（rectangle）

---

2.1.快速创建矩形rect()方法

语法：cxt.rect(x, y, width, height);

• 解释：x, y是矩形左上角坐标， width和height都是以像素计算

• rect方法只是规划了矩形的路径，并没有填充和描边。

 <canvas id="can" width="800" height="800">你当前浏览器不支持，请更新浏览器</canvas>
    <script>
        // myCan.strokeStyle = "springgreen"; //画笔名.strokeStyle="颜色"
        // myCan.lineWidth=5; //画笔名.lineWidth="粗细(数字)"

        //    1获取元素
        var canvas = document.querySelector('#can');
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);//打印出来是一个集合
        
        //快速创建矩形: myCan.rect(X, Y, width, height);
        myCan.rect(200,200,400,100);
        myCan.strokeStyle="pink";
        myCan.lineWidth=10;
        // 5填充图形
        myCan.stroke();
    </script>

2.2.创建描边矩形

语法：cxt.strokeRect(x, y, width, height);

参数跟rect(x, y, width, height)相同，注意此方法绘制完路径后立即进行stroke绘制,绘制矩形（无填充）。

<canvas id="can" width="800" height="800">你当前浏览器不支持，请更新浏览器</canvas>
    <script>

        //    1获取元素
        var canvas = document.querySelector('#can');
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);//打印出来是一个集合
        
        //快速创建矩形: myCan.strokeRect(X, Y, width, height);
        myCan.strokeRect(200,200,400,100);
    </script>

2.3.创建填充矩形

语法：cxt.fillRect(x, y, width, height);

参数跟rect(x, y, width, height)相同， 此方法执行完成后，立即对当前矩形进行fill填充,绘制"被填充"的矩形。

 

 <canvas id="can" width="800" height="800">你当前浏览器不支持，请更新浏览器</canvas>
    <script>

        //    1获取元素
        var canvas = document.querySelector('#can');
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);//打印出来是一个集合
        
        //快速创建矩形: myCan.strokeRect(X, Y, width, height);
        myCan.fillStyle="pink";
        myCan.fillRect(200,200,400,100);
    </script>

2.4.清除矩形（clearRect）

 语法：cxt.clearRect(x, y, width, hegiht);

解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

 <canvas id="can" width="800" height="800">你当前浏览器不支持，请更新浏览器</canvas>
    <script>

        //    1获取元素
        var canvas = document.querySelector('#can');
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);//打印出来是一个集合
        myCan.rect(200,300,100,100);
        // 画笔颜色
        myCan.strokeStyle="pink";
        // 画笔粗细
        myCan.lineWidth=10;

        // 填充颜色
        myCan.fillStyle="yellow";
        myCan.fill();

        myCan.clearRect(480, 400, 50, 50);
        myCan.stroke();
    </script>

2.5 绘制圆弧

---

arc() 方法用于创建弧线（用于创建圆或部分圆）。

语法：cxt.arc(x, y, r, startAngle, endAngle, counterclockwise);

解释：

x,y：圆心坐标。

r：半径大小。

sAngle:绘制开始的弧度。 圆心到最右边点是0度，顺时针方向弧度增大。

eAngel:结束的弧度，注意是弧度，不是角度。

counterclockwise：是否是逆时针，默认是false。true是逆时针，false：顺时针

注意：弧度和角度的转换公式： rad = deg*Math.PI/180; deg=rad*180/Math.PI

 <canvas id="can" width="800" height="800">你当前浏览器不支持，请更新浏览器</canvas>
    <script>

        //    1获取元素
        var canvas = document.querySelector('#can');
        // 2.获取画笔
        var myCan = canvas.getContext('2d');
        console.log(myCan);//打印出来是一个集合

        // 开始路径
        myCan.beginPath();
        myCan.moveTo(400,400);
        var start=0*Math.PI/180;
        var end = 90 * Math.PI / 180;
        myCan.arc(400,400,200,start,end,true);
        myCan.closePath();
        //填充图形
        myCan.fillStyle = "pink";
        myCan.fill();

        myCan.stroke();
    </script>

 

三角函数的补充：

 Math.sin(弧度); //夹角对面的边和斜边的比值
 Math.cos(弧度); //夹角侧边与斜边的比值

圆形上面的点的坐标的计算公式

X坐标 = x0 + Math.cos(rad) * r; //x0和y0是圆心点坐标,r是半径
Y坐标 = y0 + Math.sin(rad) * r; //注意都是弧度

2.6 绘制文字

 

1.填充文本

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

        // 创建元素
        var img = document.createElement("img");
        img.src = "./img/toux.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, 200, 100, 100, 100, 0, 0, 600, 600)
            mycan.fillStyle = "orange";
            mycan.font = "20px 华文彩云"
            mycan.fillText("哈哈", 60, 140);
        }
    </script>