canvas

时光浅止

于 2024-10-14 10:48:41 发布

阅读量1.6k

点赞数 14

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_45086164/article/details/142911546

版权

官方文档

Canvas 坐标系

Canvas 使用笛卡尔坐标系来定义绘图区域内的位置。默认情况下，原点 (0, 0) 位于画布的左上角。这意味着：

X 轴：从左向右增加，即向右移动 X 坐标值会增大。
Y 轴：从上向下增加，即向下移动 Y 坐标值会增大。
(x, y) 定义了矩形的起始位置，宽度和高度定义了矩形的大小和方向，矩形总是从左上角向右下方扩展。

绘制填充矩形 fillRect

在 (100, 100) 位置绘制一个宽 300 像素、高 200 像素的矩形
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400">
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制图形
        //3.1绘制矩形fillRect(位置x,位置y,宽度，高度)
        ctx.fillRect(100,100,300,200); //在 (100,100) 位置绘制一个宽 300 像素、高 200 像素的矩形

    </script>
</body>
</html>

绘制路径矩形 rect

fill填充路径 stroke显示路径
模拟画布清除clearRect 效果从上往下清除画布路径绘制矩形开始和结束画笔 beginPath()和closePath()可以完成路径的分段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制图形
        //3.1绘制矩形fillRect(位置x,位置y,宽度，高度)
        // ctx.fillRect(100,100,300,200);  //在 (100,100) 位置绘制一个宽 300 像素、高 200 像素的矩形
        //3.2路径绘制矩形strokeRect(位置x,位置y,宽度，高度)

        //beginPath和closePath可以完成路径的分段
        // ctx.strokeRect(100,100,200,100);
        //拆开写法 路径绘制矩形
        ctx.beginPath();//开始路径
        ctx.rect(100,100,200,100)
        //显示路径
        ctx.stroke()
        ctx.closePath();//结束路径

        // ctx.fillRect(200,150,200,100);
        //拆开写法 绘制矩形
        ctx.beginPath();//开始路径
        ctx.rect(200,150,200,100)
        //填充路径
        ctx.fill()
        ctx.closePath();//结束路径   如果不写开始和结束路径 会默认最后一个填充路径
        //清除画布 从0,0 开始清除到画布的宽度和高度
        // ctx.clearRect(0,0,c1.clientWidth,c1.clientHeight);
        let height=0;
        let t1=setInterval(()=>{
            height++;
            ctx.clearRect(0,0,c1.clientWidth,height);
            if(height>c1.clientHeight){
                clearInterval(t1);
            }
        },10);
    </script>
</body>
</html>

绘制圆弧 arc

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制图弧  arc是绘制图弧 的方法 ctx.arc(位置x,位置y,半经，开始的角度，结束的角度,逆时针还是顺时针默认是顺时针false,设置逆时针的时候为true)
        ctx.arc(300,200,50,0,  Math.PI/2,true);
        // ctx.fill();
        ctx.stroke();
    </script>
</body>
</html>

