画布笔记

开酒不喝车
152 阅读1分钟

1、初识canvas

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- 
    width：画布宽度
    height：画布高度 
    -->
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            // 获取画笔
            const ctx = c1.getContext("2d");
            // 检查矩形fillRect(位置x，位置y，宽度，高度)
            ctx.fillRect(200, 200, 300, 300);
        </script>
    </body>
</html>

效果图 image.png

2、圆弧

2.1 简单的弧线

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            // 判断是否有getContext
            if (!c1.getContext) {
                console.log("当前浏览器不支持canvas");
            }
            // 获取画笔，上下文对象
            const ctx = c1.getContext("2d");
            console.log(Math.PI);
            // arc是绘制圆弧的方法
            // ctx.arc(圆心，圆心y，半径，开始的角度，结束的角度（Math.PI为180度），逆时针还是顺时针（默认是顺时针false，可以设置为true变为逆时针）)

            ctx.arc(300, 200, 50, 0, Math.PI / 2, true);
            ctx.stroke();
        </script>
    </body>

效果图

image.png

2.2 绘制笑脸

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            // 判断是否有getContext
            if (!c1.getContext) {
                console.log("当前浏览器不支持canvas");
            }
            // 获取画笔，上下文对象
            const ctx = c1.getContext("2d");
            ctx.beginPath()

            // 绘制一张脸
            ctx.arc(75,75,50,0,Math.PI * 2)
            // 使用moveTo可以绘制1条不连续的路径

            // 绘制嘴巴
            ctx.arc(75,75,35,0,Math.PI)

            // 绘制左眼
            ctx.arc(60,65,5,0,Math.PI*2)

            // 绘制右眼
            ctx.arc(90,65,5,0,Math.PI * 2)
            ctx.stroke();
            ctx.closePath();
        </script>
    </body>
</html>

效果图

image.png 会发现这张脸绘制完成之后会有连接线，这是因为在绘制时是一笔完成，没有断点的

消除连接线

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            // 判断是否有getContext
            if (!c1.getContext) {
                console.log("当前浏览器不支持canvas");
            }
            // 获取画笔，上下文对象
            const ctx = c1.getContext("2d");
            ctx.beginPath()
            
            // 绘制一张脸
            ctx.arc(75,75,50,0,Math.PI * 2)
            // 使用moveTo可以绘制1条不连续的路径
            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>

效果图

image.png ctx.moveTo相当于提起笔到指定位置

3、绘制折线线段

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            // 判断是否有getContext
            if (!c1.getContext) {
                console.log("当前浏览器不支持canvas");
            }
            const ctx = c1.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(200, 200);
            ctx.lineTo(200, 300);
            ctx.lineTo(300, 300);
            ctx.lineTo(200, 200);
            ctx.stroke();
        </script>
    </body>
</html>

效果图 image.png

4、二次贝塞尔曲线实现聊天气泡框

image.png

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            // 判断是否有getContext
            if (!c1.getContext) {
                console.log("当前浏览器不支持canvas");
            }
            const ctx = c1.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(200, 300);
            ctx.quadraticCurveTo(100, 300, 100, 250);
            ctx.quadraticCurveTo(100, 200, 200, 200);
            ctx.quadraticCurveTo(300, 200, 300, 250);
            ctx.quadraticCurveTo(300, 300, 240, 300);
            ctx.quadraticCurveTo(240, 350, 250, 350);
            ctx.quadraticCurveTo(200, 350, 200, 300);
            ctx.stroke();
            ctx.closePath();
        </script>
    </body>
</html>

效果图

image.png

5、三次贝塞尔曲线实现爱心

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            // 判断是否有getContext
            if (!c1.getContext) {
                console.log("当前浏览器不支持canvas");
            }
            const ctx = c1.getContext("2d");
            ctx.beginPath();
            // 起点
            ctx.moveTo(300, 200);
            // 2个控制点，1个终点
            ctx.bezierCurveTo(350, 150, 400, 200, 300, 250);
            ctx.bezierCurveTo(200, 200, 250, 150, 300, 200);
            ctx.stroke();
            ctx.closePath();
        </script>
    </body>
</html>

效果图

image.png

6、线性渐变

6.1 静态

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            const ctx = c1.getContext("2d");
            /**  
                createLinearGradient(x,y,x1,y1),x,y指定渐变起点，本例中x=0,y
                =0以坐标轴(0,0)点开始作为渐变起点，x1,y1指定渐变终点(200,0)
             */
            let linearGradient = ctx.createLinearGradient(100, 200, 400, 500);
            // addColorStop方法中的第一参数范围为0-1，代表起点和终点
            linearGradient.addColorStop(0, "red");
            linearGradient.addColorStop(0.3, "#ffcccc");
            linearGradient.addColorStop(1, "blue");
            ctx.fillStyle = linearGradient;
            // fillRect(x,y,x1,y1),x,y指定渐变起点，x和y代表坐标起点,x1和y1代表长度和宽度
            ctx.fillRect(100, 200, 300, 300);
        </script>
    </body>
</html>

效果图

image.png

6.2 动态

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c1" width="600" height="400"> </canvas>
        <script>
            const c1 = document.getElementById("c1");
            const ctx = c1.getContext("2d");
            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>
avatar
文章
阅读
粉丝