canvas基本用法

短命女 2022-03-18 03:18 305阅读 0赞

> canvas是一个强大的绘图及制作动画和游戏手段，下面介绍canvas利用js的API实现基本画图功能。

划线：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <canvas id="can"></canvas>
    <script>
        //获取canvas元素
        var can=document.getElementById("can");
        //动态的设置宽和高
        //获取屏幕的可视区域宽高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;
        //操作canvas
        //转化为2d模式
        var content=can.getContext("2d");
        //使用js提供的API去绘制
    
        /*1.绘制线条*/
            /*设置线宽*/
        content.lineWidth=10;
            /*设置颜色*/
        content.strokeStyle="red";
            //画线的坐标
        content.moveTo(0,0);//起始坐标
        content.lineTo(400,400);//终止坐标
        content.stroke();//执行划线
        content.beginPath();//清空子路径，创建开始路径
        content.lineWidth=1;//线宽
        content.fillStyle="pink";//填充颜色
        content.strokeStyle="blue";//线的颜色
        content.moveTo(400,400);//起始位置
        content.lineTo(0,400);//终止位置
        content.lineTo(0,600);//终止位置（这样才会用到填充）
        content.stroke();//执行划线
        content.fill();//执行填充
        content.closePath();//闭合
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

画板：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 1][]

绘制矩形：

//获取canvas元素
        var can=document.getElementById("can");
        //动态的设置宽和高
        //获取屏幕的可视区域宽高
        var window_w=document.documentElement.clientWidth;
        var window_h=document.documentElement.clientHeight;
        can.width=window_w;
        can.height=window_h;
        //操作canvas
        //转化为2d模式
        var content=can.getContext("2d");
    
        //绘制矩形
        content.fillStyle="red";
        content.lineWidth=3;
        content.strokeStyle="blue";
        content.strokeRect(200,200,400,200);//绘制矩形框
        content.fillRect(200,200,400,200);//填充矩形
    
        //清除
        content.clearRect(300,300,10,10);//相当于矩形状的橡皮擦

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 2][]

绘制圆：（主要代码）

//绘制圆
        content.beginPath();
        content.strokeStyle="green";
        content.fillStyle="green";
        content.arc(700,350,200,0,Math.PI,true);//参数为 圆心坐标（x，y）、半径、起始角度、终止角度、是否逆时针
        content.fill();
        content.closePath();
        content.beginPath();
        content.fillStyle="red";
        content.arc(700,400,150,0,Math.PI*2,true);
        content.fill();
        content.closePath();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220318/020e0de5d91048ca978e24415b338314.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 1]: /images/20220318/64eacfbfea544bf5a2b147ed1c0355b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 2]: /images/20220318/126795f4148c4e1a8b897321eb72ba16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 3]: /images/20220318/32ae0f3fb1c44039a3cb8bf77aced86e.png