练习：绘制笑脸
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制一张脸
        ctx.beginPath();//开始路径
        ctx.arc(75,75,50,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath();//结束路径
        //绘制嘴巴
        ctx.beginPath();//开始路径
        ctx.arc(75,75,35,0,Math.PI)
        ctx.stroke()
        ctx.closePath();//结束路径
        //绘制左眼
        ctx.beginPath();//开始路径
        ctx.arc(60,65,5,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath();//结束路径
        //绘制右眼
        ctx.beginPath();//开始路径
        ctx.arc(90,65,5,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath();//结束路径
       
    </script>
</body>
</html>

使用moveTo来移动点 可以绘制一条不连续的路径
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制一张脸
        ctx.beginPath();//开始路径
        ctx.arc(75,75,50,0,Math.PI*2)
       
        //绘制嘴巴
        //使用moveTo可以绘制一条不连续的路径
        ctx.moveTo(110,75)
        ctx.arc(75,75,35,0,Math.PI)
       
        //绘制左眼
        ctx.moveTo(65,65)
        ctx.arc(60,65,5,0,Math.PI*2)
       
        //绘制右眼
        ctx.moveTo(95,65)
        ctx.arc(90,65,5,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath();//结束路径
       
    </script>
</body>
</html>

绘制线段 lineTo

三角形
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制线段  三角形
        ctx.beginPath();//开始路径
        ctx.moveTo(300,200);
        ctx.lineTo(350,250);
        ctx.lineTo(350,200);
        ctx.lineTo(300,200);
        ctx.stroke();//显示路径
        ctx.closePath();//结束路径

        ctx.beginPath();//开始路径
        ctx.moveTo(200,100);
        ctx.lineTo(250,150);
        ctx.lineTo(250,100);
        ctx.lineTo(200,100);
        ctx.fill();//填充
        ctx.closePath();//结束路径
    </script>
</body>
</html>

绘制圆弧arcTo

ctx.arcTo(x1, y1, x2, y2, radius);
创建的圆弧是从当前路径的最后一个点（即起点）开始，经过第一个控制点，直到到达第二个控制点。圆弧是在一个与起点、第一个控制点和第二个控制点都相切的圆上绘制的，同时这个圆的半径由参数 radius 指定
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制圆弧
        ctx.beginPath();//开始路径
        //第一点
        ctx.moveTo(300,200)
        //第二个点和第三个点，以及圆弧的半径
        ctx.arcTo(300,250,250,250,25)
        ctx.stroke()
        ctx.closePath();//结束路径

        ctx.beginPath();//开始路径
        ctx.moveTo(300,200)
        //第二个点和第三个点，以及圆弧的半径
        ctx.arcTo(300,250,250,250,50)
        ctx.stroke()
        ctx.closePath();//结束路径
    </script>
</body>
</html>

二次贝塞尔曲线 quadraticCurveTo

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制圆弧
        ctx.beginPath();//开始路径
        //第一点 起点
        ctx.moveTo(200,300)
        //quadraticCurveTo(cpx, cpy, x, y); cpx, cpy：控制点的位置。 x, y：曲线的终点位置。
        ctx.quadraticCurveTo(150,300,150,200);
        ctx.quadraticCurveTo(150,100,300,100);
        ctx.quadraticCurveTo(450,100,450,200);
        ctx.quadraticCurveTo(450,300,250,300);
        ctx.quadraticCurveTo(250,350,150,350);
        ctx.quadraticCurveTo(200,350,200,300);
        ctx.stroke()
        ctx.closePath();//结束路径
    </script>
</body>
</html>

三次贝塞尔曲线 bezierCurveTo

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制圆弧
        ctx.beginPath();//开始路径
        //第一点 起点
        ctx.moveTo(300,200)
        //bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);cp1x, cp1y：第一个控制点的位置。cp2x, cp2y：第二个控制点的位置。x, y：曲线的终点位置。
        ctx.bezierCurveTo(350, 150, 400, 200, 300, 250);
        ctx.bezierCurveTo(200, 200, 250, 150, 300, 200);
        ctx.stroke()
        ctx.closePath();//结束路径
    </script>
</body>
</html>

封装路径new Path2D

少写开始和结束路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);

        var heartPath=new Path2D();
        //3，绘制圆弧
        //第一点 起点
        heartPath.moveTo(300,200)
        //bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);cp1x, cp1y：第一个控制点的位置。cp2x, cp2y：第二个控制点的位置。x, y：曲线的终点位置。
        heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250);
        heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200);
        ctx.stroke(heartPath)
        ctx.fill(heartPath)
        //创建一条折线
        var polyline=new Path2D("M10 10 h 80 v 80 h -80 z")
        ctx.stroke(polyline)
    </script>
</body>
</html>

设置颜色 strokeStyle路径颜色 fillStyle填充颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);

        var heartPath=new Path2D();
        //3，绘制圆弧
        //第一点 起点
        heartPath.moveTo(300,200)
        //bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);cp1x, cp1y：第一个控制点的位置。cp2x, cp2y：第二个控制点的位置。x, y：曲线的终点位置。
        heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250);
        heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200);

        //设置颜色
        ctx.strokeStyle="#ff00ff"
        ctx.stroke(heartPath)
         //搭配使用
        ctx.fillStyle="rgba(0,0,255,0.1)"
        ctx.fill(heartPath)
       
        //创建一条折线
        var polyline=new Path2D("M10 10 h 80 v 80 h -80 z")
        //设置颜色
       
        ctx.fillStyle="red"
        ctx.fill(polyline)
        //搭配使用
        ctx.strokeStyle="#ffff00"
        ctx.stroke(polyline)
    </script>
</body>
</html>

