HTML5标签-----<canvas>_canvas标记-CSDN博客

本文链接：https://blog.csdn.net/Betty_Wu1/article/details/82684916

Convas画布：

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）

<body>
  <!--注意：在标签上设置的宽高就是原始宽高  Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）-->
    <canvas id='mycan' width="300" height="300" style="border:1px solid black"></canvas>
</body>

   var can = document.getElementById("mycan");
    //    1.设置画布的类型 一般为2d，必填
   var hb = can.getContext('2d');

1.矩形

//   画矩形
        hb.fillStyle="red";//矩形内容填充的颜色
        hb.fillRect(0,0,150,75)//fillRect(a,b,c,d)---->a,b表示#mycan中的x,y值；c,d表示宽高
        //    矩形框填充
        hb.strokeStyle='blue';//矩形框的颜色
        hb.lineWidth=3;//矩形的粗细
        hb.strokeRect(50,50,100,100)//矩形框的位置及宽高*/

2.圆

        hb.arc(100,75,50,0,2*Math.PI);//画一个圆形路径 arc(a,b,c,d,e)-->a,b表示x,y值，c表示半径，d为起始角，e为结束角
        hb.stroke();//把圆形填充到画布上

        //实体填充
        hb.fillStyle="red";//实体颜色
        hb.fill();//实体填充到画布

        //线框
        hb.strokeStyle='black';//把画出来的路径框填充为黑色
        hb.lineWidth=3;//设置线框的粗细
        hb.stroke();//线框填充到画布上*/

3.画路径

    hb.beginPath();//开始路径 表示开始画线了
    hb.moveTo(100, 100);//设置开始画路径的第一个坐标（x,y）
    hb.lineTo(200, 100);//设置 线条绘制结束坐标
    hb.strokeStyle = 'red';
    hb.lineWidth = 4;
    hb.lineJoin = 'bevel';//设置拐角类型 bevel--斜角；round--圆角 miter--	默认创建尖角
    hb.lineTo(200, 100);//
    hb.lineTo(200, 200);
    hb.lineTo(100, 200);//设置 线条绘制结束坐标
    hb.lineTo(100, 100);//设置 线条绘制结束坐标
    hb.closePath();
    hb.stroke();//把路径填充到 画布

    hb.fillStyle = 'pink';//设置实体颜色
    hb.fill()//把实体填充到画布

4.字体设置

//    实体字体
    hb.font='bold italic 40px Arial';//设置字体
    hb.fillStyle='red';//设置字体颜色
    hb.fillText('前端开发',0,40);//设置字符串，字符串放置的坐标点

//    (虚型)线条字体
    hb.strokeStyle='blue';
    hb.lineWidth=3;
    hb.strokeText('前端开发',0,40)

手册URL：http://www.w3school.com.cn/tags/canvas_arc.asp