线型渐变 createLinearGradient

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制
        // let linearGradient=ctx.createLinearGradient(100,200,400,500);//创建线型渐变 起点到终点方向
        // linearGradient.addColorStop(0,"red")
        // linearGradient.addColorStop(0.3,"#ffcccc")
        // linearGradient.addColorStop(1,"blue")
        // ctx.fillStyle=linearGradient;
        // ctx.fillRect(100,200,300,300)
        let index=0
        function render(){
            ctx.clearRect(0,0,600,400)
            index+=0.01;
            if(index>1){
                index=0;
            }
            let linearGradient=ctx.createLinearGradient(100,200,400,500);//创建线型渐变 起点到终点方向
            linearGradient.addColorStop(0,"red")
            linearGradient.addColorStop(index,"#ffcccc")
            linearGradient.addColorStop(1,"blue")
            ctx.fillStyle=linearGradient;
            ctx.fillRect(100,200,300,300);
            requestAnimationFrame(render)
        }
        requestAnimationFrame(render);
    </script>
</body>
</html>

径向渐变 createRadialGradient

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制
        let linearGradient=ctx.createRadialGradient(300,200,0,300,200,100);//创建径向渐变 第一个圆位置半径 第二个圆位置半径
        linearGradient.addColorStop(0,"red")
        linearGradient.addColorStop(0.3,"#ffcccc")
        linearGradient.addColorStop(1,"blue")
        ctx.fillStyle=linearGradient;
        ctx.fillRect(0,0,600,400)
    </script>
</body>
</html>

圆锥渐变 createConicGradient

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制
        let linearGradient=ctx.createConicGradient(Math.PI/4,300,200);//创建圆锥渐变 角度  中心位置
        linearGradient.addColorStop(0,"red")
        linearGradient.addColorStop(0.3,"#ffcccc")
        linearGradient.addColorStop(1,"blue")
        ctx.fillStyle=linearGradient;
        ctx.fillRect(0,0,600,400)
    </script>
</body>
</html>

图案样式createPattern

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，创建图案样式pattern
        let img=new Image();
        img.src="https://img0.baidu.com/it/u=3948471400,52738234&fm=253&fmt=auto?w=136&h=139"
        //加载图片
        img.onload=function(){
            //创建图案对象createPattern(图片对象(可以是image对象也可以是canvas对象)，重复方式no-repeat,repeat,repeat-x,repeat-y)
            var pattern=ctx.createPattern(img,"no-repeat")
            ctx.fillStyle=pattern;
            ctx.fillRect(0,0,600,400)
        }
    </script>
</body>
</html>

线型样式 lineCap lineJoin lineWidth

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        let index=0
        function render(){
               ctx.clearRect(0,0,600,400)
               index++
               if(index>40){
                index=0
               }
                 //3，绘制
                ctx.moveTo(150,150)
                ctx.lineTo(300,200)
                ctx.lineTo(450,150)
                //设置线条样式
                ctx.lineWidth=1
                //设置线条端点样式 butt 平齐  round半圆  square正方向
                ctx.lineCap="square"
                //设置两个线段连接处样式 mitter外侧相连的角  round角被磨圆了  bevel哲平效果
                ctx.lineJoin="mitter"
                //对斜接面进行限制
                ctx.miterLimit=5

                //设置虚线
                ctx.setLineDash([20,20])
                //设置偏移
                ctx.lineDashOffset=index;

                ctx.stroke();
                requestAnimationFrame(render)
        }
        render()
    </script>
</body>
</html>

阴影 shadowOffsetX shadowBlur

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);

        var heartPath=new Path2D();
        //设置阴影
        ctx.shadowOffsetX=10  //偏移X轴位置
        ctx.shadowOffsetY=10//偏移Y轴位置
        ctx.shadowBlur=5 //模糊强度
        ctx.shadowColor="rgba(255,100,100,1)"
        //3，绘制圆弧
        //第一点 起点
        heartPath.moveTo(300,200)
        //bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);cp1x, cp1y：第一个控制点的位置。cp2x, cp2y：第二个控制点的位置。x, y：曲线的终点位置。
        heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250);
        heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200);
        // ctx.stroke(heartPath)
        ctx.fill(heartPath)
        //创建一条折线
        var polyline=new Path2D("M10 10 h 80 v 80 h -80 z")
       
        ctx.stroke(polyline)
    </script>
</body>
</html>

绘制图片的三种模式 drawImage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);

        //获取图片 2506*1280 图片尺寸
        let img=new Image()
        img.src="https://pic.rmb.bdstatic.com/bjh/cab573e6557634f75e5e365de12c25a56577.jpeg@h_1280"
        img.onload=function(){
            //第一种绘制图片的方式,参数一为图片对象，参数二将图片渲染到画布的水平位置，参数三将图片渲染到画布的垂直位置
            // ctx.drawImage(img,0,0);
            //第二种绘制图片的方式，参数一为图片对象，参数二将图片渲染到画布的水平位置，参数三将图片渲染到画布的垂直位置
            //参数4将图片缩放到对应的宽度，参数5将图片缩放到对应的高度
            // ctx.drawImage(img,0,0,600,400);
            //第三种绘制图片的方式 ,参数一为图片对象，img参数后面四个参数分别为源图片上面你要裁剪的起点位置和矩形的宽高，
            //后面四个参数分别为画布的位置和要渲染的矩形宽高
            ctx.drawImage(img,640,0,1280,720,0,0,600,400);
        }
    </script>
</body>
</html>

绘制动态视频并添加水印 drawImage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <video src="./dong.mp4" controls hidden></video>
    <button id="btn">播放/暂停</button>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);

        //获取视频
        var video=document.querySelector("video")
       
        var btn=document.getElementById("btn")
        btn.onclick=function(){
            if(video.paused){
                video.play()
                render()
            }else{
                video.pause()
            }
        }
        //logo对象
        let img=new Image()
        img.src="./1.png"
        function render(){
            ctx.drawImage(video,0,0,600,400)
            ctx.drawImage(img,500,350,100,50);//添加照片水印
            requestAnimationFrame(render)
        }
    </script>
</body>
</html>

绘制文字 strokeText fillText

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
   
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
       
        ctx.strokeStyle="#ff00ff"
        //文字 ，大下/字体/颜色
        ctx.font="100px Microsoft YaHei"
        //填充渲染文字
        //fillText(文本，文本的起点x，文本的起点y，绘制文字的最大宽度)
        // ctx.fillText("你好",300,200,100)
        //文本对其选项 start(默认),end,left,right,center
        ctx.textAlign="center"
         //文本基线对齐  水平垂直居中对其middle,top,bottom,alphabetic
        ctx.textBaseline="middle"
        //文本的方向
        // ctx.direction="rtl"
        //预测量文本的宽度
        let text= ctx.measureText("Hello!")
        console.log(text)
        ctx.strokeText("Hello!",300,200)
       
        //画一个圆点给一个基准点做参考
        ctx.arc(300,200,5,0,2*Math.PI)
        ctx.fill()
    </script>
</body>
</html>

位移坐标系，translate位移缩放scale，旋转rotate变换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" style="border: 1px solid #ccc;">
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
   
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        //1.先移动坐标系 移动到中心  注意一定先平移坐标系 好计算坐标
        ctx.translate(300,200)
        //3.这里才开始旋转 先计算第2步的坐标系起始位置
        ctx.rotate(Math.PI/4)
        //4.水平拉伸2倍 高度变
        ctx.scale(2,1)
        //2.起始点从左边开始 因为中心点移动了 左边就是负坐标了
        ctx.fillRect(-250,-25,500,50)
       
    </script>
</body>
</html>

变形transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" style="border: 1px solid #ccc;">
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
   
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        //进行位移，水平坐标不变1,0  竖直坐标不变0,1  位移100
        // ctx.transform(1,0,0,1,100,100)
        //进行旋转45度  位移50
        ctx.transform(1,1,-1,1,50,50)
        ctx.fillRect(0,0,50,50)
       
    </script>
</body>
</html>

合成 globalCompositeOperation

刮刮卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ggk{
           width: 600px;
           height: 400px;
           font-size: 30px;
           font-weight: 900;
           text-align: center;
           line-height: 400px;
           overflow: hidden;
        }
    </style>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <div id="ggk">谢谢惠顾</div>
    <canvas id="c1" width="600" height="400" style="border: 1px solid #ccc;position: absolute;top: 0;left: 0;z-index: 10;">
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
   
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");

        //绘制图形
        let img=new Image()
        img.src="./2.png"
        img.onload=function(){
            ctx.drawImage(img,0,0,600,400)
        }

        var isDraw=false;
        c1.onmousedown=function(){
            isDraw=true
        }
        c1.onmouseup=function(){
            isDraw=false
        }
        c1.onmousemove=function(e){
            if(isDraw){
                var x=e.pageX;
                var y=e.pageY;
                //变成透明
                ctx.globalCompositeOperation="destination-out"
                ctx.arc(x,y,20,0,2*Math.PI)
                ctx.fill()
            }
        }
        let random=Math.random()
        if(random<0.1){
            var ggkDiv=document.getElementById("ggk")
            ggkDiv.innerHTML="恭喜你中了一等奖"
        }
    </script>
</body>
</html>

裁剪clip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制圆弧
        var heartPath=new Path2D;
       
        //3，绘制圆弧
        //第一点 起点
        heartPath.moveTo(300,200)
        //bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);cp1x, cp1y：第一个控制点的位置。cp2x, cp2y：第二个控制点的位置。x, y：曲线的终点位置。
        heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250);
        heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200);
        ctx.stroke(heartPath)

        var chatPath=new Path2D();
        //第一点 起点
        chatPath.moveTo(200,300)
        //quadraticCurveTo(cpx, cpy, x, y); cpx, cpy：控制点的位置。 x, y：曲线的终点位置。
        chatPath.quadraticCurveTo(150,300,150,200);
        chatPath.quadraticCurveTo(150,100,300,100);
        chatPath.quadraticCurveTo(450,100,450,200);
        chatPath.quadraticCurveTo(450,300,250,300);
        chatPath.quadraticCurveTo(250,350,150,350);
        chatPath.quadraticCurveTo(200,350,200,300);
        //裁剪
        ctx.clip(chatPath)
       
        ctx.fill(heartPath)
         //获取图片 2506*1280 图片尺寸
         let img=new Image()
        img.src="https://pic.rmb.bdstatic.com/bjh/cab573e6557634f75e5e365de12c25a56577.jpeg@h_1280"
        img.onload=function(){
            //第一种绘制图片的方式,参数一为图片对象，参数二将图片渲染到画布的水平位置，参数三将图片渲染到画布的垂直位置
            // ctx.drawImage(img,0,0);
            //第二种绘制图片的方式，参数一为图片对象，参数二将图片渲染到画布的水平位置，参数三将图片渲染到画布的垂直位置
            //参数4将图片缩放到对应的宽度，参数5将图片缩放到对应的高度
            // ctx.drawImage(img,0,0,600,400);
            //第三种绘制图片的方式 ,参数一为图片对象，img参数后面四个参数分别为源图片上面你要裁剪的起点位置和矩形的宽高，
            //后面四个参数分别为画布的位置和要渲染的矩形宽高
            ctx.drawImage(img,640,0,1280,720,0,0,600,400);
            ctx.lineWidth=20
            ctx.stroke(chatPath)
        }
     
    </script>
</body>
</html>

状态的保存 save 和恢复restore

恢复会从上一次保存的取出来，然后再下一个，下一个的取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="800" height="800" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
        console.log(ctx);
        //3，绘制圆弧
        ctx.fillStyle="red"
        ctx.fillRect(0,0,100,100)
        //保存当前的状态
        ctx.save()

        ctx.fillStyle="blue"
        ctx.fillRect(100,100,100,100)
        //保存当前的状态
        ctx.save()

        ctx.fillStyle="yellow"
        ctx.fillRect(200,200,100,100)
        //保存当前的状态
        ctx.save()
     
        ctx.fillStyle="green"
        ctx.fillRect(300,300,100,100)

        //恢复  恢复就会恢复上一次保存的黄色
        ctx.restore()
        ctx.fillRect(400,400,100,100)

        //再恢复  恢复就会恢复上一次保存的蓝色
        ctx.restore()
        ctx.fillRect(500,500,100,100)

        ctx.restore()
        ctx.fillRect(600,600,100,100)
    </script>
</body>
</html>

像素操作 getImageData putImageData

注意图片跨越：img.crossOrigin = “Anonymous”;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
    -->
    <canvas id="c1" width="600" height="400" >
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>
    <script>
        //1,找到画布
        var c1=document.getElementById("c1");
        //判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，请下载最新的浏览器")
        }
        //2,获取画笔，上下文对象
        var ctx=c1.getContext("2d");
         //获取图片 2506*1280 图片尺寸
         let img=new Image()
        img.crossOrigin = "Anonymous"; // 添加跨域属性 不然报错
        img.src="https://pic.rmb.bdstatic.com/bjh/cab573e6557634f75e5e365de12c25a56577.jpeg@h_1280"
        img.onload=function(){
            //第一种绘制图片的方式,参数一为图片对象，参数二将图片渲染到画布的水平位置，参数三将图片渲染到画布的垂直位置
            // ctx.drawImage(img,0,0);
            //第二种绘制图片的方式，参数一为图片对象，参数二将图片渲染到画布的水平位置，参数三将图片渲染到画布的垂直位置
            //参数4将图片缩放到对应的宽度，参数5将图片缩放到对应的高度
            // ctx.drawImage(img,0,0,600,400);
            //第三种绘制图片的方式 ,参数一为图片对象，img参数后面四个参数分别为源图片上面你要裁剪的起点位置和矩形的宽高，
            //后面四个参数分别为画布的位置和要渲染的矩形宽高
            ctx.drawImage(img,0,0,600,400);
            //获取所有的像素的数据
            let imageData=ctx.getImageData(0,0,600,400)
            console.log(imageData)
            //循环修改数据
            // for(let i=0;i<imageData.data.length;i+=4){
            //     //计算出当前像素的评价值  灰度值
            //     let avg=(imageData.data[i]+imageData.data[i+1]+imageData.data[i+2])/3
            //     imageData.data[i]=avg
            //     imageData.data[i+1]=avg
            //     imageData.data[i+2]=avg
            //     imageData.data[i+3]=255
            // }
            for(let i=0;i<imageData.data.length;i+=4){
                //  取反
                imageData.data[i]=255-imageData.data[i]
                imageData.data[i+1]=255-imageData.data[i+1]
                imageData.data[i+2]=255-imageData.data[i+2]
                imageData.data[i+3]=255
            }
            //将修改的数据重新渲染到画布上
            // ctx.putImageData(imageData,0,0)
            //.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
            // imagedata:这是一个包含图像数据的 ImageData 对象。通常通过 getImageData 方法获取。
            // dx：这是图像数据在 canvas 上的水平起始位置（x 坐标）。
            // dy：这是图像数据在 canvas 上的垂直起始位置（y 坐标）。
            // dirtyX (可选)：这是要写入的图像数据的子矩形的左上角 x 坐标。
            // dirtyY (可选):这是要写入的图像数据的子矩形的左上角 y 坐标。
            // dirtyWidth (可选):这是要写入的图像数据的子矩形的宽度。
            // dirtyHeight (可选):这是要写入的图像数据的子矩形的高度。
            ctx.putImageData(imageData,0,0,300,200,200,200)
        }
     
    </script>
</body>
</html>

案例

1，实现在线画板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button.active{
            color:#fff;
            background-color: orangered;
        }
    </style>
</head>
<body>
    <canvas id="c1" width="800" height="600" ></canvas>
    <hr>
    <button id="boldBtn" type="button">粗线条</button>
    <button id="thinBtn" type="button">细线条</button>
    <button id="saveBtn" type="button">保存签名</button>
    <input type="color" name="" id="color" value="">
    <button class="clearBtn">橡皮擦</button>
    <button id="nullBtn">清空画布</button>
    <script>
        //1,获取canvas画布和绘制的上下文对象
        var canvas=document.getElementById("c1");
        var ctx=canvas.getContext("2d");
        //连接处圆润
        ctx.lineJoin="round"
        //开始和结束端也是圆润
        ctx.lineCap="round"
        //2，获取输入框和按钮
        //设置画笔的粗细
        var boldBtn=document.querySelector("#boldBtn")
        var thinBtn=document.querySelector("#thinBtn")
        var inputColor=document.querySelector("#color")
        //保存签名
        var saveBtn=document.querySelector("#saveBtn")
        //橡皮擦
        var clearBtn=document.querySelector(".clearBtn")
        //清空画布
        var nullBtn=document.querySelector("#nullBtn")
        //设置允许绘制的变量
        var isDraw=false;
        //鼠标按下
        canvas.onmousedown=function(event){
            isDraw=true;
            ctx.beginPath();
            var x=event.pageX-canvas.offsetLeft
            var y=event.pageY-canvas.offsetTop;
            ctx.moveTo(x,y)
        }
        //鼠标离开
        canvas.onmouseleave=function(event){
            isDraw=false;
            ctx.closePath()
        }
        //鼠标抬起
        canvas.onmouseup=function(event){
            isDraw=false;
            ctx.closePath()
        }
        //鼠标移动
        canvas.onmousemove=function(event){
            if(isDraw){
                var x=event.pageX-canvas.offsetLeft
                var y=event.pageY-canvas.offsetTop;
                ctx.lineTo(x,y)
                ctx.stroke()
            }
        }
        boldBtn.onclick=function(){
            ctx.globalCompositeOperation="source-over";
            ctx.lineWidth=20
            boldBtn.classList.add("active")
            thinBtn.classList.remove("active")
            clearBtn.classList.remove("active")
        }
        thinBtn.onclick=function(){
            ctx.globalCompositeOperation="source-over";
            ctx.lineWidth=2
            thinBtn.classList.add("active")
            boldBtn.classList.remove("active")
            clearBtn.classList.remove("active")
        }
        clearBtn.onclick=function(){
            ctx.globalCompositeOperation="destination-out";
            ctx.lineWidth=30;
            clearBtn.classList.add("active")
            boldBtn.classList.remove("active")
            thinBtn.classList.remove("active")
        }
        nullBtn.onclick=function(){
            ctx.clearRect(0,0,800,600)
        }
        saveBtn.onclick=function(){
            var urlData=canvas.toDataURL();
            // var img=new Image()
            // img.src=urlData;
            // document.body.appendChild(img)
            var downloadA=document.createElement("a")
            downloadA.setAttribute("download","签名")
            downloadA.href=urlData
            downloadA.click()
        }
        inputColor.onchange=function(){
            ctx.strokeStyle=inputColor.value;
        }
    </script>
</body>
</html>

2，绘制动态时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button.active{
            color:#fff;
            background-color: orangered;
        }
    </style>
</head>
<body>
    <canvas id="c1" width="800" height="600" ></canvas>
    <script>
        //1,获取canvas画布和绘制的上下文对象
        var canvas=document.getElementById("c1");
        var ctx=canvas.getContext("2d");

        function render(){
                 ctx.clearRect(0,0,800,600)
                 //存档，保存当前坐标位置和上下文对象的状态
                    ctx.save()
                    ctx.translate(400,300)
                    ctx.rotate(-Math.PI/2)

                    ctx.save()
                    for(var i=0;i<12;i++){
                        //绘制小时的刻度
                        ctx.beginPath();
                        ctx.moveTo(170,0)
                        ctx.lineTo(190,0)
                        ctx.lineWidth=8
                        ctx.strokeStyle="gray"
                        ctx.stroke()
                        ctx.closePath();
                        ctx.rotate(2*Math.PI/12)
                    }
                    ctx.restore()
                    ctx.save()
                    for(var i=0;i<60;i++){
                        //绘制分钟的刻度
                        ctx.beginPath();
                        ctx.moveTo(180,0)
                        ctx.lineTo(190,0)
                        ctx.lineWidth=2
                        ctx.strokeStyle="gray"
                        ctx.stroke()
                        ctx.closePath();
                        ctx.rotate(2*Math.PI/60)
                    }
                    ctx.restore()
                    ctx.save()
                    //获取当前时间
                    var time=new Date()
                    var hour=time.getHours()
                    var min=time.getMinutes()
                    var sec=time.getSeconds()
                    hour = hour >=12 ? hour -12 : hour;

                    //绘制秒针
                    ctx.rotate(2*Math.PI/60*sec)
                    ctx.beginPath();
                    ctx.moveTo(-30,0)
                    ctx.lineTo(190,0)
                    ctx.lineWidth=2
                    ctx.strokeStyle="red"
                    ctx.stroke()
                    ctx.closePath();
                    ctx.restore()
                    ctx.save()

                    //绘制分针
                    ctx.rotate(2*Math.PI/60*min+2*Math.PI/60/60*sec)
                    ctx.beginPath();
                    ctx.moveTo(-20,0)
                    ctx.lineTo(130,0)
                    ctx.lineWidth=4
                    ctx.strokeStyle="#888"
                    ctx.stroke()
                    ctx.closePath();
                    ctx.restore()
                    ctx.save()

                    //绘制时针
                    ctx.rotate(2*Math.PI/12*hour+2*Math.PI/12/60*min+2*Math.PI/60/60*sec)
                    ctx.beginPath();
                    ctx.moveTo(-15,0)
                    ctx.lineTo(110,0)
                    ctx.lineWidth=8
                    ctx.strokeStyle="#333"
                    ctx.stroke()
                    ctx.closePath();
                    ctx.restore()
                   

                    ctx.restore()
                    requestAnimationFrame(render)
        }

        render()
    </script>
</body>
</html>